*{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:#101210;}
  a{cursor:pointer;}
  @keyframes mtmar{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  .plans-vp,[data-eventos]{scrollbar-width:none;-ms-overflow-style:none;}
  .plans-vp::-webkit-scrollbar,[data-eventos]::-webkit-scrollbar{display:none;}
  /* Mobile: nav mostra só logo + Login (âncoras somem pra não amontoar). */
  @media (max-width:720px){ .nav-anchor{display:none !important;} }
  /* Mobile: os cards dos carrosséis (.plans-vp) não podem encolher — sem isto o
     flex espreme os cards lado a lado e o texto quebra letra a letra (ilegível).
     Largura fixa que "espia" o próximo card, convidando ao swipe. */
  /* Setas do "Processo em 4 etapas": só existem no mobile (desktop é grid, sem scroll) */
  .met-nav{ display:none !important; }
  @media (max-width:720px){
    /* Carrosséis: 1 card inteiro por vez (sem metade do próximo aparecendo);
       navegação pelas setas. Snap obrigatório centraliza o card. */
    .plans-vp{ scroll-snap-type:x mandatory !important; }
    .plans-vp > *{ flex:0 0 100% !important; scroll-snap-align:center; }
    /* "O processo em 4 etapas" (grid no desktop) vira carrossel no mobile */
    .met-steps{ display:flex !important; grid-template-columns:none !important; overflow-x:auto; gap:16px; padding-bottom:6px; }
    .met-nav{ display:flex !important; }
    /* Setas dos carrosséis de texto (repertório, preços, processo): com card cheio elas
       sobrepunham o conteúdo. No mobile saem de cima do card e ficam embaixo, centradas. */
    [data-rep-prev],[data-rep-next],[data-price-prev],[data-price-next],[data-met-prev],[data-met-next],
    [data-show-prev],[data-show-next]{
      position:static !important; transform:none !important;
      display:inline-flex !important; margin:12px 7px 0 !important;
    }
    div:has(> [data-rep-prev]), div:has(> [data-price-prev]), div:has(> [data-met-prev]),
    div:has(> [data-show-prev]){ text-align:center; }
    /* o center acima é só pras setas — o conteúdo dos cards segue à esquerda (design original) */
    div:has(> [data-rep-prev]) > .plans-vp, div:has(> [data-met-prev]) > .plans-vp{ text-align:left; }
    /* destaque da modalidade: sem as setas nas bordas, o padding de 84px que as abrigava
       cai pro respiro normal; texto volta à esquerda */
    div:has(> [data-show-prev]) > div:first-child{ padding:0 20px !important; text-align:left; }
    /* CTAs verdes centralizados no mobile */
    div:has(> a[data-zap]){ justify-content:center !important; }
    div:has(> [data-show-cta]){ text-align:center; }
    /* Marcas do hero (MAP / U.Natural / Velcore): 3 colunas iguais, pra não quebrar 2+1
       em tela estreita. A largura vem da coluna; a logo acompanha sem distorcer
       (object-fit:contain no inline). */
    [data-hb="heroMarcas"]{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:12px; }
    [data-hb="heroMarcas"] > div{ width:auto !important; }
    [data-hb="heroMarcas"] img{ width:clamp(52px,17vw,72px) !important; height:clamp(52px,17vw,72px) !important; }
    /* Títulos display (Anton): os mínimos dos clamp() inline (46/30/26px) ficam
       gigantes em tela de 390px — quebram em 3 linhas coladas nas bordas.
       Aqui só o teto mobile muda; desktop segue o clamp() original. */
    h1[data-h="heroTitulo"]{ font-size:34px !important; }
    [data-hb="manifestoFrase"]{ font-size:22px !important; }
    h2{ font-size:24px !important; }
    h2[data-h="ctaTitulo"]{ font-size:32px !important; }
    h3{ font-size:19px !important; }
    h3[data-show-title]{ font-size:24px !important; }
  }