/* ============================================================
   ARX Cyber — Adaptação mobile / tablet
   Carregado por ÚLTIMO em todas as páginas. Tudo dentro de media
   queries: o layout desktop (1:1 com o Figma) segue intocado.
   Breakpoints: 1279 (laptop) · 1023 (tablet) · 767 (celular) · 479 (compacto)
   ============================================================ */

/* ======================= LAPTOP / TABLET (≤1279) ======================= */
@media (max-width: 1279px) {
  .arx-container { padding-inline: 24px; }

  /* seções que eram desenhadas em prancheta de 1920 nunca podem gerar scroll lateral */
  .arx-section { overflow-x: clip; }
}

/* ======================= HEADER + MENU MOBILE (≤1023) ======================= */
/* Enquanto o container não chega nos 1440 cheios (janela < 1488), a coluna dos
   módulos fica estreita demais e os seis anéis se encostam — a 1200px sobram
   2px de linha visível entre eles. Em vez de encolher os anéis, o intro sobe e
   a fileira recebe a largura inteira: o circuito horizontal continua legível e
   o vão entre anéis fica maior do que no próprio desktop. */
@media (min-width: 1025px) and (max-width: 1487px) {
  .cvh__grid { grid-template-columns: 1fr; gap: 38px; }
  .cvh__intro { padding-right: 0; }
  .cvh__lead { max-width: 560px; }
  .cvh__grid::before { display: none; }
}

@media (max-width: 1024px) {
  .arx-header__inner { padding-block: 18px; }
  .arx-logo { position: relative; z-index: 60; width: 208px; }
  @media (max-width: 380px) { .arx-logo { width: 176px; } }
  .arx-logo img { width: 100%; }

  /* botão hambúrguer */
  .arx-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; margin-left: auto;
    border-radius: 8px; border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.04); cursor: pointer; z-index: 60;
  }
  .arx-burger span {
    display: block; height: 2px; width: 100%; background: var(--arx-white);
    border-radius: 2px; transition: transform .3s var(--arx-ease), opacity .2s linear;
  }
  body.arx-menu-open .arx-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.arx-menu-open .arx-burger span:nth-child(2) { opacity: 0; }
  body.arx-menu-open .arx-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* painel que desce logo abaixo do header */
  /* O painel sai do container e usa a janela inteira: as margens do
     .arx-container o parariam a 24px de cada borda. Só o __inner vira
     static — o .arx-header continua absolute como no desktop, senão ele
     entra no fluxo, empurra o hero 80px para baixo e abre uma faixa chapada
     acima da foto. */
  .arx-header__inner { position: static; }
  /* O painel é a continuação do header, não um cartão solto em cima da
     página: encosta nas duas bordas, começa exatamente onde o header acaba
     e não tem canto arredondado nem sombra de flutuação. O filete de cima é
     o que separa um do outro. */
  .arx-header__right {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 55;
    display: block; padding: 6px 24px 24px;
    max-height: calc(100vh - var(--arx-header-h));
    overflow-y: auto; overscroll-behavior: contain;
    background: #0d0e10; border-top: 1px solid rgba(255,255,255,.10);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .28s var(--arx-ease), transform .28s var(--arx-ease),
                visibility 0s linear .28s;
  }
  body.arx-menu-open .arx-header__right {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
  }
  .arx-menu-backdrop {
    position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.55);
    opacity: 0; pointer-events: none; transition: opacity .3s linear;
  }
  body.arx-menu-open .arx-menu-backdrop { opacity: 1; pointer-events: auto; }
  body.arx-menu-open { overflow: hidden; }

  .arx-nav { position: static; display: block; transform: none; margin-top: 0; }
  .arx-nav__list { position: static; transform: none; display: block; }
  .arx-nav__item { display: block; border-bottom: 1px solid rgba(255,255,255,.08); }
  .arx-nav__link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 2px; font-size: 19px;
  }
  .arx-nav__chev { transition: transform .3s var(--arx-ease); }
  .arx-nav__item--mm.is-open .arx-nav__chev { transform: rotate(180deg); }
  .arx-header__cta { display: block; margin-top: 28px; }
  .arx-header__cta .arx-btn { width: 100%; }

  /* ---------- MEGAMENU COMPLETO NO MOBILE ----------
     Nada é escondido por ser "megamenu": as colunas do desktop viram
     linhas (ícone + título + descrição + link), dentro do acordeão do item. */
  .arx-megamenu,
  .arx-megamenu--civitas,
  .arx-megamenu--insights {
    position: static; display: none; width: auto; min-width: 0; max-width: none;
    left: auto; right: auto; top: auto; margin: 0;
    transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: none;
    background: none; border: 0; border-radius: 0; padding: 2px 0 16px; box-shadow: none;
    grid-template-columns: 1fr; gap: 0;
  }
  .arx-nav__item--mm.is-open .arx-megamenu,
  .arx-nav__item--mm.is-open .arx-megamenu--civitas,
  .arx-nav__item--mm.is-open .arx-megamenu--insights {
    display: block; transform: none; transition: none;
  }

  .arx-mm__intro .arx-eyebrow { display: block; font-size: 13px; letter-spacing: .8px; }

  .arx-mm__more {
    grid-column: 2; display: inline-flex; align-items: center; gap: 5px;
    margin-top: 8px; font-size: 13px; color: var(--mm, #1574ff);
  }

  /* Missões e Civitas: a lista simples já é uma pilha — no mobile ela só
     perde a segunda coluna e o destaque vira o último item. */
  .arx-megamenu--simples { display: block; padding: 0; }
  .arx-mms__lista { display: block; }
  .arx-mms__rot { margin-bottom: 8px; padding-bottom: 8px; }
  .arx-mms__item { max-width: none; padding: 11px 10px; }

  /* Menu 3 — insights: colunas empilhadas */
  .arx-in__col { display: block; padding: 0; border: 0; background: none; }
  .arx-in__col + .arx-in__col {
    margin-top: 16px; padding: 16px 0 0; border: 0;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .arx-in__h {
    display: block; margin-bottom: 6px;
    font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--mm, #1574ff);
  }
  .arx-in__item {
    display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; align-items: center;
    padding: 9px 0;
  }
  .arx-in__ico { display: block; width: 24px; height: 24px; }
  .arx-in__item b {
    display: block; padding: 0; border: 0;
    font-size: 15px; line-height: 20px; font-weight: var(--fw-regular); color: var(--arx-white);
  }
  .arx-in__item span { display: block; font-size: 12px; line-height: 16px; color: var(--arx-grey-70); }
  .arx-in__feat {
    display: block; margin-top: 10px; padding: 14px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03);
  }
  .arx-in__feat-title { margin-top: 6px; font-size: 15px; line-height: 20px; }
  .arx-in__feat-desc { margin-top: 6px; font-size: 12px; line-height: 17px; color: var(--arx-grey-70); }
  .arx-mm__footlink { display: inline-block; margin-top: 10px; font-size: 13px; }

  /* rodapé do megamenu */
  .arx-mm__foot {
    display: block; margin-top: 16px; padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .arx-mm__foot p { margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--arx-grey-70); }
  .arx-mm__footico { display: block; width: 28px; height: 28px; object-fit: contain; }
}
@media (min-width: 1025px) { .arx-burger, .arx-menu-backdrop { display: none; } }

/* ======================= CELULAR (≤767) ======================= */
@media (max-width: 1024px) {
  :root { --arx-gutter: 20px; }
  .arx-container { padding-inline: 20px; }
  body { font-size: 16px; }

  .arx-eyebrow { font-size: 15px; letter-spacing: .5px; }
  .cv-h2, .arx-section-title { font-size: 27px; line-height: 33px; }
  .cv-lead { font-size: 16px; line-height: 21px; }
  .cv-head .cv-lead { max-width: 100%; }
  .arx-btn { padding: 13px 18px; }

  /* ---------- HOME ---------- */
  /* Missões: a jornada horizontal vira coluna, com a trilha ligando de cima
     para baixo em vez de lado a lado */
  .mj { margin-top: 38px; }
  .mj__cards { grid-template-columns: 1fr; gap: 30px; }
  .mj-card { padding: 26px 22px 24px; }
  .mj-card:not(:first-child)::before {
    left: 50%; top: -31px; width: 1px; height: 30px; transform: translateX(-50%);
  }
  .mj-card:not(:first-child)::after { left: 50%; top: -16px; }
  .mj-card__ico { width: 60px; height: 60px; }
  .mj-card__titulo { margin-top: 22px; font-size: 20px; line-height: 26px; }
  .mj-card__desc { margin-top: 12px; }
  .mj-card__seta { margin-top: 20px; }
  .arx-missao__sub { margin-top: 16px; font-size: 16px; line-height: 22px; }
  .mj__fecho { margin-top: 36px; }
  .mj__fecho p { flex-direction: column; gap: 12px; font-size: 16px; text-align: center; }
  .mj__fecho p::before, .mj__fecho p::after { display: none; }

  .arx-hero { min-height: 0; padding-bottom: 8px; }
  .arx-hero__content { max-width: 100%; padding-top: 128px; gap: 18px; }
  .arx-hero__title { font-size: 34px; line-height: 40px; }
  .arx-hero__lead p { font-size: 16px; line-height: 22px; }
  .arx-hero__lead p + p { margin-top: 12px; }
  .arx-hero__cta { flex-wrap: wrap; gap: 12px; }
  .arx-hero__cta .arx-btn { flex: 1 1 100%; }
  .arx-hero__clients { padding: 30px 0 30px; }
  .arx-marquee { max-width: 100% !important; }
  .arx-marquee__track { gap: 40px; }
  .arx-marquee__item { width: 104px; height: 44px; }
  .arx-marquee__track img { max-width: 88px; max-height: 32px; }

  .arx-missao { padding-block: 60px; }

  /* Civitas na home: painel em coluna única e módulos em duas colunas */
  .cvh { margin-top: 48px; padding: 34px 22px 0; border-radius: 16px; }
  .cvh__grid { grid-template-columns: 1fr; gap: 34px; }
  .cvh__intro { padding-right: 0; }
  .cvh__title { margin-top: 12px; font-size: 27px; line-height: 34px; max-width: 100%; }
  .cvh__lead { margin-top: 16px; max-width: 100%; font-size: 15px; line-height: 22px; }
  .cvh__btn { margin-top: 22px; width: 100%; }
  .cvh__grid { --cvh-esq: 0px; }
  .cvh__modulos {
    padding-left: 0; max-width: none; flex-wrap: wrap; justify-content: flex-start;
    row-gap: 28px; column-gap: 0;
  }
  /* sem fileira horizontal não há circuito: some com trilho, trechos e nós */
  .cvh__grid::before, .cvh-mod:first-child::before,
  .cvh-mod + .cvh-mod::before, .cvh-mod + .cvh-mod::after { display: none; }
  .cvh-mod { width: 50%; }
  .cvh__modulos { --cvh-anel: 68px; }
  .cvh-mod__anel { margin-bottom: 12px; }
  .cvh-mod__anel::after { inset: -6px; }
  .cvh-mod__ico { width: 42px; height: 42px; }
  .cvh-mod__nome { font-size: 12px; }
  .cvh-mod__desc { font-size: 11.5px; line-height: 16px; padding-inline: 6px; }
  /* com os módulos em duas colunas o 1º ícone sai dos 7,5%: o Core encosta na borda */
  /* seções novas das missões: as grades viram uma coluna */
  /* empilhados, 20px colava um card no outro: o vão precisa ler como separação */
  .mo-dia__linha, .mo-como__grid { grid-template-columns: 1fr; gap: 26px; }
  .mo-dia, .mo-imp, .mo-como { padding-block: 64px; }
  .mo-dia__linha, .mo-imp__grid { margin-top: 44px; }
  .mo-como__grid { margin-top: 48px; }
  .mo-dia__passo + .mo-dia__passo .mo-dia__arte::before { display: none; }
  .mo-imp__grid { grid-template-columns: 1fr; gap: 26px; }
  .mo-imp__cards { grid-template-columns: repeat(2, 1fr); }
  .mo-como__grid { --selo: 240px; }
  .mo-como__etapa + .mo-como__etapa::before,
  .mo-como__etapa + .mo-como__etapa::after { display: none; }
  .mo-como__etapa { grid-template-rows: auto var(--selo) auto; }
  .mo-como__etapa[data-lado="baixo"] .mo-como__texto { grid-row: 1; align-self: end; padding: 0 0 22px; }
  .mo-dia__h2, .mo-imp__h2, .mo-como__h2 { font-size: 27px; line-height: 34px; }
  .mo-dia__remate { flex-direction: column; gap: 12px; }
  .mo-hero__title { font-size: 34px; line-height: 40px; }
  .mo-hero__inner { padding: calc(var(--arx-header-h) - 40px) 0 40px; }

  /* hero do Civitas: copy acima, painel abaixo e reduzido */
  .cv-hero, .cv-hero__grid { min-height: 0; }
  /* padding-block, e não o atalho: `padding: X 0 Y` zerava o recuo lateral
     que vem do .arx-container e jogava o conteúdo na borda da tela */
  .cv-hero__grid { grid-template-columns: 1fr; gap: 34px; padding-block: calc(var(--arx-header-h) - 46px) 48px; }
  .cv-hero__title { font-size: 30px; line-height: 38px; }
  .cvp__corpo { grid-template-columns: 1fr 1fr; }
  .cvp__doms { grid-template-columns: repeat(3, 1fr); }
  .cvp-alerta { grid-template-columns: 1fr auto; row-gap: 4px; }
  .cvp-alerta__alvo { display: none; }

  .cvh__core { margin-top: 26px; gap: 13px; }   /* sem calha: a marca lidera */
  .cvh__core-marca { width: 30px; height: 30px; }
  .cvh__core-desc { font-size: 14.5px; line-height: 21px; }

  /* Escala da confiança: seis indicadores viram duas colunas */
  .esc { margin-top: 56px; padding: 38px 22px 42px; border-radius: 18px; }
  .esc__title { margin-top: 14px; font-size: 27px; line-height: 34px; }
  .esc__sub { font-size: 15px; line-height: 22px; }
  .esc__sub br { display: none; }
  .esc__grid { margin-top: 34px; grid-template-columns: repeat(2, 1fr); gap: 34px 0; }
  .esc-item { padding: 0 10px; }
  .esc-item + .esc-item::before { display: none; }
  .esc-item:nth-child(even)::before {
    content: ""; display: block; position: absolute; left: 0; top: 10px; bottom: 10px;
    width: 1px; background: linear-gradient(180deg, transparent, rgba(21,116,255,.28) 25%,
                                            rgba(21,116,255,.28) 75%, transparent);
  }
  .esc-item__anel { width: 66px; height: 66px; }
  .esc-item__anel::after { inset: -7px; }
  .esc-item__ico { width: 42px; height: 42px; }
  .esc-item__num { margin-top: 16px; font-size: 32px; line-height: 38px; }
  .esc-item__rot { margin-top: 8px; font-size: 11.5px; line-height: 15px; }
  .esc-item__desc { margin-top: 9px; font-size: 12.5px; line-height: 18px; }

  /* Depoimentos: um card por vez, navegando pelo dedo */
  .arx-dep { padding-block: 60px; }
  .dep__title { margin-top: 12px; font-size: 27px; line-height: 34px; }
  .dep__sub { margin-top: 12px; font-size: 15px; line-height: 22px; }
  .dep__palco { margin-top: 30px; }
  .dep__viewport { margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; }
  .dep__track { gap: 14px; }
  .dep-card { flex: 0 0 calc(100% - 26px); padding: 26px 22px 24px; }
  .dep-card__texto { font-size: 15px; line-height: 23px; }
  .dep__controles { margin-top: 30px; gap: 18px; }
  .dep__ponto { width: 15px; height: 15px; }

  .arx-cards { grid-template-columns: 1fr; gap: 16px; }
  .arx-card-svc { min-height: 0; padding: 22px; }
  .arx-card-svc__icon { margin-bottom: 22px; }
  .arx-card-svc__link { margin-top: 20px; }
  .arx-platform { padding: 28px 22px; min-height: 0; margin-top: 48px; }
  .arx-platform__title { font-size: 26px; line-height: 32px; max-width: 100%; }
  .arx-nist { flex-wrap: wrap; gap: 20px 12px; justify-content: flex-start; }
  .arx-nist::before { display: none; }
  .arx-nist-col { padding-left: 0; margin-top: 30px; }
  .arx-nist-col::before { display: none; }
  .arx-nist__step { width: calc(50% - 8px); }
  .arx-metrics { display: block; margin-top: 40px; }
  .arx-metrics > div:last-child { padding-left: 0; margin-top: 34px; }
  .arx-metrics__divider { display: none; }
  .arx-stats { flex-wrap: wrap; gap: 22px 28px; }
  .arx-stat { min-width: 0 !important; }
  .arx-stat__num { font-size: 34px; }
  .arx-awards { flex-wrap: wrap; gap: 22px 30px; }
  .arx-award { max-width: calc(50% - 15px); }

  .arx-list { padding-block: 60px; }
  .arx-list__grid { grid-template-columns: 1fr; gap: 26px; max-width: 100%; }
  .arx-list__head { margin-bottom: 34px; }
  .arx-sec-tab { width: 240px; height: 35px; }

  .arx-cta { min-height: 0; padding-block: 60px 62px; }   /* 60+60: mesmo vão das demais */
  .arx-cta__sub { font-size: 16px; line-height: 24px; margin-top: 20px; }
  .arx-cta__sub br { display: none; }
  .arx-cta__actions { margin-top: 28px; flex-direction: column; }
  .arx-cta__actions .arx-btn { width: 100%; }
  .arx-cta__pilares { margin-top: 40px; flex-direction: column; gap: 22px; }
  .cta-pilar { padding: 0; max-width: none; }
  .cta-pilar + .cta-pilar { border-left: 0; }
  .cta-pilar { padding: 18px 0; max-width: none; }
  .cta-pilar + .cta-pilar { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }

  /* Insights: cabeçalho novo */
  .arx-list__sub { font-size: 16px; line-height: 23px; max-width: 100%; }
  .arx-list__title br { display: none; }
  .arx-list__todos { width: 100%; }

  .arx-footer { padding-top: 56px; }
  .arx-footer__top { grid-template-columns: 1fr 1fr; gap: 34px 20px; padding-bottom: 40px; }
  .arx-footer__brand { grid-column: 1 / -1; }
  .arx-footer__col h4 { margin-bottom: 12px; }
  .arx-footer__bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ======================= CIVITAS ======================= */
@media (max-width: 1024px) {
  /* hero */
  .cv-hero { height: auto; padding-bottom: 130px; }
  .cv-hero__sub { width: 100%; margin-top: 24px; font-size: 16px; line-height: 21px; }
  .cv-hero__actions { margin-top: 28px; flex-direction: column; width: 100%; }
  .cv-hero__actions .arx-btn { width: 100%; }

  /* conceito */

  /* relação ARX x Civitas → tudo em fluxo */
  /* os chips têm top inline (desktop): empilha em fluxo dentro de um wrapper posicionado */
  /* o palco sangra até a borda por causa do globo, mas as setas seguem a
     mesma calha lateral do resto da página */

  .cv-luz { display: none; }
}

/* ======================= MISSÕES (lista) ======================= */
@media (max-width: 1024px) {
  .ms-hero { height: auto; padding-bottom: 96px; }
  .ms-hero__eyebrow, .ms-hero__title, .ms-hero__sub, .ms-hero__btn {
    position: static; width: auto; left: auto; top: auto; margin-left: 0;
  }
  .ms-hero__inner { padding-top: 128px; }
  .ms-hero__title { margin-top: 14px; font-size: 34px; line-height: 40px; }
  .ms-hero__sub { margin-top: 18px; font-size: 16px; line-height: 22px; }
  .ms-hero__btn { display: inline-flex; margin-top: 26px; width: 100%; }
  .ms-hero__cycle { transform: scale(.52); transform-origin: center bottom; }
  .ms-hero__line { display: none; }

  .ms-s2 .arx-eyebrow, .ms-s2__title, .ms-s2__body { position: static; width: auto; }
  .ms-s2__body .destaque { font-size: 19px; line-height: 25px; }

  .msm__hint {
    margin-bottom: 14px; font-size: 14px; line-height: 19px;
    color: var(--arx-grey-70); text-align: center;
  }
  .msm__card {
    padding: 16px 18px 18px; border: 1px solid rgba(21,116,255,.35); border-radius: 16px;
    background: #0a0d14 url("../img/missoes/chip-bg.png");
    background-size: cover; background-position: 50% 0;
  }
  .msm__card + .msm__card { margin-top: 12px; }
  .msm__mission {
    display: block; font-size: 18px; line-height: 24px;
    font-weight: var(--fw-semibold); color: var(--arx-white);
  }
  .msm__mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 13px; }
  .msm__mod {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    height: 31px; padding: 0 10px; border-radius: 30px;
    border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.02);
    font-size: 13px; letter-spacing: .5px; color: rgba(255,255,255,.34);
  }
  .msm__mod::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; flex: none;
  }
  .msm__mod.is-on {
    border-color: #1574ff; color: var(--arx-white);
    background: rgba(21,116,255,.12); box-shadow: 0 0 16px -6px rgba(21,116,255,.9);
  }
  .msm__mod.is-on::before { background: #1574ff; }
  .msm__legend { margin-top: 20px; display: grid; gap: 7px; }
  .msm__legend li { display: grid; grid-template-columns: 42px 1fr; gap: 10px; }
  .msm__legend b { font-size: 13px; line-height: 18px; font-weight: var(--fw-semibold); color: #1574ff; }
  .msm__legend span { font-size: 13px; line-height: 18px; color: var(--arx-grey-70); }

  /* entrada: os módulos acendem em cascata quando a seção aparece */
  html.arx-anim .ms-matrix-m .msm__mod {
    opacity: 0; transform: translateY(8px);
    transition: opacity .4s var(--arx-ease), transform .4s var(--arx-ease);
    transition-delay: calc(var(--i, 0) * 32ms);
  }
  html.arx-anim .ms-matrix-m.is-in .msm__mod { opacity: 1; transform: none; }

  .ms-s5__item .ico { width: 100%; height: 62px; justify-content: center; }
  .ms-s5__item .ico img {
    width: auto; height: auto; max-width: 92px; max-height: 100%;
    object-fit: contain; margin-top: 0 !important;
  }

  .ms-s5__row.is-in .ms-s5__icons > .ms-s5__sep:nth-child(4),
  .ms-s5__row.is-in .ms-s5__icons > .ms-s5__sep:nth-child(8) {
    transform: rotate(90deg) scaleX(-1);
  }

  .ms-cta__actions .arx-btn { width: 100%; }
}

/* ======================= PÁGINA DE MISSÃO (Continuar Operando) ======================= */
@media (max-width: 1024px) {
  .mo-hero { height: auto; padding-bottom: 72px; }
  .mo-hero__title, .mo-hero__sub, .mo-hero__btn {
    position: static; width: auto; margin-left: 0; left: auto; top: auto; white-space: normal;
  }
  .mo-hero__inner { padding-top: 140px; padding-inline: 20px; }
  .mo-hero__title { font-size: 40px; line-height: 44px; }
  .mo-hero__sub { margin-top: 20px; font-size: 17px; line-height: 23px; }
  .mo-hero__btn { display: inline-flex; margin-top: 26px; width: 100%; }

  /* história: rola com o dedo */
  .mo-story { padding-top: 56px; }
  .mo-story__title { width: auto; font-size: 27px; line-height: 33px; }
  .mo-story__nav { position: static; margin-top: 18px; }
  .mo-story__bleed { margin-right: -20px; }
  .mo-story__viewport { margin-top: 26px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
  .mo-story__track { transform: none !important; }
  .mo-scard { width: 264px; padding: 0 20px 34px 0; scroll-snap-align: start; }
  .mo-scard__body { margin-top: 46px; }
  .mo-scard__title { font-size: 23px; line-height: 29px; }
  .mo-scard__desc { font-size: 15px; line-height: 23px; }
  .mo-story__rail, .mo-story__dots { display: none; }

  /* pergunta */
  .mo-ask { padding-top: 56px; }
  .mo-ask__panel { height: auto; padding: 26px 22px 30px; }
  .mo-ask__panel .arx-eyebrow, .mo-ask__title, .mo-ask__sub, .mo-ask__media {
    position: static; width: auto; left: auto; top: auto; right: auto;
  }
  .mo-ask__title { margin-top: 12px; font-size: 34px; line-height: 38px; }
  .mo-ask__sub { margin-top: 14px; font-size: 16px; line-height: 21px; }
  .mo-ask__media { height: 230px; margin-top: 22px; }
  .mo-ask__3d { left: auto; right: 4px; top: auto; bottom: 8px; width: 108px; height: 122px; }

  /* soluções / resultado / próxima missão */
  .mo-sol { padding-top: 56px; }
  .mo-sol__grid { gap: 14px; }
  .mo-card { width: 100%; height: auto; }
  .mo-card__in { padding: 26px 22px 24px; }
  .mo-card__ico, .mo-card h3, .mo-card p, .mo-card__more {
    position: static; width: auto; left: auto; top: auto; right: auto;
  }
  .mo-card h3 { margin-top: 16px; font-size: 26px; line-height: 30px; }
  .mo-card p { margin-top: 12px; }
  .mo-card__more { margin-top: 20px; }
  .mo-card__num { right: 16px; top: auto; bottom: -14px; transform: none; font-size: 88px; line-height: 88px; }

  .mo-res { padding-top: 56px; }
  .mo-res__grid { min-height: 0; }
  .mo-res .arx-eyebrow, .mo-res__title, .mo-res__txt, .mo-res__list {
    position: static; width: auto; left: auto; top: auto;
  }
  .mo-res__title { margin-top: 12px; font-size: 27px; line-height: 33px; }
  .mo-res__txt { margin-top: 14px; font-size: 16px; line-height: 22px; }
  .mo-res__list { margin-top: 26px; gap: 12px; }
  .mo-row { height: auto; }
  .mo-row__in { padding: 16px 18px; }
  .mo-row__in img { position: static; }
  .mo-row__in span { margin-left: 14px; font-size: 17px; line-height: 23px; }

  .mo-next { padding-top: 60px; }
  .mo-next__grid { flex-wrap: wrap; gap: 14px; margin-top: 30px; }
  .mo-ncard { width: 100%; height: auto; }
  .mo-ncard__in { padding: 24px 20px 22px; }
  .mo-ncard__ico, .mo-ncard h3, .mo-ncard p, .mo-ncard__link {
    position: static; left: auto; top: auto; right: auto;
  }
  .mo-ncard h3 { margin-top: 16px; font-size: 21px; line-height: 26px; }
  .mo-ncard p { margin-top: 10px; }
  .mo-ncard__link { display: inline-flex; margin-top: 18px; }
}

/* ======================= QUEM SOMOS ======================= */
@media (max-width: 1024px) {
  /* prancheta da timeline vira coluna única já no tablet */
  .qs-tl__wrap { height: auto !important; }
  .qs-tl__spine, .qs-tl__progress { display: none; }
  .qs-item {
    position: static !important; width: 100%; top: auto !important; left: auto !important;
    padding-left: 30px; margin-top: 34px;
  }
  .qs-item::before {
    content: ""; position: absolute; left: 0; top: 4px;
    width: 16px; height: 16px; border-radius: 50%; background: #1574ff;
    box-shadow: 0 0 0 4px rgba(21,116,255,.18);
  }
  .qs-item { position: relative !important; }
  .qs-item::after {
    content: ""; position: absolute; left: 7.5px; top: 24px; bottom: -34px;
    width: 1px; background: rgba(21,116,255,.45);
  }
  .qs-tl__wrap .qs-item:last-child::after { display: none; }
  .qs-item p { width: 100%; }
  .qs-tl--anim .qs-item--l, .qs-tl--anim .qs-item--r { transform: translateY(24px); }
  .qs-tl--anim .qs-item.is-in { transform: none; }
}
@media (max-width: 1024px) {
  .qs-hero { height: auto; padding-bottom: 64px; }
  .qs-hero__title, .qs-hero__sub, .qs-hero__actions {
    position: static; width: auto; left: auto; top: auto;
  }
  .qs-hero__inner { padding-top: 150px; }
  .qs-hero__title { font-size: 34px; line-height: 40px; }
  .qs-hero__sub { margin-top: 20px; font-size: 16px; line-height: 21px; }
  .qs-hero__actions { margin-top: 28px; flex-direction: column; }
  .qs-hero__actions .arx-btn { width: 100%; }

  /* blocos texto + imagem */
  .qs-about { padding-top: 56px; }
  .qs-about__grid, .qs-about--s6 .qs-about__grid { min-height: 0; }
  .qs-about .arx-eyebrow, .qs-about__title, .qs-about__body,
  .qs-about--s6 .qs-about__body {
    position: static; width: auto; left: auto; top: auto;
  }
  .qs-about__body .destaque { font-size: 22px; line-height: 27px; }
  .qs-about__title { margin-top: 12px; font-size: 27px; line-height: 33px; }
  .qs-about__body { margin-top: 16px; font-size: 16px; line-height: 22px; }
  .qs-about__body .destaque { font-size: 19px; line-height: 25px; }
  .qs-about__media,
  .qs-about--s2 .qs-about__media,
  .qs-about--s6 .qs-about__media {
    position: static; width: 100%; height: 230px; left: auto; top: auto; margin-top: 26px;
  }
  .qs-about__media img { width: 100%; height: 100%; object-fit: cover; }

  /* scrollytelling */
  .qs-lines { padding-top: 62px; }
  .qs-lines p { font-size: 30px; line-height: 38px; white-space: normal; }
  .qs-lines--motion .qs-lines__track { height: calc(100vh + 4 * 55vh); }
  .qs-lines__last { margin-top: 24px; flex-direction: column; gap: 16px; }
  .qs-logo-horiz { width: 100%; max-width: 320px; height: 60px; }
  .qs-logo-horiz img { max-width: 100%; height: auto; }

  /* trajetória */
  .qs-s4 { padding-top: 62px; }
  .qs-traj { height: auto; padding: 26px 22px 30px; }
  .qs-traj .arx-eyebrow, .qs-traj__title, .qs-traj__body {
    position: static; width: auto; left: auto; top: auto;
  }
  .qs-traj__title { margin-top: 12px; font-size: 27px; line-height: 33px; }
  .qs-traj__body { margin-top: 16px; font-size: 16px; line-height: 22px; }

  /* números */
  .qs-nums { padding-top: 60px; }
  .qs-nums__grid, .qs-nums > .arx-container > div { min-height: 0; }
  .qs-nums .arx-eyebrow, .qs-nums__title, .qs-nums__note, .qs-nums__row {
    position: static; width: auto; left: auto; top: auto;
  }
  .qs-nums__title { margin-top: 12px; font-size: 27px; line-height: 33px; }
  .qs-nums__note { margin-top: 14px; font-size: 16px; line-height: 22px; }
  .qs-nums__row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; margin-top: 30px; }
  .qs-stat b { white-space: normal; }
  .qs-nums__row--2 { margin-top: 26px; }
  .qs-stat b { font-size: 40px; line-height: 48px; }

  /* timeline */
  .qs-tl { margin-top: 66px; }
  .qs-tl__inner { padding-top: 62px; padding-bottom: 62px; }
  .qs-tl__title { font-size: 27px; line-height: 33px; }
  .qs-tl__tab { width: 240px; }
  .qs-tl__wrap { margin-top: 34px; }
  .qs-item h3 { font-size: 20px; line-height: 26px; }
  .qs-item p { font-size: 15px; line-height: 23px; }
  .qs-traj__glow { display: none; }
}

/* ======================= REFINO TABLET (768–1024) =======================
   O layout já virou fluxo no bloco acima; aqui só devolvemos escala
   tipográfica e colunas duplas, que cabem bem nessa faixa.
   ======================================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
  .arx-container { padding-inline: 40px; }
  body { font-size: 17px; }

  .cv-h2, .arx-section-title, .ms-s2__title, .ms-s3__title, .qs-about__title,
  .qs-traj__title, .qs-nums__title, .qs-tl__title, .mo-story__title, .mo-res__title {
    font-size: 40px; line-height: 46px;
  }
  .cv-lead, .qs-about__body, .qs-traj__body, .qs-nums__note, .ms-s2__body,
  .ms-s3__lead, .mo-res__txt { font-size: 20px; line-height: 26px; }

  /* heros */
  .arx-hero__title { font-size: 52px; line-height: 58px; }
  .arx-hero__content { max-width: 620px; padding-top: 200px; }
  .arx-hero__cta { flex-wrap: nowrap; }
  .arx-hero__cta .arx-btn { flex: 0 0 auto; }
  .cv-hero__actions, .ms-cta__actions, .arx-cta__actions,
  .qs-hero__actions { flex-direction: row; }
  .cv-hero__actions .arx-btn, .ms-cta__actions .arx-btn,
  .arx-cta__actions .arx-btn, .qs-hero__actions .arx-btn { width: auto; }
  .ms-hero__cycle { transform: scale(.9); }
  .ms-hero__title, .qs-hero__title { font-size: 52px; line-height: 58px; }
  .mo-hero__title { font-size: 64px; line-height: 70px; }
  .ms-hero__btn, .mo-hero__btn { width: auto; }

  /* grades em duas colunas */
  .arx-cards, .ms-s6__grid, .arx-list__grid,
  .mo-sol__grid { grid-template-columns: 1fr 1fr; }
  .mo-next__grid { display: grid; grid-template-columns: 1fr 1fr; }
  .mo-ncard, .mo-card { width: auto; }
  .arx-nist__step { width: calc(33.333% - 8px); }

  .qs-nums__row { grid-template-columns: repeat(3, 1fr); }
  .qs-stat b { font-size: 52px; line-height: 62px; }

  /* imagens dos painéis ganham fôlego */
  .qs-about__media, .qs-about--s2 .qs-about__media, .qs-about--s6 .qs-about__media { height: 340px; }
  .mo-ask__media { height: 320px; }
  .mo-scard { width: 300px; }

  /* linha do tempo com respiro maior */
  .qs-item { padding-left: 38px; }
  .qs-lines p { font-size: 48px; line-height: 58px; }

  /* depoimentos: dois cards por vez no tablet */
  .dep-card { flex: 0 0 calc((100% - 26px) / 2); }
}

/* ---- Civitas: 6 domínios ---- */
@media (max-width: 1200px) {
  .cvd__grid { grid-template-columns: repeat(3, 1fr); }
  .cvd__detalhe { grid-template-columns: 1fr 1fr; }
  .cvd-det__intro { grid-column: 1 / -1; }
  .cvd-int__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
  .cvd { padding-block: 64px; }
  .cvd__h2 { font-size: 30px; line-height: 38px; }
  .cvd__sub br { display: none; }
  .cvd__grid { grid-template-columns: 1fr; gap: 12px; }
  .cvd__detalhe { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
  .cvd-int__head { flex-direction: column; align-items: flex-start; }
  .cvd-int__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Civitas: como o Civitas funciona ---- */
@media (max-width: 1200px) {
  .cvf__topo { flex-direction: column; }
  .cvf__flash { width: 100%; margin-top: 0; }
  .cvf__grid { grid-template-columns: repeat(3, 1fr); gap: 40px 20px; }
  /* fora da fileira única o chevron aponta para o card errado */
  .cvf-passo + .cvf-passo::before { display: none; }
  .cvf-passo--motor { margin-block: 0; }
  .cvf__metricas { grid-template-columns: 1fr 1fr 1fr; row-gap: 26px; }
  .cvf-met__titulo { grid-column: 1 / -1; padding-right: 0; }
  .cvf-met:nth-child(2) { padding-left: 0; border-left: 0; }
}
@media (max-width: 767px) {
  .cvf { padding-block: 64px; }
  .cvf__h2 { font-size: 30px; line-height: 38px; }
  .cvf__h2 br, .cvf__sub br { display: none; }
  .cvf__grid { grid-template-columns: 1fr; gap: 44px; }
  .cvf__metricas { grid-template-columns: 1fr 1fr; padding: 24px 20px; }
  .cvf-met:nth-child(even) { padding-left: 0; border-left: 0; }
  .cvf__remate { font-size: 18px; line-height: 26px; }
}

/* ---- Missões: cenas do handoff em telas intermediárias ----
   O handoff pede >= 240px de largura renderizada, senão os traços finos da
   ilustração fecham. Em 4 colunas isso só se sustenta acima de ~1300px; entre
   o breakpoint de 1024 e ali, duas colunas. O range é fechado dos dois lados
   de propósito: escrito só com max-width ele venceria a regra de 1 coluna,
   que vem antes no arquivo. */
@media (min-width: 1025px) and (max-width: 1300px) {
  .mo-dia__linha { grid-template-columns: 1fr 1fr; }
  /* em duas colunas o 3º card abre fileira: a seta dele apontaria para a borda */
  .mo-dia__passo:nth-child(odd) .mo-dia__arte::before { display: none; }
}

/* ============================================================
   Eixo de conteúdo — blog, insights e os dois singles
   ============================================================ */
@media (max-width: 1200px) {
  .bl-hero__topo { grid-template-columns: 1fr; gap: 24px; }
  /* a vitrine perde as prévias laterais: com 3 colunas o card central
     encolhe abaixo do que a tipografia dele aguenta */
  .bl-vitrine { grid-template-columns: 1fr; }
  .bl-dest--lado { display: none; }
  .bl-lista__grid { grid-template-columns: 1fr; gap: 48px; }
  .bl-side { position: static; }
  .in-rec__grid { grid-template-columns: repeat(2, 1fr); }
  .in-ult__grid, .in-blog__grid, .art-rel__grid { grid-template-columns: repeat(2, 1fr); }
  .in-glos__grid { grid-template-columns: repeat(2, 1fr); }
  .in-dest__grid { grid-template-columns: 1fr; }
  .in-dest__card--largo { grid-template-columns: 1fr; padding: 36px 32px 40px; }
  .art-corpo__grid, .evt-corpo__grid { grid-template-columns: 1fr; gap: 48px; }
  .art-side__sticky { position: static; grid-template-columns: 1fr 1fr; }
  .art-cta-lateral { grid-column: 1 / -1; }
  .evt-dados { grid-template-columns: 1fr 1fr; }
  /* A foto ocupa 53,5% da faixa por posicionamento absoluto. Abaixo de ~1100
     a copy alcança essa borda e o texto passa a cair em cima da imagem — o
     fundo fica partido em dois. Aqui a foto sai e o halo assume a faixa
     inteira, que é o que dá contraste para a copy. */
  .arx-news__arte { display: none; }
  .arx-news__luz { inset: 0; }
  .arx-news__copy { min-height: 0; padding-block: 72px; max-width: 560px; }
}
@media (max-width: 767px) {
  .bl-hero__title br, .bl-hero__sub br, .arx-news__h2 br { display: none; }
  /* No destaque a copy fica SOBRE a imagem, o que só funciona enquanto sobra
     área de foto atrás dela. Na largura do celular não sobra: a imagem vira
     uma faixa própria no topo e o texto desce para o corpo do card, como nos
     cards da listagem. */
  /* No slide a copy fica SOBRE a imagem, e isso só funciona enquanto sobra
     área de foto atrás dela. Na largura do celular não sobra: a imagem vira
     uma faixa própria no topo e o texto desce para o corpo do card, como na
     listagem. O carrossel continua o mesmo — muda só o desenho do slide. */
  .bl-dest {
    display: flex; flex-direction: column; min-height: 0;
    background: rgba(255,255,255,.022); border: 1px solid rgba(255,255,255,.09);
  }
  .bl-dest::after { content: none; }   /* o véu existia para dar contraste sobre a foto */
  .bl-dest .bl-dest__ph, .bl-dest img {
    position: relative; inset: auto; width: 100%; height: auto;
    aspect-ratio: 16 / 10; border-radius: 0;
  }
  .bl-dest__meta, .bl-dest__corpo {
    position: static; opacity: 1; transform: none; pointer-events: auto;
  }
  .bl-dest__meta { padding: 18px 20px 0; }
  .bl-dest__corpo { padding: 14px 20px 24px; }
  .bl-dest__titulo { font-size: 26px; line-height: 33px; }
  .bl-dest__corpo .arx-btn { width: 100%; justify-content: center; }
  .bl-lista { padding-block: 64px; }
  /* as duas pílulas de ordenação têm 134px fixos no Figma; somadas ao recuo do
     painel elas pediam 344px e estouravam a coluna de 316 no celular */
  .bl-side { --recuo-texto: 8px; padding-inline: 16px; }
  .bl-ordem { flex-wrap: wrap; }
  .bl-ordem__btn { width: auto; flex: 1 1 130px; }
  .bl-lista__posts { grid-template-columns: 1fr; gap: 40px; }
  .bl-lista__h2, .in-rec__h2, .in-ult__h2, .in-blog__h2, .in-glos__h2, .arx-news__h2 { font-size: 28px; line-height: 36px; }

  .in-rec-sec, .in-ult, .in-blog, .in-glos { padding-block: 64px; }
  .in-rec__head, .in-blog__head, .art-rel__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .in-rec__grid, .in-glos__grid { grid-template-columns: 1fr; }
  .in-ult__grid, .in-blog__grid, .art-rel__grid { grid-template-columns: 1fr; gap: 40px; }
  .in-abas { flex-wrap: wrap; width: 100%; }
  .in-abas__btn { flex: 1; padding-inline: 12px; }

  .art-corpo, .evt-corpo { padding-block: 56px 64px; }
  .art-conteudo { font-size: 16px; line-height: 27px; }
  .art-conteudo h2 { font-size: 24px; line-height: 32px; }
  .art-side__sticky { grid-template-columns: 1fr; }

  .evt-dados { grid-template-columns: 1fr; }
  .evt-pal__grid { grid-template-columns: 1fr; }
  .evt-player__play { width: 62px; height: 62px; }
  .evt-player__play svg { width: 24px; height: 24px; }

  .arx-news__form { flex-direction: column; }
  .arx-news__form .arx-btn { width: 100%; justify-content: center; }
}

/* ---- Cases ---- */
@media (max-width: 1200px) {
  .cs-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-corpo__grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 767px) {
  .cs-hero { padding-block: calc(var(--arx-header-h) + 24px) 48px; }
  .cs-hero__sub { font-size: 17px; line-height: 26px; }
  .cs-lista { padding-bottom: 64px; }
  .cs-grid { grid-template-columns: 1fr; gap: 40px; }
  .cs-filtros { display: none; }
  .cs-select { display: block; }
  .cs-corpo { padding-block: 56px 64px; }
  /* a foto sobe para cima do texto: lado a lado sobraria pouca medida
     para a citação numa tela de 375 */
  .cs-depo { grid-template-columns: 1fr; gap: 20px; padding: 22px 20px; }
  .cs-depo__foto { width: 88px; }
  .cs-depo blockquote { font-size: 17px; line-height: 27px; }
}

/* ---- Boletins ---- */
@media (max-width: 1200px) {
  .bo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  /* o destaque perde a coluna dupla antes dos demais: a capa fica estreita
     demais para o título de 30px que fica ao lado */
  /* volta tudo para o fluxo: as linhas 1fr das pontas e o grid-row fixo de
     cada filho só fazem sentido enquanto há duas colunas — empilhados, eles
     fariam a capa e o texto ocuparem as mesmas células */
  .bcard--destaque { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 24px; }
  /* um seletor por filho, e não `> *`: as regras de duas colunas casam por
     duas classes e ganham do descendente universal — o grid-column: 2 do
     texto sobrevivia, abria uma segunda coluna implícita e a capa (1fr, sem
     largura intrínseca) zerava */
  .bcard--destaque .bcard__capa,
  .bcard--destaque .bcard__mes,
  .bcard--destaque .bcard__titulo,
  .bcard--destaque .bcard__resumo,
  .bcard--destaque .bcard__btn { grid-column: 1; grid-row: auto; }
}
@media (max-width: 767px) {
  .bo-hero { padding-block: calc(var(--arx-header-h) + 24px) 48px; }
  .bo-hero__sub { font-size: 17px; line-height: 26px; }
  .bo-hero__title br { display: none; }
  .bo-hero__form { flex-direction: column; }
  .bo-hero__form .arx-btn { width: 100%; justify-content: center; }
  .bo-hero__zap { display: flex; width: 100%; justify-content: center; }
  .bo-dest, .bo-lista { padding-bottom: 64px; }
  .bo-grid { grid-template-columns: 1fr; gap: 40px; }
  .bcard--destaque { padding: 18px; }
  .bcard--destaque .bcard__titulo { font-size: 24px; line-height: 32px; }
  .bo-lista__h2 { font-size: 28px; line-height: 36px; }
}

/* ======================= HEROES NO RETRATO (≤767) =======================
   Todo hero foi enquadrado numa prancheta deitada. No celular a caixa vira
   retrato e o corte fica muito mais estreito: quem foi calibrado para 1920
   de largura perde o assunto. Cada foto ganha aqui o seu ponto focal — não
   dá para resolver com uma regra só, porque o assunto está em lugar
   diferente em cada uma.
   ======================================================================= */
@media (max-width: 767px) {
  /* home: o skyline tem o arco de luz no meio, e a base é o reflexo */
  .arx-hero__poster, .arx-hero__video { object-position: 58% 42%; }

  /* missões: a pessoa na ponte está à direita do centro */
  .ms-hero__bg { background-position: 62% 34%; }

  /* quem somos: o rosto ocupa a metade DIREITA da foto — no corte
     centrado ele fica de fora, que é o pior recorte possível aqui */
  .qs-hero__bg { background-position: 78% 30%; }

  /* civitas: a cidade é simétrica, só sobe um pouco o centro */
  .cv-hero__bg { background-position: 50% 38%; }

  /* insights: os rastros de luz estão embaixo e são o assunto */
  .in-hero__bg img { object-position: 55% 72%; }

  /* missão: o enquadramento de 120,06% × 110,28% com deslocamento negativo
     é medida de comp — no retrato ele empurra a foto para fora da caixa */
  .mo-hero__bg img {
    position: absolute; inset: 0; left: 0; top: 0;
    width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%;
  }

  /* No comp a copy cai sempre na metade escura da foto. No retrato ela
     atravessa a parte clara — o céu do quem-somos, por exemplo — e o texto
     some. Um véu vertical devolve o contraste sem apagar a imagem. */
  .qs-hero__grad, .ms-hero__grad, .cv-hero__grad, .mo-hero__grad {
    inset: 0;
    background: linear-gradient(180deg,
      rgba(8,10,14,.52) 0%, rgba(8,10,14,.78) 46%, rgba(8,10,14,.95) 100%);
  }

  /* O painel do Civitas é uma maquete de 1243px de altura a 375 de largura:
     ilegível, e é o que fazia o hero passar de 2200px e esmagar a foto de
     fundo num corte de 0,17 de proporção. Ele volta a partir do tablet. */
  .cv-hero .cvp { display: none; }
}

/* ======================= CONTATO ======================= */
@media (max-width: 1023px) {
  .ct-fala__grid { grid-template-columns: 1fr; gap: 20px; }
  .ct-un__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .ct-hero { padding-block: calc(var(--arx-header-h) + 16px) 34px; }
  .ct-hero__sub { font-size: 16px; line-height: 24px; }
  .ct-fala, .ct-unidades { padding-bottom: 64px; }
  .ct-form { padding: 22px 20px 24px; }
  .ct-form__h2 { font-size: 22px; line-height: 28px; }
  /* dois campos por linha em 375 dão 150px cada: um por linha */
  .ct-form__linha { grid-template-columns: 1fr; gap: 18px; }
  .ct-form__enviar { width: 100%; justify-content: center; }
  .ct-unidades__h2 { font-size: 28px; line-height: 34px; }
  .ct-un__grid { grid-template-columns: 1fr; margin-top: 28px; }
}