html {
  scroll-behavior: smooth;
}

.contact__tabs li:nth-child(2).is-active .contact__tabs-bar {
  background: #b5301a !important;
}

/* mobile/tablet: sem "pressionar e arrastar" nem auto-scroll a lutar
   contra o dedo — a galeria e a pilha de marcas do "O Grupo" deixam de
   capturar o toque (patch em page-*.js) e passam a deslizar por scroll
   nativo do próprio browser, como o resto do site. cursor:grab só faz
   sentido em rato (desktop); em ecrãs de toque não há cursor nenhum,
   mas fica a limpar por clareza. */
@media (max-width: 1024px) {
  .gallery {
    touch-action: auto !important;
    cursor: auto !important;
  }
}

/* mobile: mais respiro entre secções e blocos — pedido explícito
   ("deixar o site respirar um pouco mais"). Só aumenta o mínimo do
   clamp() já existente em cada regra (o valor que realmente se aplica
   em ecrãs estreitos); não mexe em tablet/desktop. */
@media (max-width: 767px) {
  .company-section__body {
    padding-top: 64px !important;
    padding-bottom: 104px !important;
  }
  .company-section__eyebrow {
    margin-bottom: 64px !important;
  }
  .company-section__extra {
    margin-top: 88px !important;
  }
  .company-section__gallery {
    padding-bottom: 88px !important;
  }
  .group-intro {
    padding-top: 64px !important;
  }
  .contact {
    padding-top: 80px !important;
    padding-bottom: 88px !important;
  }
  .contact__grid {
    gap: 48px !important;
  }
}

.scroll-motion {
  opacity: 0;
  transform: translate3d(0, 42px, 0) scale(0.985);
  filter: blur(3px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.7s ease;
  transition-delay: calc(var(--motion-order, 0) * 70ms);
  will-change: transform, opacity, filter;
}

.scroll-motion.is-in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  .hero {
    min-height: 230vh !important;
  }

  /* -130vh, não -110vh: o hero tem 230vh de altura total = 100vh de
     conteúdo visível + 130vh de "orçamento" de scroll consumido pelo
     dissolver (ver comentário em Hero.jsx) — esta margem tem de ser
     EXATAMENTE esse excedente, ou "O Grupo" ainda não está no lugar
     certo quando a máscara do hero acaba de abrir, e o que fica por
     baixo (fundo/grelha do puzzle) pisca por uma fração de segundo no
     canto onde a máscara ainda não cobre — glitch real, confirmado
     em vídeo (triângulo branco no canto inferior direito do hero a
     meio do scroll). */
  .group-intro {
    margin-top: -130vh !important;
  }

  .group-intro__mark {
    width: clamp(118px, 10vw, 150px) !important;
    height: auto !important;
    filter: drop-shadow(0 8px 18px rgba(23, 23, 26, 0.08));
  }

  .hero__logo {
    width: clamp(155px, calc(14vw + 5px), 271px) !important;
  }

  .group-intro__pin-outer {
    margin-top: 28px !important;
  }

  .group-intro__logos-frame {
    transform: translateY(calc(-12vh + (20vh * var(--story-progress, 0))));
  }

  .hero__logo-word {
    overflow: visible;
  }

  .hero__logo-icons {
    width: fit-content !important;
    justify-content: flex-end !important;
    gap: clamp(2px, 0.2vw, 3px) !important;
    margin-top: clamp(-8px, -0.4vw, -5px) !important;
  }

  .hero__logo-icons img {
    height: clamp(16px, 1.75vw, 25px) !important;
  }

  .hero__logo-icons img:nth-child(3),
  .hero__logo-icons img:nth-child(4) {
    margin-left: clamp(-8px, -0.56vw, -5.12px);
  }

  .splash__marks {
    gap: clamp(5px, 0.6vw, 8px) !important;
  }

  .splash__mark:nth-child(3),
  .splash__mark:nth-child(4) {
    margin-left: clamp(-20px, -1.92vw, -12.8px);
  }

  .group-intro {
    padding-bottom: clamp(36px, 4vw, 72px) !important;
  }

  .group-intro__pin-outer {
    height: 130vh !important;
    margin-bottom: 0 !important;
  }

  .hero__sticky,
  .hero__inner,
  .group-intro__pin-inner,
  .group-intro__puzzle-stage,
  .group-intro__logos {
    backface-visibility: hidden;
    transform-style: preserve-3d;
  }

  .group-intro__puzzle-piece,
  .group-intro__link {
    transform-origin: 50% 50%;
  }

  .group-intro__link {
    contain: layout style;
  }

  #repolho,
  #jrc,
  #manugr,
  #britazul,
  #beira-calcarios {
    scroll-margin-top: 56px;
  }
}

/* Mobile: an editorial carousel instead of a loose pile of cards. */
@media (max-width: 767px) {
  .group-intro {
    padding-bottom: clamp(76px, 22vw, 108px) !important;
  }

  .group-intro__pin-outer {
    margin-top: 44px !important;
  }

  .group-intro__pin-inner {
    padding: 0 0 4px !important;
  }

  .group-intro__logos-frame {
    width: calc(100% + 24px);
    margin-right: -24px;
    overflow: hidden;
    /* folga extra por baixo: a caixa da pilha (aspect-ratio abaixo)
       segue só a proporção da bandeira/logo — a etiqueta (nome da
       empresa) vive por baixo dela, em fluxo normal, e sem esta folga
       ficava fora da caixa que este "overflow:hidden" corta (bug
       real: primeira letra, ou a etiqueta toda, cortada). */
    padding-bottom: 60px;
  }

  .group-intro__logos {
    --cell-w: min(76vw, 330px) !important;
    width: var(--cell-w) !important;
    aspect-ratio: 250 / 382 !important;
    margin: 0 0 0 clamp(4px, 2vw, 10px) !important;
    overflow: visible;
    isolation: isolate;
    cursor: grab;
  }

  .group-intro__logos:active {
    cursor: grabbing;
  }

  .group-intro__cell {
    opacity: 0;
    pointer-events: none;
    transform-origin: 12% 50% !important;
    transition:
      transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.48s ease,
      filter 0.72s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .group-intro__cell.is-front {
    z-index: 5;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg) !important;
    filter: drop-shadow(0 22px 32px rgba(23, 23, 26, 0.12));
  }

  .group-intro__cell[style*="--depth: 1"] {
    z-index: 4;
    opacity: 0.72;
    pointer-events: auto;
    transform: translate3d(18%, 3.5%, 0) scale(0.94) rotate(1deg) !important;
    filter: saturate(0.75);
  }

  .group-intro__cell[style*="--depth: 2"] {
    z-index: 3;
    opacity: 0.28;
    pointer-events: auto;
    transform: translate3d(32%, 7%, 0) scale(0.88) rotate(1.8deg) !important;
    filter: saturate(0.45);
  }

  .group-intro__cell[style*="--depth: 3"],
  .group-intro__cell[style*="--depth: 4"] {
    z-index: 1;
    opacity: 0;
    transform: translate3d(42%, 10%, 0) scale(0.84) !important;
  }

  .group-intro__link {
    position: relative;
  }

  /* a barra tem de acompanhar só a caixa da imagem (".group-intro__flag",
     o cartão branco com o corte) — presa ao ".group-intro__link" (que
     inclui também o nome por baixo), "height:100%" media a altura do
     link INTEIRO e a barra continuava bem para lá do fundo do cartão,
     por cima do espaço em branco e a tocar quase no nome (bug real,
     visto em captura: a linha "sai" do cartão). Presa ao próprio
     ".group-intro__flag" (que já é position:relative, para o SVG/
     imagem lá dentro), a barra fica exatamente do tamanho do cartão,
     nunca mais, nunca menos. */
  .group-intro__cell.is-front .group-intro__link .group-intro__flag::before {
    content: "";
    position: absolute;
    z-index: 3;
    left: -1px;
    top: 0;
    width: 3px;
    height: 100%;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: 50% 0;
    animation: mobile-brand-accent 0.62s 0.12s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* jrc e manugr cortam o cartão do lado ESQUERDO (as outras 3 marcas
     cortam do lado direito, por isso a borda esquerda delas vai
     sempre de cima a baixo) — presa ao "100%" da caixa retangular, a
     barra continuava a sair por cima (jrc, corte no canto superior-
     esquerdo) ou por baixo (manugr, corte no canto inferior-esquerdo)
     da forma visível do cartão. Percentagens tiradas diretamente do
     "d" do SVG de cada marca (flagShape, GroupIntro.jsx): jrc corta a
     83.7891/333 do topo; manugr corta a 247.836/332 do fundo. */
  .group-intro__cell.is-front a[href$="#jrc"] .group-intro__flag::before {
    top: 25.2%;
    height: 74.8%;
  }
  .group-intro__cell.is-front a[href$="#manugr"] .group-intro__flag::before {
    top: 0;
    height: 74.6%;
  }

  .group-intro__link p {
    margin-top: 17px !important;
    font-size: 12px !important;
    letter-spacing: 0.9px !important;
    /* recuo para nunca ficar por baixo da barra (::before, 3px de
       largura, left:-1px) — sem isto, nomes que começam por uma letra
       estreita (ex.: "Inertes") ficavam com essa letra completamente
       tapada pela barra (bug real: "Inertes" a aparecer como
       "Nertes"); nomes com letra inicial mais larga escondiam o mesmo
       problema por sorte, não porque estivesse corrigido. */
    padding-left: 8px !important;
  }

  .group-intro__cell:not(.is-front) .group-intro__link p {
    opacity: 0;
    transform: translateY(-5px);
  }

  .group-intro__dots {
    display: none !important;
  }

  .group-intro__mobile-nav {
    display: none !important;
  }

  @keyframes mobile-brand-accent {
    to { transform: scaleY(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .scroll-motion,
  .scroll-motion.is-in-view {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .group-intro__cell {
    transition: none !important;
  }

  .group-intro__cell.is-front .group-intro__link .group-intro__flag::before {
    animation: none;
    transform: scaleY(1);
  }
}