/* Rike IS — Mobile overrides
   Aplicam-se ≤ 899px. Não tocam o markup nem o CSS desktop.
   Usam seletores escapados das classes Tailwind arbitrárias.
   Ref: Figma node 7871:1555 (375×15064px mobile master) */

@media (max-width: 899px) {

  /* ════════════════════════════════════════════════════════════════
   * 1. GLOBAL — padding 60px top/bottom em TODAS as sections
   * ════════════════════════════════════════════════════════════════ */
  .px-\[112px\]              { padding-left: 16px !important; padding-right: 16px !important; }
  .px-\[96px\]               { padding-left: 16px !important; padding-right: 16px !important; }
  .px-\[80px\]               { padding-left: 24px !important; padding-right: 24px !important; }
  .py-\[120px\]              { padding-top: 60px !important; padding-bottom: 60px !important; }
  .py-\[100px\]              { padding-top: 60px !important; padding-bottom: 60px !important; }
  .pt-\[120px\]              { padding-top: 60px !important; }
  .pb-\[120px\]              { padding-bottom: 60px !important; }
  .pt-\[160px\]              { padding-top: 60px !important; }
  .pt-\[32px\]               { padding-top: 60px !important; }
  .pb-\[32px\]               { padding-bottom: 60px !important; }
  .pb-\[16px\]               { padding-bottom: 60px !important; }
  /* Top-level section wrappers: 60px top/bottom.

     O `body >` é o que faz "top-level" ser verdade. O comentário antigo dizia
     "z-index único cada" e isso não se sustenta: `z-[2]` e `z-[3]` também
     aparecem em containers INTERNOS (o miolo do Entregáveis e os dois blocos
     do Cases), que passavam a receber 60px de padding vertical por dentro —
     espaço a mais dentro da seção, somado ao da própria seção. As seções de
     verdade são filhas diretas do body (header.php e footer.php não abrem
     wrapper), então o combinador filho separa uma coisa da outra. */
  body > .w-full.z-\[12\], body > .w-full.z-\[11\], body > .w-full.z-\[10\], body > .w-full.z-\[9\],
  body > .w-full.z-\[8\],  body > .w-full.z-\[7\],  body > .w-full.z-\[6\],  body > .w-full.z-\[5\],
  body > .w-full.z-\[4\],  body > .w-full.z-\[3\],  body > .w-full.z-\[2\] {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  /* Hero (z-[12]) tem o header próprio em cima — top fica 0.
     Mesmo `body >` da regra acima: sem ele perdia o empate por ser menos
     específico e o hero voltava a 60 de topo. */
  body > .w-full.z-\[12\]     { padding-top: 0 !important; }
  /* Logos: 60/60 igual ao resto */
  body > .w-full.z-\[11\]     { padding-top: 60px !important; padding-bottom: 60px !important; }
  .p-\[48px\]                { padding: 24px !important; }
  .p-\[40px\]                { padding: 24px !important; }
  .p-\[32px\]                { padding: 24px !important; }
  .p-\[80px\]                { padding: 40px 24px !important; }
  .max-w-\[1216px\]          { max-width: 100% !important; }
  .max-w-\[1047px\]          { max-width: 100% !important; }
  .max-w-\[1195px\]          { max-width: 100% !important; }

  /* Gaps grandes viram médios */
  .gap-\[72px\]              { gap: 32px !important; }
  .gap-\[60px\]              { gap: 32px !important; }
  .gap-\[56px\]              { gap: 32px !important; }
  .gap-\[40px\]              { gap: 24px !important; }
  .gap-\[32px\]              { gap: 16px !important; }
  .gap-\[112px\]             { gap: 56px !important; }

  /* Textos: H1/H2/H3 reduzidos */
  .text-\[52px\]             { font-size: 36px !important; line-height: 1.15 !important; }
  .text-\[44px\]             { font-size: 28px !important; line-height: 1.25 !important; }
  .text-\[40px\]             { font-size: 28px !important; }
  .text-\[32px\]             { font-size: 24px !important; }
  .text-\[24px\]             { font-size: 20px !important; }

  /* ── Viúvas ────────────────────────────────────────────────────────────
     Uma palavra sozinha na última linha é o defeito de diagramação mais
     visível quando um título desenhado para 1216px reflui para 358.
     `balance` reparte as linhas do título; `pretty` cuida dos parágrafos.

     Só no mobile de propósito: no desktop as quebras foram conferidas contra o
     Figma — inclusive com larguras fixas de título (`.cmp-card__titulo--w151`
     e companhia) que existem justamente para controlar onde a linha corta.
     Navegador sem suporte ignora a declaração; não há regressão. */
  h1, h2, h3, h4,
  [class$="__titulo"], [class$="__title"],
  [class*="__titulo "], [class*="__title "] { text-wrap: balance; }
  p, li, figcaption, blockquote            { text-wrap: pretty;  }

  /* ════════════════════════════════════════════════════════════════
   * 2. HEADER — esconder nav/CTA, mostrar hambúrguer
   * ════════════════════════════════════════════════════════════════ */
  .site-nav { display: none !important; }
  .site-cta { display: none !important; }

  /* Mostrar hambúrguer */
  /* 48×48: é o "secondary-button" do Figma mobile. Com 44 o cabeçalho do hero
     fechava 85 em vez de 88 e empurrava tudo 3px para cima. */
  .mobile-burger {
    display: flex !important;
    width: 48px; height: 48px;
    align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.3); border-radius: 10px;
    background: transparent; cursor: pointer;
    padding: 0;
  }
  #sticky-header .mobile-burger { border-color: rgba(0,0,0,0.15); }
  .mobile-burger svg { width: 24px; height: 24px; }

  /* Drawer fullscreen (override do display:none default) */
  #mobile-drawer {
    display: flex !important;
    position: fixed !important; inset: 0 !important; z-index: 100;
    background: #004a8a;
    flex-direction: column;
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateX(100%);
    transition: transform .3s ease;
    visibility: hidden;
  }
  #mobile-drawer.open { transform: translateX(0); visibility: visible; }
  #mobile-drawer .close {
    align-self: flex-end;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 10px;
    color: white; font-size: 28px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  #mobile-drawer nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px;
    margin-top: 40px;
  }
  #mobile-drawer nav a {
    color: white; font-size: 22px; font-weight: bold;
    font-family: 'Trebuchet MS', sans-serif;
    text-decoration: none;
  }
  /* Itens do dropdown de Soluções. No mobile não há hover, então em vez de um
     submenu eles entram recuados sob "Soluções" — menores e sem negrito, para
     ficar claro que são filhos. O gap da lista é 24, aqui fecha para 12. */
  #mobile-drawer nav a.drawer-sub {
    font-size: 17px;
    font-weight: normal;
    opacity: .85;
    padding-left: 20px;
    margin-top: -12px;
    border-left: 2px solid rgba(255, 255, 255, .25);
  }
  #mobile-drawer .drawer-cta {
    margin-top: auto;
    background: white; color: #004a8a;
    padding: 18px; border-radius: 14px;
    text-align: center; font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    font-family: 'Trebuchet MS', sans-serif;
  }

  /* Hero header: reduzir padding lateral + adicionar burger */
  /* (já coberto pelo global px override) */

  /* ════════════════════════════════════════════════════════════════
   * 3. HERO — Figma mobile 7871:2482 / 2208 / 2534 / 1556 (375 × 1138)
   *
   * Toda medida daqui saiu desses quatro frames, não de inferência sobre o
   * desktop. A versão anterior forçava a arte num 375×520 e mandava
   * `object-fit: cover` — o que recortava a foto num lugar arbitrário. Pior:
   * os arquivos eram os fills CRUS do Figma (landscape, 1024px), e o Figma
   * nunca os exibe inteiros: aplica um imageTransform. Agora cada estado tem
   * o recorte exportado como nó renderizado (hero-mob-N.webp), com a
   * proporção idêntica à da caixa — daí a foto não deforma em lugar nenhum.
   * ════════════════════════════════════════════════════════════════ */

  /* Texto e botões. Os `!important` aqui não são preguiça: as regras globais
     do bloco 1 deste arquivo já usam `!important` (`.text-[52px]`, `.gap-[40px]`)
     e sem eles o hero herdaria 36px de título e 24 de gap, não os 40/48 e 40
     que os frames mobile pedem. */
  .hero-texto                { width: 100% !important; gap: 40px !important; }
  .hero-texto > div > p      { width: 100% !important; font-size: 18px !important; line-height: 27px !important; }
  .hero-texto h1             { font-size: 40px !important; line-height: 48px !important; }

  /* A arte encosta na base do hero (frame 1138 = 88 + 60 + 990), então não há
     respiro embaixo — o global manda 60 em toda seção de topo. */
  .hero-secao.w-full.z-\[12\] { padding-bottom: 0 !important; }

  /* Container do conteúdo: pad[60,16,0,16] no Figma. Embaixo é 0 porque a
     arte encosta na base do hero.

     O `.hero-secao` na frente NÃO é enfeite. Sem ele o seletor era só
     `.py-[120px].px-[112px]` — o par de utilitários que TODA seção da home
     carrega — e o `padding-bottom: 0` vazava para Experiência e números,
     Entregáveis, Problemas, Diferenciais, Cases e Processo. Era por isso que
     o botão "Falar com especialista" encostava na seção azul de baixo: a
     seção não tinha respiro nenhum embaixo, só o `padding-top` da seguinte. */
  .hero-secao .py-\[120px\].px-\[112px\] { padding: 60px 16px 0 !important; }

  /* Cabeçalho embutido no hero: 88 de altura (16 + 48 + 24 do Figma).
     Os três seletores vinham de quando a regra global de seções de topo era
     `.w-full.z-\[3\]` solta: sozinho, `.hero-header` perdia o empate e o
     cabeçalho ficava com 189px, empurrando o hero inteiro 101px para baixo.
     Hoje aquela regra é `body > .w-full.z-\[3\]` e nem alcança este elemento
     (ele é neto do body), mas a especificidade fica como está — o valor aqui
     é o do Figma e não depende de quem mais tenta pintar por cima. */
  .hero-header.w-full.z-\[3\] { padding: 16px 16px 0 !important; }
  /* A linha divisória é `strokeAlign: INSIDE` no Figma — fica dentro dos 72px
     do Content. Como `border-bottom` ela somava 1px e deslocava o hero inteiro. */
  .hero-header > div {
    border-bottom: 0 !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1);
  }

  /* ── Arte ──────────────────────────────────────────────────────────
     No mobile a arte sai do posicionamento absoluto e entra no fluxo,
     logo abaixo dos botões, com 40 de respiro (gap do frame `content`).

     --hb é a base do desenho: acompanha a viewport e trava em 520px. Sem o
     teto, num tablet de 899 (o limite deste media query) a arte viraria um
     bloco de mais de mil pixels de altura. */
  /* --hb vive na raiz do hero, não na arte: a onda e o ícone flutuante são
     IRMÃOS da arte, e uma variável declarada nela não chega até eles. */
  .hero-secao { --hb: min(100vw, 520px); }

  .hero-arte {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    height: calc(var(--hb) * 1.2) !important;   /* 450 / 375 */
    margin-top: 40px;
    overflow: visible;                          /* o estado 4 é 13px mais alto */
  }

  /* Cada foto tem caixa própria, ancorada na base do hero — é assim que os
     quatro frames do Figma se comportam (todos terminam em y = 1138). */
  .hero-foto {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    /* O bloco "CONTENT WIDTH FIXES" no fim deste arquivo põe
       `max-width: 100% !important` em .w-[684px]/.w-[825px]/.w-[602px] — as
       classes destas caixas. Sem soltar o teto, a largura calculada abaixo
       era espremida de volta para a largura do container (343 em 375). */
    max-width: none !important;
  }
  .hero-foto img {
    position: absolute;
    inset: 0;
    width: 100%  !important;
    height: 100% !important;
    max-width: none !important;
    /* A proporção do arquivo é a mesma da caixa, então `contain` preenche
       exatamente — e, se algum dia divergir, sobra borda em vez de esticar. */
    object-fit: contain !important;
    object-position: bottom center !important;
  }

  /* x / largura / altura de cada estado, em fração de --hb.
     Figma:  1 → x -46, 468×450   2 → x  14, 400×450
             3 → x -93, 562×450   4 → x  10, 371×463 */
  .hero-slide--1 .hero-foto {
    max-width: none !important;
    left: calc(50% - var(--hb) * 0.62267) !important;
    width: calc(var(--hb) * 1.248) !important;
    height: calc(var(--hb) * 1.2) !important;
  }
  .hero-slide--2 .hero-foto {
    max-width: none !important;
    left: calc(50% - var(--hb) * 0.46267) !important;
    width: calc(var(--hb) * 1.06667) !important;
    height: calc(var(--hb) * 1.2) !important;
  }
  .hero-slide--3 .hero-foto {
    max-width: none !important;
    left: calc(50% - var(--hb) * 0.748) !important;
    width: calc(var(--hb) * 1.49867) !important;
    height: calc(var(--hb) * 1.2) !important;
  }
  .hero-slide--4 .hero-foto {
    max-width: none !important;
    left: calc(50% - var(--hb) * 0.47333) !important;
    width: calc(var(--hb) * 0.98933) !important;
    height: calc(var(--hb) * 1.23467) !important;
  }

  /* Cards de métrica não existem em nenhum dos quatro frames mobile. */
  .metric-card { display: none !important; }

  /* As redes flutuantes do estado 2 também não — mas o ícone 3D do estado 4
     está lá (grupo Icon, 77×82 em x 13 / y 848 do frame de 1138). Ele é a
     única animação que o desenho mantém no celular; antes o `.float-img`
     apagava esta também. */
  .float-img { display: none !important; }
  .hero-slide--4 .float-img {
    display: block !important;
    left: calc(var(--hb) * 0.03467) !important;
    top: calc(var(--hb) * 0.42667) !important;
    transform-origin: top left;
    scale: 0.68;                                /* 77 / 113 do desenho desktop */
  }

  /* Onda branca da base: 342×24 no Figma, sobre a arte. */
  .hero-onda {
    z-index: 10 !important;
    bottom: -1px !important;
    width: calc(var(--hb) * 0.912) !important;
    height: calc(var(--hb) * 0.064) !important;
  }

  /* Botões: empilhados, 343×60, gap 24 (frame "Button Container") */
  .hero-botoes {
    width: 100%;
    flex-direction: column;
    gap: 24px !important;
  }
  .hero-botoes > a {
    width: 100%;
    height: 60px;
    justify-content: center !important;
  }

  /* ════════════════════════════════════════════════════════════════
   * 4. LOGOS CARROUSEL — label centralizada, mostrar ~4 logos visíveis
   * ════════════════════════════════════════════════════════════════ */
  /* Container do label + carrossel: stack vertical, centralizado */
  .pt-\[40px\] > .flex.items-center.justify-between {
    flex-direction: column;
    align-items: center !important;
    gap: 20px;
  }
  /* Label "Clientes que confiam em nós": centraliza */
  .pt-\[40px\] > .flex.items-center.justify-between > .w-\[137px\] {
    width: auto !important;
    text-align: center !important;
  }
  /* Carousel viewport: full width (sai do w-[1007px] desktop) */
  .logos-overflow,
  .w-\[1007px\] { width: 100% !important; }
  /* Logos menores no mobile (40px height pra caber mais) */
  .logos-track .logo-item { height: 40px !important; }
  .logo-item img { height: 40px !important; max-height: 40px !important; }
  /* Gap menor pra encaixar mais logos visíveis */
  .logos-track { gap: 16px !important; }

  /* ════════════════════════════════════════════════════════════════
   * 5. EXPERIÊNCIA E NÚMEROS — stack 3-col → 1-col
   * ════════════════════════════════════════════════════════════════ */
  /* Cards row: 3 colunas viram uma só */
  .flex.gap-\[32px\].items-center.justify-center.relative.shrink-0.w-full {
    flex-direction: column;
    align-items: stretch !important;
  }
  /* Globo no meio */
  #rike-globe-wrap { max-width: 280px !important; margin: 0 auto; }
  /* O canvas do cobe recebe largura em atributo pelo JS; sem teto em CSS ele
     ocupa o layout no tamanho do buffer (1120px com DPR 2). */
  #rike-globe { max-width: 100% !important; height: auto !important; }

  /* Aqui havia `.bg-[#f5f9ff].z-[7] { margin-top: 32px }` para descolar o
     cartão "Problemas que resolvemos" da seção preta de cima. O que colava os
     dois era o `padding-bottom: 0` que vazava da regra do hero (bloco 3): o
     Entregáveis terminava rente à última linha de texto. Com o vazamento
     corrigido o preto volta a ter 60px embaixo e a margem sobrando só abria
     uma faixa branca do body entre as duas seções. */

  /* H2 da seção fica 100% width */
  .w-\[568px\]               { width: 100% !important; }

  /* Items das colunas viram linhas full-width.
     LEFT col (.justify-end) inverte ordem: counter/ícone primeiro, texto depois.
     RIGHT col já tem counter/ícone primeiro — não inverter. */
  .border-\[\#eaecf0\].border-b.flex {
    justify-content: flex-start !important;
  }
  .border-\[\#eaecf0\].border-b.flex.justify-end {
    flex-direction: row-reverse !important;
  }
  .border-\[\#eaecf0\].border-b .text-right {
    text-align: left !important;
    width: auto !important;
    flex: 1;
  }
  .w-\[255px\], .w-\[315px\]  { width: auto !important; flex: 1; }

  /* Counter +10/+20 mantém 40px (override do global text-[40px]=28px) */
  .font-bold.text-\[\#006fcc\].text-\[40px\] {
    font-size: 40px !important;
    flex-shrink: 0 !important;
  }

  /* ════════════════════════════════════════════════════════════════
   * 6. SOLUÇÃO + SOBRE VIDEO — padding 60px top/bottom + gap 60px
   * ════════════════════════════════════════════════════════════════ */
  /* Container interno do vídeo: stack vertical, gap 60px, padding 60px */
  .bg-\[\#0d1b2e\].flex.gap-\[72px\],
  .bg-\[\#0d1b2e\].flex.gap-\[60px\] {
    flex-direction: column !important;
    gap: 60px !important;
    padding: 60px 24px !important;
  }
  /* Card branco full width */
  .w-\[572px\], .w-\[578px\]  { width: 100% !important; }
  /* H2 fixo virou auto */
  .h-\[114px\].w-\[476px\]    { height: auto !important; width: 100% !important; }
  /* Logo Dynatrace */
  .w-\[169px\].h-\[32px\]     { width: 130px !important; }

  /* ════════════════════════════════════════════════════════════════
   * 7. ENTREGÁVEIS — 8 cards 1-col stack + bg full black sem pattern
   * ════════════════════════════════════════════════════════════════ */
  .w-\[292px\]               { width: 100% !important; }
  /* `.w-[482px]` saiu: era usada só pela legenda dos Entregáveis, que agora
     leva largura e `max-width:100%` inline — não depende mais desta folha. */
  /* Cards de entregáveis: 112px tall por Figma */
  .gradient-border.h-\[152px\].w-\[292px\] { height: 112px !important; }
  /* Esconder pattern (linhas + dots) no fundo do entregáveis */
  .bg-black.z-\[8\] > .absolute.inset-0.z-\[1\] { display: none !important; }

  /* ════════════════════════════════════════════════════════════════
   * 8. PROBLEMAS — 3 col → 1 col, header alinhado à esquerda
   * ════════════════════════════════════════════════════════════════ */
  .flex.gap-\[32px\].h-\[462px\] {
    flex-direction: column;
    height: auto !important;
  }
  .w-\[546px\]               { width: 100% !important; }
  /* A legenda "Falta de visibilidade, lentidão e falhas operacionais…" leva
     `w-[592px]` do Figma desktop e ninguém a soltava no mobile: com 592 dentro
     de uma seção de 343 e `overflow-clip` no wrapper, o texto não estourava —
     era CORTADO no meio da frase, 233px dela fora da tela. */
  .w-\[592px\]               { width: 100% !important; }
  /* Header da seção Problemas alinhado à esquerda (z-[7] é único pra esta) */
  .z-\[7\] .fade-in.text-center {
    text-align: left !important;
    align-items: flex-start !important;
  }
  /* Title e parágrafos do header full-width */
  .z-\[7\] .fade-in.text-center > * { text-align: left !important; }

  /* ════════════════════════════════════════════════════════════════
   * 9. DIFERENCIAIS — 6 cards 1-col, bg-image, gap 200px desc→cards
   * ════════════════════════════════════════════════════════════════ */
  .w-\[394px\]               { width: 100% !important; }
  .w-\[493px\]               { width: 100% !important; }
  .w-\[439px\]               { width: 100% !important; }
  /* Padding interno menor pros cards */
  .gradient-border.h-\[152px\].w-\[394px\] { height: auto !important; min-height: 112px; }
  /* Esconder feature image lateral e pattern SVG decorativo */
  .bg-\[\#004a8a\] .h-\[454px\].w-\[723px\] { display: none !important; }
  .bg-\[\#004a8a\] .h-\[1394px\].w-\[906px\] { display: none !important; }
  /* Background image dedicado mobile */
  .bg-\[\#004a8a\].z-\[6\] {
    background-image: url('../img/diferenciais.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-blend-mode: overlay;
  }
  /* Gap de 200px entre descrição (header) e cards na seção Diferenciais */
  .bg-\[\#004a8a\].z-\[6\] .flex.flex-col.gap-\[112px\] {
    gap: 200px !important;
  }

  /* ════════════════════════════════════════════════════════════════
   * 10. CERTIFICAÇÕES — 6 badges em grid 3×2
   * ════════════════════════════════════════════════════════════════ */
  /* Container interno reduz padding */
  .bg-\[\#f5f9ff\].p-\[80px\] { padding: 32px 16px !important; }
  /* Grid 3 colunas × 2 linhas pros badges */
  .bg-\[\#f5f9ff\] .flex.gap-\[32px\].items-center.justify-center.relative.shrink-0.w-full {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px 12px !important;
    justify-items: center !important;
    align-items: center !important;
  }
  /* Badges fluidos.
     O `.p-\[80px\]` no ancestral NÃO é decoração: sem ele o seletor exigia
     apenas um pai com `.flex.gap-\[32px\]` dentro de qualquer bloco
     `#f5f9ff` — e casava com o card branco da seção "Sobre a Rike IS", que
     também usa gap-[32px]. O resultado era o card travado em `max-width:
     100px` com `aspect-ratio: 1/1.16`: o texto encolhia até a maior palavra
     e vazava por cima da foto, em TODA página que traz essa seção. */
  .bg-\[\#f5f9ff\].p-\[80px\] .flex.gap-\[32px\] > .relative.shrink-0 {
    width: 100% !important;
    max-width: 100px !important;
    height: auto !important;
    aspect-ratio: 1 / 1.16 !important;
  }
  .w-\[626px\]               { width: 100% !important; }
  .w-\[846px\]               { width: 100% !important; }

  /* ════════════════════════════════════════════════════════════════
   * 11. CASES — slide 327px, swipe touch, bg-image, nav space-between
   * ════════════════════════════════════════════════════════════════ */
  /* Cases section: bg-image substitui o pattern */
  .bg-black.items-start.z-\[8\] {
    background-image: url('../img/cases.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  /* Esconder pattern decorativo (elipses + dots) */
  .h-\[968px\].w-\[1920px\]   { display: none !important; }

  .case-slide,
  .case-slide.w-\[1216px\]   { width: calc(100vw - 48px) !important; }
  /* Layout interno 3-col → 1-col */
  .case-slide.flex.gap-\[32px\].items-start {
    flex-direction: column;
    gap: 24px !important;
    padding: 24px !important;
  }
  .case-slide > .flex.flex-1   { width: 100% !important; }
  .case-slide .self-stretch    { min-height: 200px; align-self: stretch !important; }

  /* Texto e cabeçalho cases */
  .w-\[543px\]                { width: 100% !important; }
  .w-\[413px\]                { width: 100% !important; }

  /* Header da seção Cases (h2 + p ao lado) empilha — APENAS o header (dentro de .fade-in) */
  .bg-black .fade-in > .flex.items-center.justify-between {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 16px;
  }

  /* Swipe touch nativo no viewport do cases */
  .cases-viewport {
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cases-viewport::-webkit-scrollbar { display: none; }
  /* Track sem transform JS (CSS scroll-snap toma conta) */
  .cases-track {
    transform: none !important;
    transition: none !important;
  }
  .case-slide { scroll-snap-align: start; }

  /* Nav row: dots ESQUERDA + arrows DIREITA (space-between, centro vertical) */
  .cases-viewport ~ .flex.items-center.justify-between {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  /* ════════════════════════════════════════════════════════════════
   * 12. PROCESSO — horizontal → vertical, sem gap, SVG step à esquerda
   * ════════════════════════════════════════════════════════════════ */
  /* Header da seção Processo alinhado à esquerda (z-[4] é único) */
  .z-\[4\] .fade-in.text-center {
    text-align: left !important;
    align-items: flex-start !important;
  }
  .z-\[4\] .fade-in.text-center > * { text-align: left !important; }

  /* Container dos steps: vertical, ZERO gap (cards colados).
     Ancorado no `.z-\[4\]` da seção Processo: sem isso o seletor era
     `.bg-white .flex.items-stretch…`, e o `.bg-white` do <body> fazia ele
     pegar TAMBÉM o corpo do rodapé — que ficava com gap 0 e, com cinco
     classes mais !important, nenhuma regra `.ft-` conseguia corrigir. */
  .z-\[4\] .flex.items-stretch.relative.shrink-0.w-full {
    flex-direction: column !important;
    gap: 0 !important;
  }
  /* Cada step card full width, sem margin negativo */
  .z-\[4\] .flex.items-stretch > .flex.flex-1.flex-col {
    width: 100% !important;
    flex: none !important;
    margin-right: 0 !important;
  }
  /* SVG step connector: aparece na ESQUERDA com gap zero entre cards */
  .z-\[4\] .flex.items-stretch > .h-\[40px\].w-\[39px\] {
    display: block !important;
    transform: rotate(90deg) !important;
    align-self: flex-start !important;
    /* Negative margins puxam os cards pra ficar quase encostados */
    margin: -8px 0 -8px 16px !important;
    width: 39px !important;
    height: 40px !important;
    position: relative;
    z-index: 1;
  }
  /* H2 do processo fica auto */
  .w-\[536px\]               { width: 100% !important; }

  /* ════════════════════════════════════════════════════════════════
   * 13. BLOG — cards alinhados ao grid + overflow visible (peek)
   * ════════════════════════════════════════════════════════════════ */
  #blog .flex.gap-\[32px\].items-center.relative.shrink-0.w-full {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 !important;
    padding: 0 !important;
    gap: 16px !important;
    width: 100% !important;
    scrollbar-width: none;
  }
  #blog .flex.gap-\[32px\].items-center.relative.shrink-0.w-full::-webkit-scrollbar { display: none; }

  /* Cards: ~85% do viewport (deixa peek do próximo) */
  #blog .flex.gap-\[32px\].items-center.relative.shrink-0.w-full > article,
  #blog .flex.gap-\[32px\].items-center.relative.shrink-0.w-full > div {
    flex: 0 0 calc(100vw - 80px) !important;
    min-width: 0 !important;
    scroll-snap-align: start;
  }

  /* Header do blog: título + "Ver todos" stack à esquerda */
  #blog .flex.items-end.justify-between {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 16px;
  }
  .w-\[565px\]               { width: 100% !important; }

  /* ════════════════════════════════════════════════════════════════
   * 14. CTA FINAL — não precisa de override no mobile.
   * A seção mobile é renderizada via .mobile-only (template separado)
   * e a desktop via .desktop-only (esconde no mobile).
   * ════════════════════════════════════════════════════════════════ */

  /* ════════════════════════════════════════════════════════════════
   * 15. FOOTER — ver bloco `.ft-*` mais abaixo neste arquivo.
   *
   * Aqui existia uma camada escrita contra as classes Tailwind do rodapé
   * antigo — `footer.bg-black .flex.flex-1.gap-8.items-start.min-w-0` e
   * companhia. Com cinco classes ela ganhava de `.ft-links` por
   * especificidade e forçava `flex-direction: column`, empilhando as quatro
   * colunas uma por linha em vez de duas a duas. As demais miravam
   * `border-b` / `border-r` / `border-t`, classes que saíram quando os
   * traços do Figma (todos `strokeAlign: INSIDE`) viraram box-shadow.
   * Regra do arquivo daqui em diante: mobile do rodapé só por classe `.ft-`.
   * ════════════════════════════════════════════════════════════════ */

  /* ════════════════════════════════════════════════════════════════
   * 16. CONTENT WIDTH FIXES — quaisquer larguras px hardcoded
   * ════════════════════════════════════════════════════════════════ */
  .w-\[684px\], .w-\[825px\], .w-\[602px\] { width: 100% !important; max-width: 100% !important; }
  .w-\[1216px\]               { width: 100% !important; }

  /* Safe area + dvh para o drawer */
  #mobile-drawer { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

  /* ════════════════════════════════════════════════════════════════
   * 17. CTA BUTTONS — 100% width no mobile
   * ════════════════════════════════════════════════════════════════ */
  a.flex.gap-\[12px\].items-center.justify-center.rounded-\[14px\],
  button.flex.gap-\[12px\].items-center.justify-center.rounded-\[14px\],
  a.bg-\[\#006fcc\].rounded-\[14px\],
  button.bg-\[\#006fcc\].rounded-\[14px\],
  a.bg-white.rounded-\[14px\]:has(span),
  button.bg-white.rounded-\[14px\]:has(span) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Esconder o hambúrguer no desktop sempre */
.mobile-burger { display: none; }

/* Smooth pra abrir/fechar drawer + travar scroll */
body.drawer-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINAS INTERNAS — mobile
   --------------------------------------------------------------------------
   O bloco de cima cobria SÓ a home: ele trabalha em cima das classes Tailwind
   escapadas do front-page.php (.px-\[112px\], .w-\[572px\]). Nenhum seletor
   dele encosta nos prefixos semânticos .svc- .sbr- .cmp- .dyn- .con- .obs-
   .blg- .sgl-, então todas as páginas internas subiram sem responsivo.

   REGRA DO CLIENTE, válida para toda seção de duas colunas:
     o TEXTO vem antes da IMAGEM — h2 → texto → imagem embaixo.
   Onde o desktop põe a imagem primeiro, a ordem é corrigida com `order`
   ou `column-reverse`. Nenhuma mudança de DOM foi necessária.

   Nota: `body` tem `overflow-x-hidden`, o que MASCARA estouro horizontal em
   vez de resolver. As larguras fixas abaixo foram corrigidas de verdade.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet: larguras que estouram antes dos 900px ────────────────────────── */
@media (max-width: 1199px) {
  /* Painel de 296px encostado na direita para não vazar da viewport. */
  .nav-drop__painel { left: auto; right: -16px; }
}

/* Em tela sem hover de verdade, `:hover` fica "grudado" depois do toque:
   o painel abre e não fecha. Aí só o clique no botão controla. */
@media (hover: none) {
  .nav-drop:hover > .nav-drop__painel { display: none; }
  .nav-drop__painel:not([hidden])     { display: block; }
}

@media (max-width: 899px) {

  /* ── Tokens ───────────────────────────────────────────────────────────── */
  /* `--section-px` daria 29px em 375, enquanto a home usa 16. Redefinir aqui
     acerta o respiro lateral de TODAS as seções internas de uma vez. */
  :root {
    --section-px:  16px;
    --content-gap: 32px;
  }

  /* ── Hambúrguer nos heroes escuros ────────────────────────────────────── */
  .mobile-burger--escuro { border-color: rgba(255, 255, 255, .3); }

  /* ── Tipografia base das internas ─────────────────────────────────────── */
  .svc-hero__title, .sbr-hero__title, .cmp-hero__title,
  .dyn-hero__titulo, .con-hero__titulo, .obs-hero__titulo,
  .blg-h1, .blg-cab__titulo, .bsc-hero__titulo, .sgl-hero__titulo {
    font-size: 32px;
    line-height: 1.2;
  }
  .sbr-h2, .dyn-h2, .con-h2, .obs-h2, .blg-h2, .sgl-side__titulo { font-size: 24px; }
  .blg-h3, .sgl-relacionado__titulo { font-size: 20px; }
  .sbr-hero__subtitle, .dyn-proc__desc, .blg-cab__desc, .bsc-hero__sub { font-size: 16px; }

  /* Botões de largura livre viram bloco — `nowrap` estourava a linha. */
  .svc-btn, .sbr-btn, .cmp-btn, .dyn-btn, .con-btn, .obs-btn,
  .bsc-form__botao, .sgl-cta__botao {
    width: 100%;
    justify-content: center;
    align-self: stretch;
  }

  /* ── Seções "Solução" e "Sobre a Rike IS" (.video-section) ────────────── */
  /* Aparecem em quase toda página e a marcação delas é Tailwind — `px-[96px]`,
     `p-[48px]`, `w-[572px]` — então nenhum seletor semântico as alcançava e
     elas ficaram sem responsivo nenhum.
     O sintoma: com o bloco virando coluna, o card branco perdia a largura
     fixa e encolhia até a MAIOR PALAVRA do título (148px em 390 de tela),
     com o texto vazando por cima da foto.
     `!important` aqui não é preguiça: o Tailwind Play injeta as classes num
     <style> em runtime, que entra depois desta folha. */
  .video-section {
    padding: 24px 16px !important;
    gap: 24px !important;
  }
  /* A coluna intermediária. Exclui a Observabilidade, que tem estrutura
     semântica própria (.obs-solucao__content) e já é tratada mais abaixo. */
  .video-section > div:not([class*="obs-"]) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    align-items: stretch !important;
  }
  .video-section .bg-white {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px !important;
    gap: 20px !important;
  }
  /* Os filhos herdavam `items-start` do flex em coluna e encolhiam até a
     maior palavra — o `w-full` do Tailwind não chega a ser gerado para eles.
     Forçar a largura aqui é o que faz o título ocupar a linha inteira. */
  .video-section .bg-white > *,
  .video-section .bg-white h2,
  .video-section .bg-white p,
  .video-section .bg-white > div > * {
    width: 100% !important;
    max-width: 100% !important;
  }
  .video-section .bg-white h2 { font-size: 22px !important; line-height: 1.3 !important; }
  .video-section .bg-white p  { font-size: 15px !important; }
  /* O link "Saiba mais" é o único que não deve esticar. */
  .video-section .bg-white a { width: auto !important; }
  /* O logo da Dynatrace some: a 169px ele espremeria o card sem acrescentar. */
  .video-section > div.h-\[32px\] { display: none !important; }

  /* ── Quem somos ───────────────────────────────────────────────────────── */
  .sbr-hero__container { padding: 60px var(--section-px); gap: 32px; }
  .sbr-hero__buttons   { flex-direction: column; gap: 12px; width: 100%; }
  .sbr-hero__track img { width: 260px; height: 147px; }
  /* A animação do marquee é `translateX(-2050px)`, amarrada a 5×(394+16).
     Com a imagem menor, o loop precisa de outra volta: 5×(260+16). */
  .sbr-hero__track { animation-name: sbr-marquee-m; }
  @keyframes sbr-marquee-m { to { transform: translateX(-1380px); } }

  .sbr-about        { grid-template-columns: minmax(0, 1fr); padding: 60px var(--section-px); gap: 32px; }
  .sbr-about__media { width: 100%; }
  .sbr-about__img--short { height: 180px; }
  /* O selo é absoluto em coordenadas do bloco de 633px; encolhe e reancora. */
  .sbr-selo { width: 120px; height: 120px; top: calc(50% + 40px); left: auto; right: 8px; transform: none; }

  /* Aqui o painel de cards vem antes do texto no DOM: `order` inverte. */
  .sbr-atuacao          { grid-template-columns: minmax(0, 1fr); padding: 60px var(--section-px); gap: 32px; }
  .sbr-atuacao__content { order: 1; }
  .sbr-atuacao__panel   { order: 2; padding: 20px; }
  .sbr-item             { width: 100%; }

  .sbr-stats       { padding-bottom: 60px; }
  .sbr-stats__head { padding-top: 60px; }
  /* `align-items: stretch` + largura cheia nas duas colunas: no desktop o
     grid centraliza (é uma linha de três), e empilhado isso fazia a coluna da
     esquerda encolher para o conteúdo (273px) e ficar centrada em x59,
     enquanto a da direita ocupava os 358 a partir de x16. Os números, os
     rótulos e as linhas divisórias caíam em duas grades diferentes. */
  .sbr-stats__grid { flex-direction: column; gap: 32px; align-items: stretch; }
  .sbr-stats__col  { width: 100%; }
  /* Globo com o MESMO tratamento da home (`#rike-globe-wrap` mais acima):
     280px, centralizado. A regra da home casa por id, então vale aqui também;
     o que faltava era o contêiner da Quem somos não impor outra largura. */
  /* Sem `order`: o globo fica ENTRE as duas colunas de números, exatamente
     como na home — lá a linha de três colunas vira coluna e a ordem do DOM
     (números → globo → números) já resolve. Aqui um `order: 3` empurrava o
     globo para depois de tudo, e a seção ficava só com números.
     A regra "texto antes da imagem" não se aplica: o globo não ilustra um
     texto, ele é o centro da composição. */
  .sbr-stats__globo {
    width: 100%;
    max-width: 280px;
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto;
  }
  .sbr-stats__globo #rike-globe-wrap,
  .sbr-stats__globo canvas { width: 100% !important; max-width: 280px !important; height: auto !important; }

  /* ── Carrossel de setores: sem fade de entrada ────────────────────────── */
  /* Os cards usam `.sbr-fade`, que só fica visível quando o
     IntersectionObserver dispara. Num scroller HORIZONTAL os cards à direita
     nunca entram na viewport, então continuavam invisíveis — e a pessoa não
     percebia que havia mais conteúdo para o lado. Aqui eles já nascem
     visíveis, e a "espiada" do card seguinte é o que revela o carrossel. */
  .sbr-setores__grid .sbr-fade,
  .sbr-setores__grid .sbr-setor {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .sbr-stats__col--left { text-align: left; }
  .sbr-stats__col--left .sbr-stat { align-items: flex-start; }
  .sbr-stats__col--right .sbr-stat:last-child { height: auto; }

  /* 5 cards de 480px em `flex: 1 1 0` dariam ~67px cada. Vira carrossel. */
  .sbr-setores       { padding: 60px var(--section-px); gap: 32px; }
  .sbr-setores__grid { overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; scrollbar-width: none; }
  .sbr-setores__grid::-webkit-scrollbar { display: none; }
  .sbr-setor { flex: 0 0 calc(100vw - 80px); height: 400px; scroll-snap-align: start; }

  /* ── Soluções ─────────────────────────────────────────────────────────── */
  /* O hero servia a composição inteira reduzida a 100% da viewport: 151px de
     altura, ilegível, e ainda cortada 18px pelo overflow. Agora o <source>
     mobile entrega só o painel do sistema, ele sai da largura da tela para
     ficar legível e encosta na base da seção — sem respiro embaixo. */
  /* Flex column mata o colapso de margem entre o bloco de texto e a imagem —
     era de lá que vinham os 18px de sobra que empurravam a arte para fora da
     seção em vez de deixá-la encostada na base. */
  .svc-hero {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }
  /* Sem isto o bloco de texto é espremido (444px de caixa para 462px de
     conteúdo) e o botão "Falar com um especialista" fica cortado por baixo —
     que é de onde saíam os 18px que descolavam a imagem da base da seção. */
  .svc-hero > * { flex-shrink: 0; }
  /* Respiro nas laterais: antes a arte saía 98px para cada lado e o `overflow`
     cortava as bordas do painel. Embaixo continua sem respiro — a seção
     termina na imagem. */
  .svc-hero__image {
    height: auto;
    padding: 32px var(--section-px) 0;
    align-items: flex-end;
    overflow: hidden;
  }
  .svc-hero__image img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    position: static;
    left: auto;
    transform: none;
  }

  /* ── Compliance ───────────────────────────────────────────────────────── */
  .cmp-hero__container { grid-template-columns: minmax(0, 1fr); padding: 40px var(--section-px) 60px; gap: 32px; }
  /* As 8 pílulas da órbita são absolutas em coordenadas de um frame de 559px:
     em 343px elas colidem. Escondê-las e encolher o anel é mais legível que
     reposicionar oito peças. */
  .cmp-pill            { display: none; }
  .cmp-orbita          { height: 300px; }
  .cmp-orbita__anel    { width: 260px; height: 260px; }
  .cmp-orbita__escudo  { width: 120px; height: 120px; }
  .cmp-hero__recorte   { width: min(280px, 80%); }

  .cmp-solucao__main   { padding: 24px 16px; }
  .cmp-solucao__bloco  { padding: 24px; gap: 24px; }
  .cmp-grid            { padding: 60px var(--section-px); gap: 32px; }
  .cmp-grid__intro     { flex-direction: column; align-items: flex-start; gap: 24px; }
  .cmp-grid__linha,
  .cmp-grid__par       { flex-direction: column; }
  .cmp-grid__linha--metades > * { flex: 1 1 auto; }
  .cmp-card--292, .cmp-card--291 { width: 100%; flex-shrink: 1; }
  /* `.cmp-card--flex` é `flex: 1 1 0` para dividir a LARGURA da linha no
     desktop. Com a linha virando coluna aqui, o mesmo `flex-basis: 0` passa a
     mandar na ALTURA e vencia o `height` — três dos oito cards fechavam em
     48px, e o título, alinhado ao fim, saía por cima da ilustração. */
  .cmp-card--flex                { flex: 0 0 auto; }

  /* Altura livre em vez dos 220 fixos. O card passa a ser: respiro de 28 no
     topo, 120 de zona da ilustração, 18 até o texto e 24 embaixo. Assim o
     espaço entre ícone e título é sempre o mesmo, tenha o título uma linha ou
     duas — com altura fixa e título ancorado na base, o de uma linha ficava
     com um buraco de 47px no meio. */
  .cmp-card--243, .cmp-card--215 { height: auto; }
  .cmp-card                      { height: auto; padding: 166px 24px 24px; }

  /* Ilustrações maiores: a zona subiu de 87 para 120px de altura (+38%), que
     era o pedido de dar mais destaque a elas. */
  /* Altura fixa em vez de teto: as ilustrações achatadas (a dos documentos tem
     358×93) paravam nos 93 e abriam um vão de 45px até o texto, enquanto as
     demais fechavam em 19. Com `height` fixo e `width: auto` todas ocupam os
     mesmos 120 — o excesso de largura o card já corta, como faz no desktop. */
  .cmp-card__ilustra { max-width: none; width: auto; height: 120px; top: 28px; }

  /* As cenas têm 289–600px de largura com os filhos em coordenadas absolutas
     do frame original. O card corta, mas o que aparecia era o miolo ampliado
     — um escudo gigante no lugar da ilustração inteira.

     Escala mantendo a centralização: `.cmp-card__cena` já usa
     translateX(-50%), e o translate PRECISA vir antes do scale, senão o
     deslocamento também é escalado e a peça salta para o lado. */
  /* .77 em vez de .56: 155 × .77 = 119, preenchendo a zona de 120. */
  .cmp-card__cena { top: 28px; transform: translateX(-50%) scale(.77); transform-origin: top center; }

  /* ── Três cards pedem tratamento próprio ─────────────────────────────────
     O `padding-top` de cada um acompanha a zona da sua arte, para o respiro
     até o título continuar sendo os mesmos 18px de todos os outros. */

  /* Fileiras de ícones: em escala 1 os ícones ficam do mesmo tamanho do
     desktop, que é o máximo sem recortar — a fileira tem 292,5 e cabe nos 310
     de área útil do card. Zona 28 + 155 + 18 = 201. */
  .cmp-cena-icones                  { transform: translateX(-50%) scale(1); }
  .cmp-card:has(.cmp-cena-icones)   { padding-top: 201px; }

  /* "Melhoria contínua": os arcos giram em torno do R. Colado no topo o giro
     tem para onde acontecer; com 28px de respiro o movimento ficava preso.
     Zona 0 + 155 + 18 = 173. */
  .cmp-cena-mel                     { top: 0; transform: translateX(-50%) scale(1); }
  .cmp-card:has(.cmp-cena-mel)      { padding-top: 173px; }

  /* "Prevenção de fraudes": o escudo com a malha de linhas é um desenho de
     canto — encostado no topo e na direita ele se completa, centralizado fica
     solto. Também cresce de 120 para 150. Zona 0 + 150 + 18 = 168. */
  .cmp-card--fraudes                { padding-top: 168px; }
  .cmp-card--fraudes .cmp-card__ilustra {
    top: 0;
    right: 0;
    left: auto;
    height: 150px;
    transform: none;
  }
  /* A cena é absoluta, então não empurra layout; o corte é do card. */
  .cmp-card { overflow: hidden; }
  /* Títulos com largura fixa do desktop (151/223/185px) — no card estreito
     isso deixava a linha quebrando cedo demais. */
  .cmp-card__titulo--w151,
  .cmp-card__titulo--w223,
  .cmp-card__titulo--w185 { width: auto; }

  .cmp-message         { padding: 60px var(--section-px) 0; overflow: hidden; }
  .cmp-message__bloco  { padding: 24px; gap: 24px; }
  /* Fundo de 1890px e ícones ancorados em calc(50% ± 456px): fora da tela. */
  .cmp-message__fundo  { width: 100%; height: auto; object-fit: cover; }
  .cmp-message__icone  { display: none; }
  /* As ilustrações têm até 599px e só cabem porque o card corta — mas a caixa
     delas ainda conta para o overflow do documento. O teto de altura vive no
     bloco dos cards, mais acima neste arquivo. */
  .cmp-card            { overflow: hidden; }

  .cmp-canal      { grid-template-columns: minmax(0, 1fr); padding: 60px var(--section-px); gap: 32px; }
  /* Arte de 580×381 com filhos em coordenadas absolutas: `max-width` encolhe
     a caixa mas não os filhos. Escala o conjunto e recupera o espaço. */
  /* O quadro tem 580×381 e o desenho ocupa x 79..501 dele — 79px de vazio de
     cada lado, simétricos. Como são simétricos, centralizar o QUADRO já
     centraliza o desenho; não é preciso calcular deslocamento nenhum.

     Tentativas anteriores usavam `transform-origin: top left` mais margens
     acertadas para uma largura de tela específica. Fora dela o desenho saía
     do lugar — foi o que aconteceu aí.

     Aqui não há número dependente da largura:
       margin-left/right  −290 = metade de 580  → o quadro deixa de ocupar
                                                   largura de layout e fica
                                                   centrado em torno de zero
       left: 50%                                → leva o centro do quadro ao
                                                   centro do container, seja
                                                   ele de que largura for
       transform-origin: top center             → a escala não desloca nada
       margin-bottom −152 = 381 × (1 − .60)     → devolve a altura que o
                                                   `transform` não devolve

     A escala é .60 e não mais: o desenho fica com 253px, o que deixa folga
     confortável mesmo na tela de 360 (a mais estreita que vale a pena
     considerar) — cabe sem encostar nas bordas em qualquer largura. */
  .cmp-canal__arte {
    position: relative;
    width: 580px;
    max-width: none;
    left: 50%;
    margin-left: -290px;
    margin-right: -290px;
    margin-bottom: -152px;
    /* Propriedade `scale`, não `transform: scale()`. A arte também é
       `.cmp-fade`, e o fade de entrada anima `transform: translateY(18px)` —
       as duas regras disputavam a MESMA propriedade e a escala simplesmente
       não aparecia. `scale` é independente e compõe com o `transform`. */
    scale: .60;
    transform-origin: top center;
  }
  /* De 600 a 899 há largura de sobra (506px de conteúdo já em 600), então a
     arte cresce — senão ela despencaria de 580px em 900 para 253px em 899. */
  @media (min-width: 600px) {
    .cmp-canal__arte { scale: .90; margin-bottom: -38px; }
  }

  /* ── Dynatrace, Consultoria, Observabilidade (.dyn-proc) ──────────────── */
  /* Um componente, 6 seções, 3 páginas. */
  .dyn-proc        { grid-template-columns: minmax(0, 1fr); padding: 60px var(--section-px); gap: 32px; }
  .dyn-proc__lista { gap: 16px; }
  .dyn-item        { width: 100%; }
  .dyn-proc__img.dyn-proc__img--fixa { height: 320px; }
  /* No desktop a variante invertida usa `order` para pôr a imagem à esquerda.
     No mobile isso deixaria a imagem antes do texto: desfaz. */
  .dyn-proc--invertida .dyn-proc__col { order: -1; }
  .dyn-proc--invertida .dyn-proc__img { order: 0; }

  .dyn-hero__container { padding: 40px var(--section-px) 60px; }
  /* O ícone é absoluto em left:388/top:78 — cai sobre o título reflowado. */
  .dyn-hero__icone { display: none; }
  /* O brilho é uma elipse de 881×935 com blur(100px): caro de pintar no
     celular e invisível depois que a arte vira um bloco recortado. */
  .dyn-hero__brilho { display: none; }

  /* A arte do dashboard estava escondida e o hero ficava um retângulo chapado.
     Ela volta — mas como bloco no fluxo, DEPOIS do texto (regra "texto antes
     da imagem"), recortada numa faixa em vez de flutuar sobre o título. */
  .dyn-hero { display: flex; flex-direction: column; }
  .dyn-hero__header    { order: 1; }
  .dyn-hero__container { order: 2; }
  /* Sangra de borda a borda e encosta na base da seção. Antes era uma faixa de
     190px com margem de 16 nas laterais e 48 embaixo, e o dashboard entrava a
     150% deslocado — o que recortava o painel dos dois lados e deixava as
     três folgas que apareciam no celular. */
  .dyn-hero__arte {
    order: 3;
    position: static;
    height: auto;
    margin: 0;
    overflow: hidden;
    border-radius: 0;
  }
  .dyn-hero__dashboard {
    display: block;
    position: static;
    left: auto; top: auto;
    width: 100%;
    max-width: none;
    height: auto;
    transform: none;
  }

  /* ── Consultoria ──────────────────────────────────────────────────────── */
  /* O gradiente de 270deg deixa a faixa transparente justo sobre o texto em
     telas estreitas; na vertical o contraste volta. */
  .con-hero::before,
  .obs-hero::before {
    background: linear-gradient(180deg, rgba(0, 74, 138, .92) 0%, rgba(0, 74, 138, .75) 100%);
  }
  .con-hero__container { padding: 40px var(--section-px) 60px; }
  .con-solucao__main   { padding: 24px 16px; gap: 0; justify-content: center; }
  .con-solucao__bloco  { padding: 24px; gap: 24px; }
  /* ── Painel do fluxo (Figma 8318:1830, 580×725) ──────────────────────────
     O desenho é uma CORRENTE HORIZONTAL: alerta → Dynatrace → causa → cards,
     ocupando 462px só de conteúdo. A saída anterior era `scale(.6)`, que cabia
     na tela mas reduzia as peças a 60% — os rótulos "Alerta detectado" e
     "Analisando com Dynatrace" viravam texto de 8px, ilegível.

     Aqui a corrente é REMONTADA na vertical e cada peça volta ao tamanho
     natural do Figma, do mesmo tamanho que no desktop. Os conectores SVG (que
     são curvas desenhadas para o percurso horizontal) saem de cena e viram
     traços verticais em CSS, com os mesmos tons do gradiente original. */
  .con-painel {
    width: 100%;
    max-width: none;
    height: 792px;
    transform: none;
    margin: 0;
  }
  .con-painel__veu { width: 100%; }

  /* Corrente vertical, tudo centralizado na coluna */
  .con-painel__alerta {
    left: 50%; margin-left: -59px;    /* 118 / 2 */
    top: 28px;
  }
  .con-painel__dynatrace {
    left: 50%; margin-left: -52.5px;  /* 105 / 2 */
    top: 190px;
  }
  .con-painel__causa {
    left: 50%; margin-left: -59px;
    top: 384px;
  }

  /* Conectores: os SVGs originais desenham curvas em "S" para o trajeto
     horizontal — girados ficariam tortos. Viram três traços verticais com o
     mesmo gradiente (#D5EAFF → #8BD7FC no meio, #4EA05D ao chegar na causa). */
  .con-con { display: none; }
  .con-painel::before,
  .con-painel::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    z-index: 3;
    border-radius: 2px;
  }
  .con-painel::before {            /* alerta → Dynatrace */
    top: 140px; height: 42px;
    background: linear-gradient(180deg, #d5eaff 0%, #8bd7fc 100%);
  }
  .con-painel::after {             /* Dynatrace → causa */
    top: 336px; height: 40px;
    background: linear-gradient(180deg, #8bd7fc 0%, #4ea05d 100%);
  }

  /* Pilha de notificações: os dois cards de trás existem só para dar volume à
     pilha e, lado a lado, não cabem em 358px. Fica o da frente, centralizado e
     ajustado à largura da tela. */
  /* `> .classe` porque consultoria.css tem `.con-painel > img { display: block }`
     — seletor de elemento, especificidade 0,1,1, que vence a classe sozinha. */
  .con-painel > .con-painel__card--esq,
  .con-painel > .con-painel__card--dir { display: none; }
  /* O card VISÍVEL não fica no meio do próprio arquivo: dentro dos 493×450 ele
     ocupa 275×326 a partir de x=8, ou seja, 20,6% à esquerda do centro da
     imagem — o resto é a sombra longa, que se estende só para a direita.
     Centralizar a IMAGEM deixava o card visivelmente torto.

     Os 94% de largura são o limite para a sombra ainda caber: acima disso ela
     é cortada e o corte aparece como uma linha reta. Os 22,35% de recuo põem
     o centro do card exatamente no centro do painel:
        centro do card = 22,35% + 29,41% × 94% = 50%                          */
  .con-painel > .con-painel__card--frente {
    left: 22.35%;
    top: 500px;
    width: 94%;
    height: auto;
    margin-left: 0;
    transform: none;
  }

  /* Os conectores SVG estão ocultos, mas `display: none` não para o relógio
     dos `<path>` de dentro — daí o `animation: none` explícito neles. */
  .con-con--a path, .con-con--b path, .con-con--c svg { animation: none; }

  /* ── Coreografia linear (ciclo de 7s) ─────────────────────────────────────
     No desktop as duas pontas acendem juntas porque os fluxos CONVERGEM no
     Dynatrace. Aqui a corrente é vertical, então a sequência é direta:
        0,0s  alerta        2,4s  traço desce até a causa
        0,7s  traço desce   3,2s  causa acende em verde
        1,6s  Dynatrace     4,2s  card #incidentes                            */
  .con-painel__alerta       { animation: con-pulso      7s ease-in-out infinite; animation-delay: 0s;   }
  .con-painel__dynatrace    { animation: con-cresce     7s ease-in-out infinite; animation-delay: 1.6s; }
  .con-painel__causa        { animation: con-pulso-ok   7s ease-in-out infinite; animation-delay: 3.2s; }
  .con-painel__card--frente { animation: con-cresce-card 7s ease-in-out infinite; animation-delay: 4.2s; }

  /* Os traços são desenhados de cima para baixo por scaleY — mais barato que
     animar altura, que forçaria layout a cada quadro. */
  .con-painel::before,
  .con-painel::after {
    transform-origin: top center;
    animation: con-desce 7s ease-in-out infinite;
  }
  .con-painel::before { animation-delay: .7s;  }
  .con-painel::after  { animation-delay: 2.4s; }

  @keyframes con-desce {
    0%        { transform: scaleY(0); opacity: 1; }
    12%, 90%  { transform: scaleY(1); opacity: 1; }
    100%      { transform: scaleY(1); opacity: 0; }
  }
  /* Rede de segurança contra rolagem horizontal em larguras incomuns. */
  .dyn-proc--invertida { overflow: hidden; }

  /* ── Observabilidade ──────────────────────────────────────────────────── */
  .obs-hero__container   { padding: 40px var(--section-px) 60px; }
  .obs-solucao__main     { padding: 24px 16px; }
  /* O logo vem antes do card no DOM; `order` põe o texto primeiro. */
  .obs-solucao__content  { flex-direction: column; align-items: stretch; gap: 24px; }
  .obs-solucao__logo     { order: 2; margin: 0 auto; }
  .obs-solucao__bloco    { padding: 24px; gap: 24px; width: 100%; }
  .obs-h2                { width: 100%; }

  /* ── Blog ─────────────────────────────────────────────────────────────── */
  .blg-destaques       { padding: 60px var(--section-px); gap: 32px; }
  /* `696px` de track rígido é o pior estouro do tema — quebra antes de 960. */
  .blg-destaques__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .blg-dest-main__img  { height: 200px; }
  /* Aqui a thumb vem antes do texto: `column-reverse` põe título e link acima. */
  .blg-small__row      { flex-direction: column-reverse; gap: 16px; }
  .blg-small__img,
  .blg-small__info     { flex: 0 0 auto; width: 100%; }
  .blg-small__img      { height: 180px; }
  .blg-small__info     { padding-left: 0; }

  .blg-conteudos, .blg-cat { padding: 60px var(--section-px); gap: 32px; }
  .blg-conteudos__topo { flex-direction: column; align-items: stretch; gap: 20px; }
  /* Empilhar os três campos deixava a barra com 3 caixas altas ocupando meia
     tela antes do primeiro card. A busca fica na linha de cima, ocupando tudo,
     e os dois seletores dividem a linha de baixo. */
  .blg-filtros {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }
  .blg-campo--busca { grid-column: 1 / -1; width: 100%; }
  .blg-campo        { padding: 12px 14px; font-size: 13px; }
  .blg-sel__btn     { padding: 12px 14px; gap: 8px; }
  .blg-sel__valor   { overflow: hidden; text-overflow: ellipsis; }
  .blg-sel__painel  { left: 0; right: 0; min-width: 0; }
  .blg-grid, .blg-cat__cards { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .blg-cat__topo       { flex-direction: column; align-items: flex-start; gap: 16px; }
  .blg-card__img       { height: 200px; }
  .blg-status          { margin-top: -16px; }
  .blg-pag             { flex-wrap: wrap; gap: 8px; }
  .blg-pag .page-numbers { width: 40px; height: 40px; }
  .blg-mat__capa       { height: 180px; }

  .blg-cab             { padding: 60px var(--section-px); }
  .blg-cab__linha      { flex-wrap: wrap; gap: 16px; }
  .blg-cab__avatar img { width: 56px; height: 56px; }
  /* Tela de busca: título e campo lado a lado só no desktop. Em 358px o campo
     ficaria com ~120px — empilha, com o campo em toda a largura. */
  .bsc-cab__linha      { flex-direction: column; align-items: stretch; gap: 20px; }
  .bsc-campo           { max-width: none; }

  /* ── Busca ────────────────────────────────────────────────────────────── */
  .bsc-hero        { padding: 60px var(--section-px); }
  .bsc-form        { flex-direction: column; padding: 8px; gap: 8px; }
  .bsc-form__lupa  { display: none; }
  .bsc-form input[type="search"] { padding: 14px 12px; }
  .bsc-atalhos     { justify-content: flex-start; }

  /* ── Single ───────────────────────────────────────────────────────────── */
  .sgl-hero            { padding: 60px var(--section-px); }
  .sgl-hero__inner     { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sgl-hero__img       { height: 200px; }
  .sgl-meta            { flex-wrap: wrap; gap: 12px; }
  .sgl-conteudo        { padding: 60px var(--section-px); }
  .sgl-conteudo__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .sgl-corpo h2        { font-size: 24px; }
  .sgl-corpo h3        { font-size: 20px; }
  .sgl-share           { flex-direction: column; height: auto; gap: 16px; padding: 24px; }
  .sgl-autor           { padding: 24px; gap: 24px; }
  .sgl-cta             { padding: 40px 24px 24px; }

  /* ── Rodapé ───────────────────────────────────────────────────────────── */
  /* O corpo é uma linha de 354px + 4 colunas: em 390 vira coluna única, e a
     borda da direita (que separava o texto das colunas) passa para baixo. */
  .ft-corpo  { flex-direction: column; gap: 32px; padding-bottom: 24px; }
  /* Empilhado, a divisória sai do lado direito e vai para baixo. Como no
     desktop ela é `box-shadow` inset (stroke INSIDE do Figma), aqui é a mesma
     coisa girada — `border-right: 0` não desligaria nada. */
  .ft-sobre  {
    width: 100% !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .15);
    padding-right: 0 !important;
    padding-bottom: 32px;
  }
  footer .ft-links  { flex-wrap: wrap; gap: 28px 32px; }
  .ft-links > div { flex: 1 1 40%; min-width: 130px; }
  /* Selos: quebram em duas linhas e encolhem para caber três por linha. */
  footer .ft-selos__linha { gap: 20px; }
  .ft-selos__img   { height: 56px; }
  .ft-selos__texto { font-size: 13px; }
  /* Linha legal: os links empilham à esquerda e o crédito vai para baixo. */
  .ft-legal { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ft-legal > div:first-child { gap: 12px 20px; }
  /* Empilhados, os separadores verticais não fazem sentido. */
  .ft-legal .ft-sep,
  .ft-legal .ft-sep--l { box-shadow: none; padding-left: 0; padding-right: 0; }

  /* ── Políticas ────────────────────────────────────────────────────────── */
  .pol-conteudo { padding: 60px var(--section-px); }
  .pol-corpo table { font-size: 14px; }
  /* Sumário deixa de ser coluna e vai para cima do texto. `position: static`
     é obrigatório: grudado no topo, ele comeria metade da tela do celular. */
  .pol-layout   { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pol-sumario  { position: static; }
  .pol-sumario__caixa { max-height: 260px; padding: 20px; }
  .pol-corpo h2 { scroll-margin-top: 88px; }
}