/* =============================================
   RESPONSIVE — Desktop-first, media queries
   ============================================= */

/* Bordas estruturais: 1px no mobile (Figma mobile usa 1px); desktop fica 2px.
   Só afeta a largura — não interfere no layout desktop. */
@media (max-width: 1180px) {
  :root {
    --border-width: 1px;
  }
}

/* ── 2XL: 1535px ── */
@media (max-width: 1535px) {
  .site-header {
    padding: 15px 32px;
  }
  .site-header--scrolled {
    padding: 15px 32px;
  }
  .site-header__nav {
    gap: 20px;
  }
  .site-header__actions {
    gap: 8px;
  }
  .site-header__btn {
    padding: 8px 12px;
  }
  /* Hero logo menor neste breakpoint */
  .hero__logo-img {
    width: 200px;
    height: 200px;
  }
  .hero {
    padding-top: 150px;
  }
}

/* ── 1446px: Font scaling ── */
@media (max-width: 1446px) {
  html {
    font-size: calc(var(--font-base) - 7%);
  }

  .hero__content .text-display-1 {
    font-size: 52px;
  }
}

/* ── 1366px: Header compacto para telas ~1280px ── */
@media (max-width: 1366px) {
  /* Header não-fixo: compacto, sem logo */
  .site-header {
    align-items: center;
    padding: 15px 32px;
  }
  .site-header__logo {
    display: none;
  }
  [data-page="home"] .site-header--logo-visible .site-header__logo {
    display: block;
  }
  /* Header fixo: logo-icon volta a aparecer (apenas páginas internas) */
  [data-page]:not([data-page="home"]) .site-header--scrolled .site-header__logo {
    display: block;
  }
  /* Nav */
  .site-header__nav {
    gap: 24px;
  }
  .site-header .site-header__nav a.text-paragraph-3 {
    font-size: 14px;
  }
  /* Botões */
  .site-header__actions {
    gap: 16px;
  }
  .site-header__btn {
    padding: 8px 14px;
    height: 40px;
  }
  .site-header__btn img {
    width: 20px;
    height: 20px;
  }
  .site-header__btn--cta img {
    width: 8px;
    height: 8px;
  }
  .site-header .site-header__btn span.text-headline-8 {
    font-size: 12px;
  }
  .hero__logo-img {
    width: 160px;
    height: 160px;
  }
  .hero__inner {
    gap: 24px;
  }
  .hero {
    padding-top: 66px;
    padding-bottom: 200px;
  }
  .hero__bg {
    object-fit: contain;
    object-position: top center;
    top: 0;
    bottom: auto;
    width: 100%;
    height: auto;
  }
  /* Variável no ancestral comum: linha e losango (irmãos) herdam e seguem juntos */
  .hero {
    --hero-main-line-top: 400px;
  }
  /* .hero__line-vertical segue --hero-main-line-top automaticamente (top 402px) */
  .hero__line-horizontal {
    top: 532px;
  }
  /* Scrolled/fixo: ícone 56px + padding compacto */
  .site-header--scrolled {
    padding: 15px 32px;
  }
  .site-header--scrolled .site-header__logo-icon {
    width: 56px;
    height: 56px;
  }
  /* Header páginas internas */
  [data-page] .site-header {
    padding: 15px 32px;
  }
}

/* ── XL: 1180px — Breakpoint principal ── */
@media (max-width: 1180px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Header — restaura logo para tablet/mobile */
  .site-header {
    padding: 16px 20px;
    align-items: center;
  }
  .site-header__logo {
    display: block;
  }
  .site-header__nav,
  .site-header__actions {
    display: none;
  }
  .site-header__logo img {
    width: 120px;
    height: 120px;
  }

  /* Hero — logo + slogan empilhados em coluna */
  .hero__inner {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }
  .hero__logo-img {
    width: 120px;
    height: 120px;
  }
  .hero__slogan {
    align-items: center;
  }
  .hero__content .text-display-1 {
    font-size: 46px;
  }
  .hero__cta {
    display: inline-flex;
    align-self: stretch;
  }
  .hero {
    padding-top: 200px;
    padding-bottom: 200px;
  }

  /* Hero decorative lines — hidden on mobile */
  .hero__line-main-h,
  .hero__diamond,
  .hero__line-horizontal,
  .hero__line-vertical {
    display: none;
  }

  /* Decorative line wrapper — reposition for mobile */
  .decorative-line-wrapper__line {
    left: 10px;
    transform: none;
    z-index: 20;
  }
  .decorative-line-wrapper__line--right {
    display: none;
  }

  /* Intro */
  .intro {
    padding: 0;
  }
  .intro__image-wrapper {
  }

  /* Porque */
  .porque__inner {
    grid-template-columns: 1fr;
  }
  .porque__left {
    width: 100%;
  }
  .porque__title-box {
    width: 100%;
    margin-left: 0;
  }
  .porque__title-box h2 {
    width: 100%;
  }
  .porque__image {
    height: 400px;
    width: 100%;
    margin-left: 0;
  }
  .porque__right {
    flex: none;
    width: 100%;
    border-right: none;
    padding: 40px 32px;
  }
  .porque__features {
    width: 100%;
  }

  /* Numeros */
  .numeros__inner {
    height: auto;
  }
  .numeros__stats-inner {
    flex-direction: column;
    gap: 0;
  }
  .numeros__map {
    height: 400px;
  }

  /* Produtos */
  .produtos {
    padding: 0;
  }
  .produtos__header {
    padding: 20px;
  }

  /* Depoimentos */
  .depoimentos {
    padding: 0;
  }
  .depoimentos__header {
    height: auto;
  }
  .depoimentos__slide {
    flex-direction: column;
  }
  .depoimentos__photo {
    padding: 0;
    width: 100%;
  }
  .depoimentos__photo img {
    width: 100%;
    height: 300px;
  }
  .cta {
    height: 600px;
  }
  .cta__decoration,
  .cta__decoration-horizontal {
    display: none;
  }
  .cta__inner {
    position: relative;
    inset: auto;
    padding: 64px 0;
  }
  .cta__card {
    width: 100%;
  }
  .cta__card-text h2 {
    width: 100%;
  }
  .cta__card-text > div {
    width: 100%;
  }

  /* Footer */
  .site-footer__main {
    padding-top: 64px;
    padding-bottom: 32px;
  }
  .site-footer__top {
    flex-direction: column;
    gap: 40px;
  }
  .site-footer__menus {
    gap: 32px;
  }
  .site-footer__middle {
    flex-direction: column;
    gap: 24px;
  }

  /* QS Hero */
  .qs-hero__image {
    height: 450px;
  }

  /* QS MVV */
  .qs-mvv__grid {
    flex-direction: column;
  }
  .qs-mvv__left {
    display: flex;
    flex-direction: column;
  }
  .qs-mvv__cards-row {
    flex-direction: column;
  }
  .qs-mvv__right {
    width: 100%;
  }
  .qs-mvv__card--border-right {
    border-right: none;
    border-bottom: 1px solid var(--color-neutral-borda);
  }
  .qs-mvv__image {
    height: 300px;
    border-right: none;
  }

  /* Galeria */
  .galeria-swiper .galeria__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* QS Parcerias */
  .qs-parcerias__grid {
    flex-direction: column;
  }
  .qs-parcerias__card {
    height: auto;
  }
  .qs-parcerias__card:first-child {
    border-right: none;
    border-bottom: 1px solid var(--color-neutral-borda);
  }

  /* Decorative lines */
  .galeria__decoration {
    display: none;
  }

  /* Galeria grid (produtos) */
  .galeria--cols .galeria__corner-block,
  .galeria--cols .galeria__corner-spacer,
  .galeria--cols .galeria__header-gutter {
    display: none;
  }
  .galeria--cols > .galeria__main {
    grid-column: 1 / -1;
    grid-row: auto;
    border-top: none;
    padding: 64px 0 80px;
  }

  /* ── PD HERO (tablet) ── */
  .pd-hero__image {
    height: 100%;
  }
  .pd-hero__boxes-inner {
    flex-direction: column;
  }
  .pd-hero__box--left {
    border-right: none;
    border-bottom: 1px solid var(--color-neutral-borda);
  }

  /* ── PD PRODUCT (tablet) ── */
  .pd-product {
    padding-top: 120px;
  }
  .pd-product__corner-block,
  .pd-product__corner-spacer,
  .pd-product__header-gutter,
  .pd-product__body-gutter {
    display: none;
  }
  .pd-product > .pd-product__header {
    grid-column: 2;
    grid-row: auto;
  }
  .pd-product__header {
    flex-direction: column;
    border-bottom: none;
  }
  .pd-product__header-left {
    width: 100%;
    align-items: stretch;
  }
  .pd-product__title-bar {
    width: 100%;
  }
  .pd-product__header-right {
    width: 100%;
  }
  .pd-product__desc-bar {
    width: 100%;
    padding: 32px;
  }
  .pd-product__header-right p {
    width: 100%;
  }
  .pd-product > .pd-product__body {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }
  .pd-product__body .pd-product__image {
    grid-column: auto;
    width: 100%;
    height: 400px;
  }
  .pd-product__body .pd-product__content {
    grid-column: auto;
    width: 100%;
  }
  .pd-product__body .pd-product__content-inner {
    width: 100%;
    padding: 40px 32px;
  }
  .pd-product__inner {
    display: flex;
    flex-direction: column;
  }
  .pd-product__desc {
    padding: 40px 32px;
    border-left: none;
    border-bottom: 1px solid var(--color-neutral-borda);
  }
  .pd-product__image {
    height: 400px;
  }
  .pd-product__content {
    padding: 40px 32px;
    border-left: none;
  }

  /* ── PD REFS (tablet) ── */
  .pd-refs__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── BLOG (tablet) ── */
  .blog-content__main--grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── FAQ (tablet) ── */
  .faq-content__accordion {
    width: auto;
    flex: 1;
  }
}

/* ── MD: 1024px — Tablet + Mobile ── */
@media (max-width: 1024px) {
  /* Header páginas internas mobile */
  [data-page] .site-header {
    position: fixed;
    height: 64px;
    padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  [data-page]:not([data-page="home"]) .site-header .site-header__logo {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
  }
  [data-page] .site-header .site-header__logo-icon {
    width: 44px !important;
    height: 44px !important;
  }
  [data-page]:not([data-page="home"]) .site-header .site-header__diamond {
    opacity: 1;
  }

  /* ── NAVBAR MOBILE ── */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    padding: 0;
    background-color: var(--color-white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 110;
    transition: border-color 0.35s ease;
  }
  .site-header__nav,
  .site-header__actions {
    display: none;
  }
  .site-header__logo {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0 !important;
    visibility: hidden !important;
    transition:
      opacity 0.35s ease,
      visibility 0.35s ease;
    pointer-events: none;
  }
  .site-header__logo-full {
    display: none;
  }
  .site-header__logo-icon {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
  }
  .site-header__diamond {
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .site-header__mobile-bar {
    display: flex;
  }
  /* Header fixo após hero — fade in logo, diamond e border */
  .site-header--scrolled {
    padding: 0;
    border-bottom-color: var(--color-neutral-borda);
  }
  [data-page]:not([data-page="home"]) .site-header--scrolled .site-header__logo {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
  }
  [data-page="home"] .site-header--logo-visible .site-header__logo {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
  }
  .site-header--scrolled .site-header__diamond {
    opacity: 1;
  }

  /* ── HERO MOBILE ── */
  /* Definida no ancestral comum para ficar acessível ao .decorative-line-wrapper__line */
  .decorative-line-wrapper {
    --hero-mobile-panel-height: clamp(132px, 21svh, 188px);
  }
  .hero {
    --hero-mobile-panel-height: clamp(132px, 21svh, 188px);
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    height: 100svh;
    min-height: 600px;
    padding-top: 64px;
    padding-bottom: 0;
    overflow: hidden;
  }
  .hero__bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    display: block;
    width: 100%;
    height: var(--hero-mobile-panel-height);
    object-fit: cover;
    object-position: left bottom;
  }
  .hero__logo-img {
    width: 160px;
    height: 160px;
  }
  .hero__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 48px 20px calc(var(--hero-mobile-panel-height) + 16px);
    position: relative;
    z-index: 10;
    min-height: 0;
  }
  .hero__content .container {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .hero__inner {
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    align-items: center;
  }
  .hero__content h1 {
    font-size: 44px;
    line-height: 1.2;
  }
  .hero__content .text-headline-4 {
    font-size: 20px;
    line-height: 1.3;
  }
  .hero__slogan {
    gap: 16px;
    width: 100%;
    align-items: center;
  }
  .hero__cta {
    display: inline-flex;
    align-self: stretch;
    margin-top: 0;
  }

  /* Contexto de posicionamento da linha — termina antes da CTA */
  [data-page="home"] .home-line-zone {
    position: relative;
  }

  /* Linha vertical contínua — removida no mobile home */
  [data-page="home"] .decorative-line-wrapper__line {
    display: none;
  }

  /* Linhas decorativas do hero: todas ocultas no mobile */
  .hero__diamond,
  .hero__line-horizontal,
  .hero__line-vertical,
  .hero__bottom-corner {
    display: none;
  }

  /* Telas baixas: compactar conteúdo para não colidir com as linhas */
  @media (max-height: 740px) {
    .decorative-line-wrapper {
      --hero-mobile-panel-height: clamp(112px, 18svh, 152px);
    }
    .hero {
      --hero-mobile-panel-height: clamp(112px, 18svh, 152px);
    }

    .hero__content {
      padding-top: 48px;
      padding-bottom: calc(var(--hero-mobile-panel-height) + 24px);
    }

    .hero__inner {
      gap: 12px;
    }

    .hero__logo-img {
      width: 128px;
      height: 128px;
    }

    .hero__slogan {
      gap: 8px;
    }

    .hero__content h1 {
      font-size: 32px;
      line-height: 1.15;
    }

    .hero__content .text-headline-4 {
      font-size: 16px;
    }

    .hero__cta {
      min-height: 48px;
      padding: 10px 16px;
      margin-top: 4px;
    }
  }

  /* ── INTRO MOBILE ── */
  .intro {
    padding: 0;
    gap: 0;
  }
  .intro__text {
    font-size: 24px;
    padding: 0 20px;
    margin-bottom: 64px;
  }
  .intro__image-wrapper {
    height: 360px;
  }

  /* ── PORQUE MOBILE ── */
  .porque {
    padding: 0;
  }
  .porque__inner {
    border-top: none;
    border-bottom: none;
  }
  .porque__title-box {
    width: 100%;
    padding: 20px;
    justify-content: flex-start;
    margin-left: 0;
  }
  .porque__title-box h2 {
    font-size: 24px;
    width: 100%;
    text-align: left;
  }
  .porque__image {
    /* height: 232px; */
    height: auto;
  }
  .porque__right {
    flex: none;
    width: 100%;
    padding: 48px 10px 0 10px;
    gap: 16px;
    border-right: none;
  }
  .porque__features {
    width: 100%;
    gap: 0;
    padding: 0 10px;
  }
  .porque__feature {
    gap: 16px;
  }
  .porque__feature-content .text-headline-6-alt {
    font-size: 18px;
  }
  .porque__feature-content .text-paragraph-2 {
    font-size: 16px;
  }
  .porque__feature-content--has-height {
    height: auto;
  }
  .porque__feature-content {
    gap: 8px;
    padding-bottom: 32px;
  }
  .porque__feature:last-child .porque__feature-content {
    padding-bottom: 0;
  }
  .porque__cta {
    width: auto;
    padding: 16px;
    align-self: stretch;
    text-align: center;
    justify-content: center;
    margin: 0 10px;
  }

  /* ── NUMEROS MOBILE ── */
  .numeros {
    padding-top: 0;
  }
  .numeros__stats {
    border-top: 1px solid var(--color-neutral-borda);
  }
  .numeros__stats-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: 0;
    padding: 0 !important;
    /* Figma mobile: fundo branco com gradiente cinza sutil no centro */
    background: linear-gradient(to right, rgba(234, 233, 233, 0) 0%, rgba(234, 233, 233, 0.5) 50%, rgba(234, 233, 233, 0) 100%);
  }
  .numeros__stat {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  /* Cards não-destacados são transparentes (mostram o gradiente/branco do container).
       Sem isso ficavam cinza sólido (#eae9e9) — o que destoava do Figma. */
  .numeros__stat:not(.numeros__stat--highlighted) {
    background-color: transparent;
  }
  /* Divisória horizontal sob a linha de cima (full width, inclui o card laranja) */
  .numeros__stat:nth-child(1),
  .numeros__stat:nth-child(2) {
    border-bottom: 1px solid var(--color-neutral-30);
  }
  /* Divisória vertical SÓ na linha de baixo (16.660 | R$ 19,4).
       O card laranja (nth-child 1) não leva borda vertical — era o "efeito sujo" no mobile.
       Mesmo estilo da linha principal e das bordas do desktop (--color-neutral-borda). */
  .numeros__stat:nth-child(3) {
    border-right: 1px solid var(--color-neutral-30);
  }
  .numeros__stat .text-display-2 {
    font-size: 40px;
  }
  .numeros__stat .text-paragraph-3 {
    font-size: 12px;
  }
  .numeros__map {
    height: 565px;
  }
  /* Figma mobile: recorte do mapa no Sudeste (Goiás/Minas/SP), não centralizado */
  .numeros__map img {
    object-position: 62% center;
  }

  /* ── PRODUTOS MOBILE (Swiper carousel) ── */
  .produtos {
    padding: 0;
  }
  .produtos__header {
    height: auto;
    padding: 20px;
    position: relative;
  }
  .produtos__header h2 {
    font-size: 24px;
  }
  /* Small decorative line + diamond next to title */
  .produtos__title-deco {
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .produtos__title-deco-line {
    width: 10px;
    height: 1px;
    background-color: var(--color-neutral-borda);
  }
  .produtos__title-deco-diamond {
    width: 7px;
    height: 7px;
    background-color: var(--color-neutral-borda);
    transform: rotate(45deg);
    margin-left: -3px;
  }
  .produtos-swiper {
    overflow: hidden;
  }
  .produtos-swiper .produtos__grid {
    display: flex;
    padding: 0;
    gap: 0;
  }
  .produtos-swiper .produtos__grid .swiper-slide {
    width: 274px;
    flex-shrink: 0;
  }
  .produto-card {
    min-width: auto;
    width: 100%;
    /* sem altura fixa: estica junto com os outros (mesma altura visual),
       evitando overflow quando o tag quebra em 2 linhas. */
  }
  /* Pagination dots */
  .produtos-pagination {
    position: static !important;
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    padding: 24px 0 0 20px;
  }
  .produtos-pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    border-radius: 8px;
    background-color: var(--color-neutral-40);
    opacity: 1;
    transition:
      width 0.3s ease,
      background-color 0.3s ease;
  }
  .produtos-pagination .swiper-pagination-bullet-active {
    width: 24px;
    background-color: var(--color-primary-pure);
  }

  /* ── DEPOIMENTOS MOBILE ── */
  .depoimentos {
    padding: 0;
  }
  .depoimentos__header {
    height: auto;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .depoimentos__header .text-display-3 {
    font-size: 24px;
  }
  .depoimentos__header .text-paragraph-2 {
    font-size: 16px;
  }
  .depoimentos__nav {
    display: none;
  }
  /* Cards com mesma altura: estica todos os slides até o mais alto
       e faz o card preencher o espaço, evitando faixa branca embaixo
       dos depoimentos mais curtos. */
  .depoimentos-swiper .swiper-wrapper {
    align-items: stretch;
  }
  .depoimentos-swiper .swiper-slide {
    height: auto;
    display: flex;
  }
  .depoimentos__slide {
    flex: 1;
    width: 100%;
    flex-direction: column;
  }
  .depoimentos__photo {
    width: 100%;
    padding: 32px 20px 0;
    order: 1;
  }
  .depoimentos__photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 335 / 383;
  }
  .depoimentos__quote {
    padding: 20px;
    order: 2;
    /* sobrescreve o justify-content: center da base para a descrição
           começar sempre no topo, alinhada entre todos os cards */
    justify-content: flex-start;
  }
  .depoimentos__quote-text {
    max-width: none;
    gap: 16px;
    /* estica o bloco de texto para ocupar toda a altura do card,
           permitindo ancorar o autor no rodapé */
    flex: 1;
    align-items: stretch;
  }
  .depoimentos__quote-copy {
    gap: 16px;
    flex: 1;
  }
  /* nome do depoimento sempre colado no rodapé, alinhado entre os cards */
  .depoimentos__author {
    margin-top: auto;
  }
  .depoimentos__quote .text-headline-5 {
    font-size: 20px;
    line-height: 1.5;
  }
  .depoimentos__author .text-headline-6-alt {
    font-size: 18px;
  }
  /* Nav mobile abaixo do slide — escondida no mobile (navegação por swipe) */
  .depoimentos__nav-mobile {
    display: none;
  }
  /* Pagination dots */
  .depoimentos-pagination {
    position: static !important;
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    padding: 24px 0 24px 20px;
  }
  .depoimentos-pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    border-radius: 8px;
    background-color: var(--color-neutral-40);
    opacity: 1;
    transition:
      width 0.3s ease,
      background-color 0.3s ease;
  }
  .depoimentos-pagination .swiper-pagination-bullet-active {
    width: 24px;
    background-color: var(--color-primary-pure);
  }

  /* ── CTA MOBILE ── */
  .cta {
    height: 764px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 10px 10px 10px;
  }
  .cta__bg {
    position: absolute;
    inset: 0;
    height: 100%;
  }
  .cta__decoration {
    display: block;
    left: 10px;
  }
  .cta__decoration-line {
    background-color: #ffffff;
  }
  .cta__decoration-diamond {
    top: calc(50% + 208.5px);
    left: -3.5px;
    background-color: #ffffff;
  }
  .cta__decoration-horizontal {
    display: block;
    top: calc(50% + 212.5px);
    left: 0;
    width: 10px;
    transform: translateY(-50%);
  }
  .cta__inner {
    position: relative;
    inset: auto;
    padding: 0;
    background-color: transparent;
  }
  .cta__card {
    width: 100%;
    padding: 10px;
    gap: 48px;
  }
  .cta__card-text {
    gap: 16px;
  }
  .cta__card-text h2 {
    font-size: 24px;
    width: 100%;
  }
  .cta__card-text > div {
    width: 100%;
    font-size: 16px;
  }
  .cta__btn {
    width: 100%;
    align-self: stretch;
    text-align: center;
    justify-content: center;
  }

  /* ── FOOTER MOBILE ── */
  .site-footer__mobile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .site-footer__mobile-top .site-footer__logo img {
    width: 184px;
    height: 184px;
  }
  .site-footer__social--mobile {
    flex-direction: column;
    gap: 8px;
  }
  .site-footer {
    position: relative;
  }
  .site-footer__social-deco {
    display: block;
    position: absolute;
    right: 0;
    width: 20px;
    height: 1px;
    background-color: var(--color-primary-pure);
    z-index: 2;
  }
  .site-footer__social-deco::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -4px;
    width: 8px;
    height: 8px;
    background-color: var(--color-primary-pure);
    transform: translateY(-50%) rotate(45deg);
  }
  .site-footer__social-deco--1 {
    top: 92px;
  }
  .site-footer__social-deco--2 {
    top: 156px;
  }
  .site-footer__social-deco--3 {
    top: 220px;
  }
  .site-footer__main {
    padding: 64px 20px 20px;
    gap: 40px;
  }
  .site-footer__top {
    flex-direction: column;
    gap: 40px;
  }
  .site-footer__top > .site-footer__logo {
    display: none;
  }
  .site-footer__menus {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  .site-footer__menu {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px 0;
    gap: 16px;
  }
  .site-footer__menu:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  .site-footer__menu > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 100%;
  }
  .site-footer__menu > span::after {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 14l6 6 6-6' stroke='%23776D6F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }
  .site-footer__menu.is-open > span::after {
    transform: rotate(180deg);
  }
  .site-footer__menu-links {
    display: none;
  }
  .site-footer__menu.is-open .site-footer__menu-links {
    display: flex;
  }
  .site-footer__address {
    width: 100%;
  }
  .site-footer__address > span::after {
    display: none;
  }
  .site-footer__address .text-paragraph-3 {
    display: block;
  }
  .site-footer__middle {
    flex-direction: column;
    gap: 16px;
  }
  .site-footer__middle .site-footer__social {
    display: none;
  }
  .site-footer__buttons {
    flex-direction: column;
    width: 100%;
  }
  .site-footer__btn {
    width: 100%;
    height: 56px;
  }
  .site-footer__bottom-inner {
    flex-direction: column;
    height: auto;
    padding: 20px 0;
    gap: 8px;
    align-items: flex-start;
  }

  /* ── WHATSAPP MOBILE (icon only) ── */
  .whatsapp-btn {
    bottom: 20px;
    right: 16px;
    padding-right: 0;
  }
  .whatsapp-btn__label {
    display: none;
  }
  .whatsapp-btn__icon {
    margin-right: 0;
  }

  /* Display overrides */
  .text-display-3 {
    font-size: 36px;
  }
  .text-display-1 {
    font-size: 36px;
  }

  /* ── QS HERO MOBILE ── */
  [data-page] .qs-hero {
    padding-top: 64px;
  }
  .qs-hero__title-bar {
    padding: 0;
    border-bottom: none;
    /* border-top mantido do desktop: var(--border-width) solid var(--color-neutral-borda) */
  }
  .qs-hero__title-inner {
    height: auto;
    padding: 20px;
    margin: 0;
    border-left: none;
    border-right: none;
  }
  .qs-hero__title-inner h1 {
    font-size: 32px;
  }
  .qs-hero__image {
    height: 300px;
  }
  [data-page="quem-somos"] .decorative-line-wrapper__line {
    display: none;
    top: 64px;
    bottom: 0;
    left: 10px;
    transform: none;
    width: 2px;
    z-index: 90;
    clip-path: none;
    background-color: var(--color-neutral-borda);
    pointer-events: none;
  }
  [data-page="quem-somos"] .decorative-line-wrapper__line::after {
    display: none;
  }

  /* ── QS SOBRE MOBILE ── */
  [data-section="qs-sobre"] .orc-section__row--top > .orc-section__gutter:first-child.qs-sobre__gutter-bar {
    min-height: 48px;
    max-height: 48px;
  }

  [data-section="qs-sobre"] .orc-section__row:not(.orc-section__row--top) > .orc-section__main {
    padding: 20px 20px 32px;
  }

  .qs-sobre__text {
    padding: 0;
    font-size: 24px;
  }
  .qs-sobre__text .text-headline-4-alt {
    font-size: inherit;
  }

  /* ── QS MVV MOBILE ── */
  /* Fundo cinza fica só nos cards internos, não no container (evita vazar nos 20px laterais) */
  [data-section="qs-mvv"] .orc-section__row > .orc-section__main {
    padding: 0 20px 20px;
    background-color: transparent;
  }

  .qs-mvv__grid {
    flex-direction: column;
    border: 1px solid var(--color-neutral-borda);
  }
  .qs-mvv__left {
    display: flex;
    flex-direction: column;
  }
  .qs-mvv__cards-row {
    flex-direction: column;
  }
  .qs-mvv__right {
    width: 100%;
  }
  .qs-mvv__card {
    padding: 24px;
    background: var(--color-neutral-bg);
  }
  /* Figma mobile: Missão e Visão usam 16px; Valores e Propósito, 24px */
  .qs-mvv__cards-row .qs-mvv__card {
    padding: 16px;
  }
  .qs-mvv__card-header {
    margin-bottom: 16px;
    align-items: center;
  }
  .qs-mvv__card-header h3 {
    font-size: 18px;
  }
  .qs-mvv__card-diamond {
    margin-top: 0;
  }
  .qs-mvv__value-item p {
    font-weight: 600;
  }
  /* Figma mobile: divisória de 1px entre Missão, Visão e Valores (Propósito é o último, sem borda) */
  .qs-mvv__card--border-right,
  .qs-mvv__card--border-bottom {
    border-right: none;
    border-bottom: 1px solid var(--color-neutral-borda);
  }
  .qs-mvv__image {
    display: none;
  }
  .qs-mvv__values {
    gap: 16px;
  }

  /* ── QS TIMELINE MOBILE ── */
  /* Figma mobile: título alinhado à esquerda (no desktop fica centralizado) */
  .qs-timeline__title-inner {
    height: auto;
    padding: 20px;
    justify-content: flex-start;
  }
  .qs-timeline__title-inner h2 {
    font-size: 24px;
    text-align: left;
  }
  /* Figma mobile: sem os "feitos" (stats) nem a 2ª linha — só a esteira de datas */
  .qs-timeline__stats-line,
  .qs-timeline__stat-slot {
    display: none;
  }
  /* Linha única passando pelos diamantes (depois de remover o stat-slot) */
  .qs-timeline__line {
    top: 39px;
    left: -20px;
    right: -20px;
  }
  .qs-timeline-swiper {
    position: relative;
    overflow: hidden;
  }
  /* Fade branco à direita sinalizando que há mais conteúdo para rolar */
  .qs-timeline-swiper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56px;
    background: linear-gradient(to left, var(--color-white) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 2;
  }
  .qs-timeline-swiper .qs-timeline__items {
    display: flex;
    gap: 0;
  }
  .qs-timeline-swiper .qs-timeline__items .swiper-slide {
    width: 130px;
    flex-shrink: 0;
  }
  .qs-timeline__content {
    padding: 20px;
  }
  .qs-timeline-swiper .swiper-wrapper {
    align-items: stretch !important;
  }
  .qs-timeline-swiper .swiper-slide {
    height: auto !important;
  }
  /* Figma mobile: gap interno do item = 12px (data → diamante → descrição) */
  .qs-timeline__item {
    gap: 12px;
  }
  .qs-timeline__item-content {
    min-height: auto;
    gap: 24px;
  }
  .qs-timeline__partner-logo {
    margin-top: auto;
  }
  .qs-timeline__item .text-headline-2 {
    margin-top: 0;
    font-size: 18px;
    font-weight: 600;
  }
  .qs-timeline__item .text-paragraph-3 {
    font-size: 14px;
    line-height: 1.4;
  }
  /* Figma mobile: sem controles (dots + setas) — navegação por swipe/scroll */
  .qs-timeline__controls {
    display: none;
  }

  /* ── GALERIA MOBILE ── */
  [data-page="quem-somos"] .galeria {
    padding: 0;
  }

  [data-section="galeria"].galeria--cols > .galeria__main {
    padding-bottom: 40px;
  }

  [data-section="galeria"].galeria--cols .galeria__title {
    padding: 24px 0 0 20px;
    font-size: 24px;
  }

  .galeria {
    padding: 64px 0;
  }
  .galeria__title {
    padding-left: 20px;
    margin-bottom: 24px;
    font-size: 24px;
  }
  .galeria__tabs {
    padding: 0 20px;
  }
  .galeria__content {
    padding: 32px 20px 0;
  }
  .galeria__tabs ~ .galeria__content {
    padding: 32px 20px 0;
  }
  .galeria-swiper {
    overflow: hidden;
  }
  .galeria-swiper .galeria__grid {
    display: flex;
    gap: 0;
    padding: 0;
  }
  .galeria-swiper .galeria__grid .swiper-slide {
    width: 264px;
    flex-shrink: 0;
  }
  .galeria__controls {
    padding: 24px 0 0;
  }
  .galeria__nav {
    display: none;
  }
  .galeria-pagination {
    display: none !important;
  }
  .galeria-pagination-desktop {
    display: none;
  }

  /* ── QS PARCERIAS MOBILE ── */
  .qs-parcerias__title-bar {
    height: auto;
    padding: 20px;
    border-top: none;
  }
  .qs-parcerias__title-bar h2 {
    font-size: 24px;
  }
  .qs-parcerias__grid {
    flex-direction: column;
  }
  /* Figma mobile: a faixa do carrossel é uma caixa fechada (borda em cima E embaixo) */
  .qs-parcerias-swiper {
    border-bottom: var(--border-width) solid var(--color-neutral-borda);
  }
  .qs-parcerias-swiper .swiper-wrapper {
    align-items: stretch !important;
  }
  .qs-parcerias-swiper .swiper-slide {
    height: auto !important;
    width: calc(100% - 40px);
    flex-shrink: 0;
  }
  .qs-parcerias__card {
    height: 100%;
  }
  .qs-parcerias__card-image {
    height: 160px;
  }
  .qs-parcerias__card-content {
    padding: 24px 24px 16px;
  }
  /* Figma mobile: título 2 linhas e parágrafo 7 linhas, truncados com "…" */
  .qs-parcerias__card-content h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .qs-parcerias__card-content p {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Figma mobile: só dots, centralizados (sem setas) */
  .qs-parcerias__controls {
    justify-content: center;
    padding: 24px 20px;
  }
  /* O wrapper de dots ocupa 100% (Swiper), então centraliza os bullets aqui */
  .qs-parcerias__dots {
    justify-content: center;
  }
  .qs-parcerias__nav {
    display: none;
  }

  /* ── PD HERO (mobile) ── */
  .pd-hero {
    padding-top: 64px;
  }
  .pd-hero__image {
    height: 100%;
  }
  /* Produtos + Assistência Técnica: hero mobile na proporção natural
       da imagem do Figma (hero-bg-mobile = 375×696), sem zoom/corte do 100vh */
  [data-page="produtos"] .pd-hero,
  [data-page="assistencia-tecnica"] .pd-hero {
    height: auto;
    aspect-ratio: 375 / 696;
    padding-top: 0;
  }
  [data-page="produtos"] .pd-hero__image,
  [data-page="assistencia-tecnica"] .pd-hero__image {
    position: absolute;
    inset: 0;
    height: 100%;
  }
  /* Linha vertical da hero (::before) desativada no mobile — cortava a imagem
       e o conteúdo. Desktop não tem este ::before, então fica intacto.
       Para reativar, descomente o bloco abaixo.
    [data-page="produtos"] .pd-hero::before,
    [data-page="assistencia-tecnica"] .pd-hero::before {
        content: "";
        position: absolute;
        left: 10px;
        top: 0;
        bottom: 0;
        width: 2px;
        background-color: var(--color-neutral-borda);
        z-index: 3;
        pointer-events: none;
    }
    */

  /* Wires horizontais (energy-line--h) no rodapé da imagem da hero —
       ocultos no mobile; no desktop continuam visíveis (regra base intacta). */
  [data-page="quem-somos"] .qs-hero__image-bottom-wire,
  [data-page="produtos"] .pd-hero__image-bottom-wire,
  [data-page="assistencia-tecnica"] .pd-hero__image-bottom-wire {
    display: none;
  }
  .pd-hero__boxes {
    position: absolute;
    bottom: 20px;
    left: 10px;
    right: 10px;
    width: auto;
  }
  .pd-hero__boxes-inner {
    flex-direction: column;
  }
  .pd-hero__box {
    padding: 20px;
  }
  .pd-hero__box--left {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .pd-hero__box--left .pd-hero__subtitle {
    font-size: 16px;
  }
  .pd-hero__box--left h1 {
    font-size: 32px;
    line-height: 1.2;
  }
  /* Produtos + Assistência Técnica: hero mobile com boxes brancos
       e texto laranja, descrição escura (Figma) */
  [data-page="produtos"] .pd-hero__box--left,
  [data-page="produtos"] .pd-hero__box--right,
  [data-page="assistencia-tecnica"] .pd-hero__box--left,
  [data-page="assistencia-tecnica"] .pd-hero__box--right {
    /* background-color: var(--color-white); */
  }
  [data-page="produtos"] .pd-hero__box--left .pd-hero__subtitle,
  [data-page="assistencia-tecnica"] .pd-hero__box--left .pd-hero__subtitle {
    /* color: rgba(227, 93, 42, 0.6); */
    opacity: 1;
  }
  [data-page="produtos"] .pd-hero__box--left h1,
  [data-page="assistencia-tecnica"] .pd-hero__box--left h1 {
    /* color: var(--color-primary-pure); */
  }
  .pd-hero__box--right p {
    font-size: 16px;
    color: var(--color-neutral-100);
  }

  /* Linha vertical global (mobile) — atravessa produtos + referências,
       para antes da CTA (wrapper envolve só produtos-content) */
  [data-page="produtos"] .decorative-line-wrapper__line {
    display: none;
    left: 10px;
    transform: none;
    width: 2px;
    top: 0;
    bottom: 0;
    z-index: 20;
    clip-path: none;
    background-color: var(--color-neutral-borda);
    pointer-events: none;
  }
  [data-page="produtos"] .decorative-line-wrapper__line::after {
    display: none;
  }

  /* Linha vertical global (mobile) — Assistência Técnica
       (mesmo comportamento da página Produtos; envolve só at-content) */
  [data-page="assistencia-tecnica"] .decorative-line-wrapper__line {
    display: none;
    left: 10px;
    transform: none;
    width: 2px;
    top: 0;
    bottom: 0;
    z-index: 20;
    clip-path: none;
    background-color: var(--color-neutral-borda);
    pointer-events: none;
  }
  [data-page="assistencia-tecnica"] .decorative-line-wrapper__line::after {
    display: none;
  }

  /* ── PD PRODUCT (mobile) ── */
  .pd-product {
    padding-top: 64px;
  }
  .pd-product__corner-block,
  .pd-product__corner-spacer,
  .pd-product__header-gutter,
  .pd-product__body-gutter {
    display: none;
  }
  .pd-product--last {
    padding-bottom: 48px;
  }
  .pd-product > .pd-product__header {
    grid-column: 1 / -1;
    grid-row: auto;
    border-top: none;
  }
  .pd-product__header {
    flex-direction: column;
    border-top: none;
    border-bottom: none;
  }
  .pd-product__header-left {
    width: 100%;
    flex: 0 0 auto;
    align-items: stretch;
  }
  .pd-product__title-bar {
    width: 100%;
    flex: 0 0 auto;
    padding: 20px;
  }
  .pd-product__title-bar h2 {
    font-size: 24px;
    line-height: 1.2;
  }
  .pd-product__header-right {
    width: 100%;
    flex: 0 0 auto;
    background-color: var(--color-white);
  }
  .pd-product__desc-bar {
    width: 100%;
    padding: 20px;
  }
  .pd-product__header-right p {
    width: 100%;
    font-size: 14px;
    color: var(--color-neutral-100);
  }
  .pd-product > .pd-product__body {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    border-top: none;
    border-bottom: 1px solid var(--color-neutral-borda);
  }
  .pd-product__body .pd-product__image {
    grid-column: auto;
    width: 100%;
    height: 232px;
  }
  .pd-product__body .pd-product__content {
    grid-column: auto;
    width: 100%;
  }
  .pd-product__body .pd-product__content-inner {
    width: 100%;
    padding: 20px;
  }
  .pd-product__inner {
    display: flex;
    flex-direction: column;
    border-bottom: none;
  }
  .pd-product__desc {
    order: 1;
    padding: 20px;
    border-left: none;
    border-bottom: none;
  }
  .pd-product__image {
    order: 2;
    height: 232px;
  }
  .pd-product__content {
    order: 3;
    padding: 20px;
    gap: 32px;
    border-left: none;
  }
  .pd-product__benefits-label {
    font-size: 16px;
  }
  .pd-product__benefit {
    gap: 16px;
  }
  .pd-product__benefit-text p {
    font-size: 16px;
  }
  .pd-product__cta {
    align-self: stretch;
    text-align: center;
    justify-content: center;
  }

  /* Galeria na página de produtos (mobile) */
  [data-page="produtos"] .galeria {
    padding: 64px 0 0;
  }
  [data-page="produtos"] .galeria__title {
    padding: 0 0 0 20px !important;
    position: relative;
  }
  /* Conector decorativo no título (mobile): linha horizontal + losango
       ligando o título à linha vertical global (x=10) */
  [data-page="produtos"] .galeria__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 10px;
    height: 1px;
    transform: translateY(-50%);
    background-color: var(--color-neutral-borda);
    pointer-events: none;
  }
  [data-page="produtos"] .galeria__title::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 0.6em;
    width: 7px;
    height: 7px;
    transform: translateY(-50%) rotate(45deg);
    background-color: var(--color-neutral-borda);
    pointer-events: none;
  }
  [data-page="produtos"] .galeria__content {
    padding-top: 32px;
  }

  /* ── PD REFS (mobile — carousel) ── */
  .pd-refs {
    padding: 48px 0 32px;
  }
  .pd-refs__title {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 24px;
  }
  .pd-refs__grid {
    display: flex;
  }
  .pd-refs-swiper .swiper-slide {
    width: 264px;
    flex-shrink: 0;
  }
  .pd-refs-pagination {
    display: flex !important;
    position: static !important;
    justify-content: flex-start;
    gap: 6px;
    padding: 24px 0 0 20px;
  }
  .pd-refs-pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    border-radius: 8px;
    background-color: var(--color-neutral-40);
    opacity: 1;
    transition:
      width 0.3s ease,
      background-color 0.3s ease;
    margin: 0 !important;
  }
  .pd-refs-pagination .swiper-pagination-bullet-active {
    width: 24px;
    background-color: var(--color-primary-pure);
  }
  .pd-refs__controls {
    padding: 16px 20px 0;
  }
  .pd-refs__nav {
    display: none;
  }

  /* ── FAQ (mobile) ── */
  /* padding-top vem de var(--header-height) — barra encosta no menu (flush) */
  .faq-hero__title-bar {
    padding: 0;
    /* No Figma mobile a barra laranja não tem bordas (nem topo nem base) */
    border-top: none;
    border-bottom: none;
  }
  .faq-hero__title-inner {
    height: auto;
    padding: 20px;
    border-left: none;
    border-right: none;
  }
  .faq-hero__title-inner h1 {
    font-size: 24px;
  }
  /* Linha vertical decorativa — visível só quando recebe largura+fundo.
       Espelha o padrão de quem-somos/produtos (vetor-vertical-page-left, x=10). */
  [data-page="faq"] .decorative-line-wrapper__line {
    display: none;
    top: 104px; /* nasce no topo da barra laranja */
    bottom: 0; /* termina antes da CTA (fora do wrapper) */
    left: 10px;
    transform: none;
    width: 2px;
    z-index: 90;
    clip-path: none;
    background-color: var(--color-neutral-borda);
    pointer-events: none;
  }
  [data-page="faq"] .decorative-line-wrapper__line::after {
    display: none;
  }
  /* O gutter (bloco cinza de 184px) não existe no mobile do Figma */
  .faq-content__gutter {
    display: none;
  }
  .faq-content {
    padding: 0;
  }
  .faq-content__intro br:not(.faq-br-keep) {
    display: none;
  }
  .faq-content__grid {
    flex-direction: column;
    gap: 0;
    padding-top: 32px;
    /* Sem as barras verticais a 20px de cada lado — Figma só tem a linha em x=10 */
    border-left: none;
    border-right: none;
  }
  .faq-content__intro {
    padding: 0 0 32px;
    gap: 24px;
  }
  .faq-content__accordion {
    width: 100%;
    padding: 0 0 32px;
  }
  .faq-item__header span {
    font-size: 16px;
  }
  .faq-item__header {
    padding: 12px 16px;
  }

  /* ── BLOG (mobile) ── */
  /* padding-top vem de var(--header-height) — barra encosta no menu (flush) */
  .blog-hero__title-bar {
    border: none;
  }
  .blog-hero__title-inner {
    padding: 20px;
    border-left: none;
    border-right: none;
  }
  .blog-hero__title-inner h1 {
    font-size: 24px;
  }
  .blog-hero__subtitle {
    font-size: 16px;
    line-height: 1.7;
    max-width: 100%;
  }
  [data-page="blog"] .decorative-line-wrapper__line {
    display: none;
    top: 104px;
    left: 10px;
    transform: none;
    width: 1px;
    background-color: var(--color-neutral-borda);
  }
  .blog-content {
    padding: 0 0 32px;
  }
  .blog-content__row {
    display: block;
    border-bottom: none;
  }
  .blog-content__gutter {
    display: none;
  }
  .blog-content__main {
    border-left: none;
    border-right: none;
  }
  .blog-content__row--tabs .blog-content__main {
    padding-top: 0;
  }
  .blog-content__row--pagination .blog-content__main {
    padding-bottom: 0;
  }
  .blog-content__row--pagination {
    border-bottom: none;
  }
  .blog-content__main--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 0 20px;
    margin-top: 16px;
  }
  .blog-card {
    border: 1px solid var(--color-neutral-borda);
  }
  .blog-content__row--tabs + .blog-content__row--cards .blog-content__main--grid {
    margin-top: 0;
    padding-top: 32px;
  }
  .blog-content__tabs-wrapper {
    padding: 40px 20px 0;
    border-bottom-width: 1px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .blog-content__tabs-wrapper::-webkit-scrollbar {
    display: none;
  }
  .blog-content__tabs {
    display: flex;
    width: max-content;
    min-width: 100%;
    padding: 0;
  }
  .blog-content__tab {
    flex-shrink: 0;
    padding: 16px;
  }
  .blog-card__image {
    height: 180px;
  }
  .blog-card__body {
    padding: 16px 16px 8px;
  }
  .blog-pagination {
    padding: 16px 20px 0;
    border-top: none;
  }
}

/* ── 767px: Mobile single column ── */
@media (max-width: 767px) {
  .blog-content__main--grid {
    grid-template-columns: 1fr;
  }
  .intro__image-wrapper {
    height: 240px;
  }
}

/* ── ORC (orçamento) — 1180px mobile ── */
@media (max-width: 1180px) {
  /* Hero orçamento */
  .orc-hero {
    padding-top: 64px;
  }
  /* padding-top vem de var(--header-height) — faixa do título encosta no menu (flush) */
  /* Linha vertical decorativa — começa junto com a faixa laranja
       e vai até antes do CTA.
       Mesmo estilo das outras páginas (home/produtos): 2px, neutral-borda */
  [data-page="orcamento"] .decorative-line-wrapper__line {
    display: none;
    left: 10px;
    width: 2px;
    top: 104px;
    bottom: 0;
    z-index: 20;
    clip-path: none;
    background-color: var(--color-neutral-borda);
    pointer-events: none;
  }
  [data-section="orc-hero"].orc-hero .orc-section__main {
    margin: 0;
    border: none;
  }
  /* Título alinhado à esquerda (orçamento), conforme Figma mobile */
  [data-section="orc-hero"] .orc-hero__title-inner {
    align-items: flex-start;
    text-align: left;
  }
  /* Divisórias finas e claras (1px #e7e7e7), sem borda dupla de linha+campo */
  [data-section="orc-hero"] .orc-form__row {
    border-bottom: none;
  }
  [data-section="orc-hero"] .orc-form__field {
    border-bottom: 1px solid var(--color-neutral-20);
    margin: 0 20px;
    padding: 16px 0;
  }
  [data-section="orc-hero"] .orc-section__row--last .orc-section__main {
    grid-column: auto;
  }
  [data-section="orc-hero"].orc-hero > .orc-section__row:first-child {
    border-top: none;
  }
  .orc-hero__title-inner {
    height: auto;
    padding: 20px;
  }
  .orc-hero__title-inner h1 {
    font-size: 24px;
    line-height: 1.2;
  }
  .orc-hero__title-inner p {
    font-size: 16px;
    line-height: 1.7;
  }
  [data-section="orc-hero"] .orc-hero__body {
    flex-direction: column;
    min-height: auto;
  }
  [data-section="orc-hero"] .orc-hero__image {
    width: 100%;
    height: 224px;
    border-right: none;
  }
  [data-section="orc-hero"] .orc-hero__form-wrapper {
    width: 100%;
  }
  .orc-hero__form-header {
    padding: 20px 20px 24px;
  }
  .orc-hero__form-header p {
    font-size: 24px;
  }
  .orc-form__row {
    flex-direction: column;
    height: auto;
    min-height: auto;
  }
  .orc-form__row--triple {
    flex-direction: column;
  }
  .orc-form__field {
    border-right: none;
    border-bottom: 2px solid var(--color-neutral-borda-sutil);
    padding: 16px 20px;
    min-height: 120px;
  }
  .orc-form__field:last-child {
    border-bottom: 2px solid var(--color-neutral-borda-sutil);
  }
  .orc-form__field--fixed {
    flex: auto;
    width: 100%;
  }
  .orc-form__row--message {
    min-height: 120px;
  }
  .orc-form__row--checkbox {
    padding: 16px 20px;
  }
  .orc-form__submit {
    padding: 20px;
  }
  .orc-form__btn {
    width: 100%;
    font-size: 20px;
  }

  /* Contato — overrides de fidelidade ao Figma mobile (não afeta orçamento) */
  .contato-form .orc-form__btn {
    width: auto;
  }
  .contato-form .orc-form__row {
    border-bottom: none;
  }
  .contato-form .orc-form__field {
    border-bottom: 1px solid var(--color-neutral-20);
    margin: 0 20px;
    padding: 16px 0;
  }
  .contato-hero .orc-hero__form-header {
    padding-top: 24px;
  }

  /* Dropdown mobile */
  .orc-form__dropdown-menu {
    left: -20px;
    right: -20px;
    max-height: 200px;
  }
  .orc-form__dropdown-item {
    padding: 12px 8px;
    min-height: 44px;
  }

  /* Touch states (hover não funciona em touch) */
  .orc-form__field:hover {
    background-color: transparent;
  }
  .orc-form__field:active {
    background-color: rgba(0, 0, 0, 0.02);
  }

  /* Contato hero — grid mobile */
  .contato-hero.orc-hero {
    display: block;
  }
  .contato-hero__row {
    display: block;
  }
  .contato-hero__gutter {
    display: none;
  }
  .contato-hero__main {
    border-left: none;
    border-right: none;
  }
  .contato-hero__row--title .orc-hero__title-inner {
    border-left: var(--border-width) solid var(--color-neutral-borda);
    border-right: var(--border-width) solid var(--color-neutral-borda);
  }
  .contato-hero__body {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }
  .contato-hero__body .orc-hero__image {
    grid-column: auto;
    width: 100%;
    height: 224px;
  }
  .contato-hero__body .orc-hero__form-wrapper {
    grid-column: auto;
    width: 100%;
    border-left: none;
  }
  .contato-hero__body-gutter {
    display: none;
  }

  /* Simulador botão mobile */
  .orc-simulador__btn {
    width: 100%;
    justify-content: center;
  }

  /* QS — bordas do grid orc-section só no desktop; removidas no mobile
       (cada seção vira caixa isolada com suas próprias divisórias). */
  [data-page="quem-somos"] .orc-section__row,
  [data-page="quem-somos"] .orc-section__main,
  [data-page="quem-somos"] .orc-section__main--spacer,
  [data-page="quem-somos"] .orc-section__gutter,
  [data-page="quem-somos"] .orc-section__gutter--right {
    border: none !important;
  }

  /* Orçamento — grid externo */
  .orc-section__row {
    display: block;
    border-bottom: none;
  }
  .orc-section__row--top,
  .orc-section__row--bottom {
    display: none;
  }
  .orc-section__gutter {
    display: none;
  }
  .orc-section__main {
    border-left: none;
    border-right: none;
  }
  .orc-section__row--last .orc-section__gutter,
  .orc-section__row--last .orc-section__gutter--right {
    border-bottom: none;
  }
  /* Restaura border-top das caixas (Figma: caixa completa no mobile).
       As regras de desktop removem o border-top para conectar à linha do grid;
       no mobile cada seção é uma caixa isolada e precisa do topo. Mesma
       especificidade das regras de sections.css → vencem por ordem de carga. */
  [data-section="orc-etapas"] .orc-section__row:not(.orc-section__row--top) > .orc-section__main,
  [data-section="orc-energia"] .orc-section__row:not(.orc-section__row--top) > .orc-section__main,
  [data-section="orc-garantias"] .orc-section__row:not(.orc-section__row--top) > .orc-section__main,
  [data-section="orc-invest"] .orc-section__row:not(.orc-section__row--top) > .orc-section__main {
    border-top: var(--border-width) solid var(--color-neutral-borda);
  }

  /* Etapas */
  .orc-etapas {
    padding: 0;
  }
  .orc-etapas .orc-section__main {
    margin: 64px 20px 0;
    border: var(--border-width) solid var(--color-neutral-borda);
  }
  .orc-etapas__header {
    height: auto;
    padding: 20px;
  }
  .orc-etapas__header h2 {
    font-size: 24px;
    line-height: 1.2;
  }
  .orc-etapas__desc {
    padding: 20px;
    max-width: 100%;
    background-color: transparent;
  }
  .orc-etapas__desc p {
    font-size: 16px;
    text-align: center;
  }
  .orc-etapas__step span {
    font-size: 14px;
  }
  .orc-etapas__timeline {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Energia */
  .orc-energia {
    padding: 0;
    background: none;
  }
  .orc-energia .orc-section__main {
    margin: 64px 20px 0;
    border: var(--border-width) solid var(--color-neutral-borda);
    overflow: hidden;
  }
  .orc-energia__header {
    height: auto;
    padding: 20px;
  }
  .orc-energia__header h2 {
    font-size: 24px;
    line-height: 1.2;
  }
  .orc-energia__content {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .orc-energia__image {
    position: relative;
    inset: auto;
  }
  .orc-energia__image img {
    height: auto;
    object-fit: contain;
  }
  .orc-energia__info {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    height: auto;
    border-left: none;
    padding-bottom: 0;
  }
  .orc-energia__info-inner {
    padding: 24px 20px 40px;
  }

  /* Garantias */
  .orc-garantias {
    padding: 0;
  }
  .orc-garantias .orc-section__main {
    margin: 64px 20px 0;
    border: var(--border-width) solid var(--color-neutral-borda);
    overflow: hidden;
  }
  .orc-garantias__inner {
    flex-direction: column;
  }
  .orc-garantias__left {
    width: 100%;
    display: contents;
    border-right: none;
  }
  .orc-garantias__right {
    display: contents;
  }
  .orc-garantias__header {
    order: 1;
    height: auto;
    padding: 20px;
    border-right: none;
  }
  .orc-garantias__header h2 {
    font-size: 24px;
    line-height: 1.2;
  }
  .orc-garantias__desc-bar {
    order: 2;
    min-height: auto;
    padding: 20px;
    border-bottom: var(--border-width) solid var(--color-neutral-borda);
    background: linear-gradient(to right, rgba(234, 233, 233, 0) 30%, rgba(234, 233, 233, 0.5) 51%, rgba(234, 233, 233, 0) 100%);
  }
  .orc-garantias__desc {
    font-size: 16px;
    line-height: 1.7;
    text-align: left;
  }
  .orc-garantias__image {
    order: 3;
    height: 275px;
  }
  .orc-garantias__items {
    order: 4;
    padding: 20px !important;
    gap: 24px;
  }
  .orc-garantias__item {
    gap: 16px;
  }
  .orc-garantias__item-icon {
    width: 32px;
    height: 32px;
  }
  .orc-garantias__item-content h3 {
    margin-bottom: 8px;
  }
  .orc-garantias__item-content p {
    font-size: 14px;
    line-height: 1.4;
  }

  /* Investimento */
  .orc-invest {
    padding: 0;
  }
  .orc-invest .orc-section__main {
    margin: 64px 20px 0;
    border: var(--border-width) solid var(--color-neutral-borda);
    overflow: hidden;
  }
  .orc-invest__top-desc {
    border-left: none;
  }
  .orc-invest__top {
    flex-direction: column;
  }
  .orc-invest__top-header {
    padding: 20px;
  }
  .orc-invest__top-header h2 {
    font-size: 24px;
    line-height: 1.2;
  }
  .orc-invest__top-desc {
    width: 100%;
    height: auto;
    padding: 20px;
    border-bottom: var(--border-width) solid var(--color-neutral-borda);
    background-color: transparent;
  }
  .orc-invest__top-desc p {
    font-size: 16px;
  }
  .orc-invest__columns {
    flex-direction: column;
  }
  .orc-invest__col {
    padding: 24px 20px;
    background: linear-gradient(to right, rgba(234, 233, 233, 0) 30%, rgba(234, 233, 233, 0.5) 51%, rgba(234, 233, 233, 0) 100%);
  }
  .orc-invest__col-header h3 {
    font-size: 18px;
  }
  .orc-invest__col p {
    font-size: 16px;
  }
  .orc-invest__col:first-child {
    border: none;
  }
  .orc-invest__banks {
    flex-direction: column;
  }
  .orc-invest__bank-card {
    flex: none;
    height: 80px;
    background-color: var(--color-white);
  }

  /* Simulador */
  .orc-simulador {
    padding: 0;
  }
  .orc-simulador .orc-section__main {
    margin: 64px 0 0;
    border: none;
    overflow: hidden;
  }
  .orc-simulador__main {
    flex-direction: column;
    min-height: auto;
  }
  .orc-simulador__image {
    border-right: none;
  }
  .orc-simulador__image {
    width: 100%;
    height: 224px;
  }
  .orc-simulador__content {
    width: 100%;
    padding-right: 0;
  }
  .orc-simulador__header {
    padding: 24px 20px 0;
    gap: 16px;
  }
  .orc-simulador__header h2 {
    font-size: 24px;
  }
  .orc-simulador__tabs {
    padding: 0;
  }
  .orc-simulador__tab {
    flex: 1;
    width: auto;
  }
  .orc-simulador__row {
    flex-direction: column;
    min-height: auto;
  }
  .orc-simulador__data {
    padding: 0 20px;
  }
  .orc-simulador__cell {
    min-height: 120px;
    padding: 16px;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, rgba(119, 109, 111, 0.5), transparent) 1;
  }
  .orc-simulador__cell--label {
    border-right: none;
  }
  .orc-simulador__cell:last-child {
    width: auto;
    flex: auto;
  }
  .orc-simulador__row:last-child .orc-simulador__cell:last-child {
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, rgba(119, 109, 111, 0.5), transparent) 1;
  }
  .orc-simulador__cta {
    padding: 20px;
  }
  .orc-simulador__btn {
    font-size: 20px;
  }

  /* Home — grid externo */
  [data-section="intro"] .orc-section__row:first-child .orc-section__main {
    margin: 0 20px;
    border: var(--border-width) solid var(--color-neutral-borda);
    padding: 64px 20px 0;
  }

  [data-section="intro"] .orc-section__row--last .orc-section__main {
    margin: 0;
    border: none;
    padding: 0;
    grid-column: auto;
  }

  [data-section="porque"] .orc-section__main,
  [data-section="produtos"] .orc-section__row:not(.orc-section__row--top):not(.orc-section__row--last) .orc-section__main {
    margin: 64px 20px 0;
    border: var(--border-width) solid var(--color-neutral-borda);
    overflow: hidden;
    grid-column: auto;
  }

  [data-section="produtos"] .orc-section__row--last .orc-section__main {
    margin: 0 20px;
    border: var(--border-width) solid var(--color-neutral-borda);
    border-top: none;
    padding: 32px 0 64px;
    overflow: hidden;
  }

  [data-section="numeros"] .orc-section__row:not(.orc-section__row--top):not(.orc-section__row--last) .orc-section__main {
    margin: 64px 20px 0;
    border: var(--border-width) solid var(--color-neutral-borda);
    overflow: hidden;
  }

  [data-section="numeros"] .orc-section__row--last .orc-section__main {
    margin: 0 20px;
    border: var(--border-width) solid var(--color-neutral-borda);
    border-top: none;
    grid-column: auto;
    overflow: hidden;
  }

  [data-section="depoimentos"] .orc-section__row:first-child .orc-section__main {
    margin: 64px 20px 0;
    border: var(--border-width) solid var(--color-neutral-borda);
    border-bottom: none;
  }

  [data-section="depoimentos"] .orc-section__row:not(:first-child):not(.orc-section__row--bottom) .orc-section__main {
    margin: 0 20px;
    border: var(--border-width) solid var(--color-neutral-borda);
    border-top: none;
    border-bottom: none;
  }

  [data-section="depoimentos"] .orc-section__row:not(.orc-section__row--bottom) .orc-section__gutter--right {
    display: none;
  }

  .intro {
    padding: 0;
  }

  .porque {
    padding: 0;
  }

  .porque__title-box {
    border-left: none;
    border-right: none;
  }

  .numeros {
    padding: 0;
  }

  .produtos {
    padding: 0;
  }

  .depoimentos {
    padding: 0;
  }
}

/* ── 1024px: Remove orc-section borders on mobile (home) ── */
@media (max-width: 1024px) {
  [data-section="intro"] .orc-section__row:first-child .orc-section__main,
  [data-section="intro"] .orc-section__row--last .orc-section__main,
  [data-section="porque"] .orc-section__main,
  [data-section="produtos"] .orc-section__row:not(.orc-section__row--top):not(.orc-section__row--last) .orc-section__main,
  [data-section="produtos"] .orc-section__row--last .orc-section__main,
  [data-section="numeros"] .orc-section__row:not(.orc-section__row--top):not(.orc-section__row--last) .orc-section__main,
  [data-section="numeros"] .orc-section__row--last .orc-section__main,
  [data-section="depoimentos"] .orc-section__row:first-child .orc-section__main,
  [data-section="depoimentos"] .orc-section__row:not(:first-child):not(.orc-section__row--bottom) .orc-section__main {
    border: none;
    margin-left: 0;
    margin-right: 0;
  }

  .porque__title-box {
    border-left: none;
    border-right: none;
  }
}

/* ── 540px: Small mobile font scaling ── */
@media (max-width: 540px) {
  html {
    font-size: calc(var(--font-base) - 12%);
  }
}

/* ── 340px: Very small screens ── */
@media (max-width: 340px) {
  html {
    font-size: calc(var(--font-base) - 30%);
  }
}

/* =============================================
   MOBILE — esconde os losangos (energy-node) em hosts específicos
   (≤1024px = breakpoint mobile do tema, .mobile-only/.desktop-only)
   ============================================= */
@media (max-width: 1024px) {
  /* Home */
  .intro .energy-node,
  .porque__title-box .energy-node,
  .numeros__stat--highlighted .energy-node,
  .produtos__header .energy-node,
  .depoimentos__header .energy-node,
  /* Quem Somos */
  .qs-hero__title-inner .energy-node,
  .qs-mvv__grid .energy-node,
  .qs-timeline__title-inner .energy-node,
  .qs-parcerias__title-bar .energy-node,
  /* Fale Conosco */
  .contato-hero__title-inner .energy-node,
  /* FAQ */
  .faq-hero__title-inner .energy-node,
  /* News / Blog */
  .blog-hero__title-inner .energy-node,
  .blog-content__main--grid .energy-node,
  /* Produtos / Assistência Técnica */
  .pd-hero__boxes-inner .energy-node,
  .pd-product__header .energy-node,
  /* Orçamento — todos os energy-node dentro de orc-section__main */
  [data-page="orcamento"] .orc-section__main .energy-node {
    display: none;
  }
}