/* ==========================================================================
   victoou.com — mobile.css
   Adaptação para telas pequenas. Carregado por ÚLTIMO em todas as páginas do
   site (o painel /admin não usa este arquivo).

   Por que um arquivo só, e não media queries espalhadas: o projeto nasceu
   desktop-first sobre uma prancha de 2560px, e o documento pede que o layout
   de celular seja uma rodada própria. Mantendo tudo aqui, o desktop continua
   intocado e o comportamento móvel é lido de uma vez.

   Dois cortes:
     ≤ 1024px  tablet e paisagem de celular — colunas viram pilha
     ≤  600px  celular em pé — tipografia e respiro no menor tamanho útil

   Regra que guia as decisões: nenhuma imagem larga sobrevive à vertical. As
   capas 16:9 viram 4:3 ou 1:1, os fundos ganham posição própria e os
   carrosséis passam a rolar com o dedo em vez de depender de setas.
   ========================================================================== */

/* ==========================================================================
   1. BASE — respiro e rolagem por toque
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --gutter: 30px;
    --content-w: 100%;
  }

  /* o scroll com inércia do main.js é desligado em toque (ponteiro grosso);
     aqui o navegador cuida disso nativamente */
  html { scroll-behavior: smooth; }

  /* nada de largura fixa herdada da prancha: tudo cabe na tela */
  .container { width: calc(100% - var(--gutter) * 2); }
}

@media (max-width: 600px) {
  :root { --gutter: 22px; }
}

/* ==========================================================================
   2. HEADER — logotipo ao centro, idioma por sigla, menu hambúrguer
   ========================================================================== */
@media (max-width: 1024px) {
  .header { padding: 20px 0 18px; }
  .header__inner {
    position: relative;
    height: auto;
    min-height: 44px;      /* a altura do hambúrguer manda na linha */
    align-items: center;
    gap: 12px;
  }
  /* o seletor herda align-self: flex-start do desktop (onde o dropdown cresce
     para baixo): no celular ele precisa acompanhar a linha */
  .language-change { align-self: center; }
  .header__right { align-items: center; }

  /* o pill "LET'S TALK" sai: no celular o menu já leva ao contato, e o espaço
     é melhor gasto no logotipo */
  .header__right .btn:not(.btn--menu) { display: none; }

  /* seletor de idioma reduzido à sigla — a bandeira já diz o resto */
  .language-change {
    width: auto;
    min-width: 0;
    padding: 0 10px;
  }
  .language-change__option { gap: 8px; min-height: 33px; }
  .language-change .slide { display: none; }
  /* a sigla vem de data-short, escrito por i18n.js ao pintar o seletor */
  .language-change__option::after {
    content: attr(data-short);
    font-weight: var(--w-medium);
    font-size: 15px;
    letter-spacing: 0.02em;
    color: var(--text-soft);
  }
  .language-change__option .icon { width: 15px; height: 15px; }
  .language-change__flag { width: 17px; height: 17px; }
  .drop-down { min-width: 96px; }

  /* logotipo no centro, um pouco menor */
  /* centrado na PÁGINA: com margin-inline auto ele centralizava no espaço que
     sobra entre o seletor de idioma e o hambúrguer, que têm larguras diferentes */
  .header__center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .header__logo { width: 42px; height: 42px; }

  /* hambúrguer: alvo de toque de 44px, como manda o mínimo de acessibilidade */
  .btn--menu {
    width: 46px;
    height: 44px;
    padding: 0;
    gap: 5px;
  }
  .btn--menu span { width: 20px; height: 2px; }
}

@media (max-width: 600px) {
  .header { padding: 16px 0 14px; }
  .header__logo { width: 38px; height: 38px; }
  .language-change { padding: 0 8px; }
  .language-change__option::after { font-size: 14px; }
}

/* ==========================================================================
   3. MENU OVERLAY — tela cheia
   ========================================================================== */
@media (max-width: 1024px) {
  .menu-overlay {
    width: 100%;
    border-left: 0;
    padding: 92px 0 48px;
  }
  .menu-overlay .container { width: calc(100% - 48px); margin-inline: 24px; }
  .menu-overlay__nav a { font-size: clamp(30px, 8vw, 44px); margin: 10px 0; }
  .menu-overlay__blocks { gap: 26px; margin-top: 36px; }
  .socials-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
}

/* ==========================================================================
   4. HOME
   ========================================================================== */
@media (max-width: 1024px) {
  /* --- hero: o wordmark manda na altura, o resto acompanha --- */
  .page-home .hero {
    min-height: 88svh;
    height: auto;          /* o desktop trava 100svh: no celular o conteúdo é
                              mais alto que a tela e ficaria cortado */
    max-height: none;
    padding: clamp(96px, 16svh, 150px) 0 0;
  }
  .page-home .hero__bg { inset: -3%; }
  .page-home .hero__phrase { font-size: clamp(15px, 3.6vw, 22px); }
  .page-home .hero__wordmark { font-size: clamp(64px, 21vw, 180px); }
  .page-home .hero__bottom { margin: 8px 0 clamp(20px, 4svh, 40px); }
  .page-home .hero__note { font-size: clamp(10px, 2.4vw, 14px); }
  .page-home .hero__logo { width: 40px; height: 40px; }
  .page-home .hero__logo .logo-mark { width: 40px; height: 40px; }

  /* --- about: a trilha alta não cabe no celular; o texto acende no lugar --- */
  .page-home .about { min-height: auto; padding: clamp(64px, 12svh, 110px) 0; }
  .page-home .about__inner {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    height: auto;
    justify-content: flex-start;
  }
  .page-home .about__eyebrow { position: static; right: auto; }
  .page-home .about__phrase { width: 100%; font-size: clamp(26px, 6.6vw, 40px); }

  /* --- last drops: o carrossel vira uma trilha que se arrasta --- */
  .page-home .last-drops { min-height: auto; padding: clamp(56px, 10svh, 96px) 0; }
  .page-home .last-drops__head { width: 100%; margin-left: 0; max-width: none; }
  .page-home .last-drops__title { font-size: clamp(38px, 10vw, 68px); }
  .page-home .last-drops__line--indent { margin-left: 0; }
  /* Os eyebrows são filhos das linhas do <h2>: soltá-los no fluxo os coloca
     DENTRO do título ("LATESTS / (PORTFOLIO) / (WORKS) / DROPS"). Continuam
     ancorados às palavras, só menores. */
  .page-home .last-drops__eyebrow,
  .page-home .last-drops__eyebrow-right { font-size: 10px; }
  .page-home .last-drops__eyebrow-right { left: calc(100% + 8px); }
  .page-home .last-drops__eyebrow { right: calc(100% + 10px); }
  .page-home .last-drops__copy { width: 100% !important; }

  .page-home .carousel { overflow-x: auto; scroll-snap-type: x mandatory; }
  .page-home .carousel::-webkit-scrollbar { display: none; }
  .page-home .carousel__track {
    position: static;
    display: flex;
    gap: 16px;
    height: auto;
    padding-inline: var(--gutter);
    width: max-content;
  }
  /* sem posicionamento por --slot: no toque a rolagem é o gesto natural */
  .page-home .carousel__track > .project-card {
    /* relative, não static: o card precisa continuar sendo o bloco de
       contenção do .project-card__clip — com static a capa resolvia contra a
       seção e cobria a lâmina inteira */
    position: relative;
    left: auto;
    margin-left: 0;
    transform: none;
    opacity: 1;
    filter: none;
    pointer-events: auto;
    scroll-snap-align: center;
    width: min(78vw, 420px);
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .page-home .last-drops__controls { width: 100%; margin-left: 0; flex-wrap: wrap; gap: 16px; }

  /* --- serviços: as fileiras viram cartões empilhados --- */
  .page-home .my-services { min-height: auto; padding: clamp(56px, 10svh, 96px) 0; }
  .page-home .my-services__head { flex-direction: column; gap: 10px; text-align: center; }
  .page-home .my-services__title { font-size: clamp(34px, 9vw, 62px); }
  .page-home .my-services__eyebrow:last-child { display: none; }
  .page-home .service-row { min-height: 108px; }
  .page-home .service-row__inner { gap: 20px; justify-content: space-between; }
  .page-home .service-row__title { font-size: clamp(24px, 6.4vw, 44px); }
  .page-home .service-row__link { font-size: 13px; }
  /* o estado expandido abre no toque, então precisa caber sem cortar */
  .page-home .service-row[data-expanded="true"] { min-height: 300px; }
  .page-home .service-row__panel { padding: 26px 0; }
  .page-home .service-row__tags { flex-wrap: wrap; justify-content: center; }

  /* --- clientes: intro em cima, cartões rolando embaixo --- */
  .page-home .clients { min-height: auto; padding: clamp(56px, 10svh, 96px) 0; }
  .page-home .clients__inner { flex-direction: column; gap: 34px; }
  .page-home .clients__intro { width: 100%; }
  .page-home .clients__phrase { font-size: clamp(26px, 6.6vw, 40px); }
  .page-home .clients__col { width: 100%; }
  .page-home .clients__carousel { overflow-x: auto; scroll-snap-type: x mandatory; }
  /* o transform da rotação automática briga com a rolagem por toque */
  .page-home .clients__carousel .carousel__track {
    gap: 16px;
    padding-inline: 0;
    transform: none !important;
  }
  .page-home .client-container { width: min(70vw, 300px); scroll-snap-align: start; }
  .page-home .client-container__photo { height: min(78vw, 420px); }
  .page-home .client-container__name { font-size: clamp(22px, 5.4vw, 34px); }

  /* --- insights: uma coluna --- */
  .page-home .insights { padding: clamp(56px, 10svh, 96px) 0; }
  .page-home .insights__head { flex-direction: column; align-items: flex-start; gap: 22px; }
  .page-home .insights__title { font-size: clamp(30px, 8vw, 50px); }
  .page-home .insights__grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 600px) {
  .page-home .hero__wordmark { font-size: clamp(52px, 22vw, 96px); }
  .page-home .carousel__track > .project-card { width: 86vw; }
  .page-home .client-container { width: 80vw; }
}

/* ==========================================================================
   5. COMPONENTES GLOBAIS — cartão de projeto, CTA, F.A.Q, rodapé
   ========================================================================== */
@media (max-width: 1024px) {
  /* --- cartão de projeto: proporção mais alta e tipo menor --- */
  .project-card__title { font-size: clamp(28px, 7vw, 54px); margin: 16px 0 22px; }
  .project-card__client,
  .project-card__service { font-size: clamp(12px, 3vw, 18px); }
  .project-card__meta { inset: 0 8%; font-size: clamp(11px, 2.8vw, 16px); }
  /* a etiqueta que segue o ponteiro não existe no toque */
  .project-card__cursor { display: none; }

  /* --- F.A.Q --- */
  .faq { min-height: auto; padding: clamp(56px, 10svh, 96px) 0; }
  .faq__inner { flex-direction: column; }
  .faq__head-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .faq__title { font-size: clamp(38px, 11vw, 72px); }
  .faq__list { width: 100%; }
  .ask-closed__trigger { font-size: clamp(17px, 4.4vw, 26px); padding-right: 40px; }
  .ask-closed { min-height: 78px; }
  .faq__answer p { font-size: clamp(15px, 4vw, 22px); }

  /* --- bloco de CTA: uma coluna, imagem atrás em posição própria --- */
  .work-toghether {
    min-height: auto;
    padding: clamp(56px, 10svh, 96px) 0;
    background-size: cover;
    background-position: center;
  }
  .work-toghether:not(.is-in) { background-size: cover; }
  .work-toghether__inner { flex-direction: column; gap: 34px; }
  .work-toghether__title { font-size: clamp(34px, 9vw, 64px); }
  .work-toghether__email { font-size: clamp(17px, 4.4vw, 26px); }
  .work-toghether__aside { width: 100%; }
  .work-toghether__copy { width: 100%; font-size: clamp(17px, 4.4vw, 26px); }
  .work-toghether__socials { flex-wrap: wrap; gap: 20px; }

  /* --- rodapé: wordmark em cima, dados embaixo --- */
  .footer { min-height: auto; }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 26px; padding: 34px 0; }
  .footer__wordmark { font-size: clamp(56px, 19vw, 150px); }
  .footer__info { align-items: flex-start; text-align: left; }
  .footer__copy { font-size: clamp(14px, 3.6vw, 22px); }
  .footer__legal { justify-content: flex-start; }
}

/* ==========================================================================
   6. /work
   ========================================================================== */
@media (max-width: 1024px) {
  .page-work .hero {
    min-height: 62svh;
    height: auto;
    max-height: none;
    padding: clamp(110px, 18svh, 180px) 0 clamp(48px, 8svh, 90px);
  }
  .page-work .hero__title { font-size: clamp(52px, 15vw, 130px); }
  .page-work .hero__note { font-size: clamp(13px, 3.4vw, 22px); }

  .page-work .works { min-height: auto; padding: clamp(48px, 9svh, 90px) 0; }
  .page-work .works__guides { display: none; }
  .page-work .works__filters { flex-wrap: wrap; gap: 12px; }
  .page-work .search-field { width: 100%; }
  .page-work .category-filter { width: 100%; }
  .page-work .category-filter__list { width: 100%; }
  .page-work .works__grid { grid-template-columns: 1fr; gap: 16px; width: 100%; }
  .page-work .works__grid .project-card { width: 100%; height: auto; aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   7. /about-me
   ========================================================================== */
@media (max-width: 1024px) {
  .page-about .hero {
    min-height: auto;
    height: auto;
    max-height: none;
    padding: clamp(110px, 18svh, 180px) 0 clamp(48px, 8svh, 90px);
  }
  .page-about .hero__title { min-height: 0; font-size: clamp(52px, 15vw, 130px); }
  /* a faixa sai da linha do "ME" e vira uma imagem própria abaixo do título */
  .page-about .hero__line--me { width: 100%; flex-wrap: wrap; gap: 14px; }
  .page-about .hero__strip {
    width: 100%;
    height: min(38vw, 180px);
    margin-top: 10px;
  }
  .page-about .hero__strip-img { position: static; width: 100%; height: 100%; }
  .page-about .hero__phrase {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: 26px;
    font-size: clamp(19px, 4.8vw, 30px);
    line-height: 1.32;
    text-align: left;
  }

  .page-about .services { min-height: auto; padding: clamp(56px, 10svh, 96px) 0; }
  .page-about .services__inner { flex-direction: column; gap: 30px; }
  .page-about .services__intro { width: 100%; margin-left: 0; }
  .page-about .services__title { font-size: clamp(26px, 6.6vw, 40px); }
  .page-about .services__copy { width: 100%; font-size: clamp(16px, 4.2vw, 22px); }
  .page-about .services__cards { flex-direction: column; gap: 14px; }
  .page-about .service-card { width: 100%; height: auto; min-height: 190px; padding: 24px; }
  .page-about .service-card__title { font-size: clamp(26px, 7vw, 44px); }

  .page-about .about-cta { min-height: auto; padding: clamp(56px, 10svh, 96px) 0; }
  .page-about .about-cta__inner { flex-direction: column; align-items: flex-start; gap: 30px; padding-bottom: 0; }
  .page-about .about-cta__title { font-size: clamp(34px, 9vw, 64px); }
  .page-about .about-cta__aside { width: 100%; }
  .page-about .about-cta__laurels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .page-about .laurel { max-width: none; height: 68px; }
  .page-about .about-cta__copy { width: 100%; font-size: clamp(16px, 4.2vw, 22px); }
}

/* ==========================================================================
   8. /contact
   ========================================================================== */
@media (max-width: 1024px) {
  /* height fixo (92svh) do desktop também precisa cair: empilhado, o conteúdo
     é mais alto que a tela e ficava cortado */
  .page-contact .hero {
    min-height: auto;
    height: auto;
    max-height: none;
    padding: clamp(110px, 18svh, 180px) 0 clamp(48px, 8svh, 90px);
  }
  .page-contact .hero__inner { flex-direction: column; gap: 34px; }
  .page-contact .hero__left { flex: none; width: 100%; }
  .page-contact .hero__titlerow { flex-wrap: wrap; gap: 12px; }
  .page-contact .hero__title { font-size: clamp(42px, 12vw, 90px); }
  .page-contact .hero__copy { width: 100%; font-size: clamp(17px, 4.4vw, 26px); }
  .page-contact .hero__rule,
  .page-contact .discord-block { max-width: none; }

  .page-contact .contact-form { flex: none; width: 100%; padding: 30px 22px 26px; }
  .page-contact .contact-form__row { flex-direction: column; gap: 0; }
  .page-contact .field--name,
  .page-contact .field--email { width: 100%; }
  .page-contact .field--email { margin-top: 26px; }
  .page-contact .contact-form__channel { flex-direction: column; gap: 0; }
  .page-contact .field--channel,
  .page-contact .field--handle { flex: none; width: 100%; }
  .page-contact .field--handle { margin-top: 22px; }
  .page-contact .contact-form__foot { flex-direction: column; align-items: flex-start; gap: 20px; }
  .page-contact .contact-form__terms { max-width: none; }
  .page-contact .contact-form__send { width: 100%; }
}

/* ==========================================================================
   9. /post/<slug> — página de projeto
   ========================================================================== */
@media (max-width: 1024px) {
  .page-project .hero {
    min-height: auto;
    height: auto;
    max-height: none;
    padding: clamp(110px, 18svh, 180px) 0 clamp(40px, 7svh, 80px);
  }
  .page-project .hero__inner { flex-direction: column; gap: 28px; }
  .page-project .hero__title { font-size: clamp(40px, 11vw, 96px); line-height: 1.02; }
  .page-project .hero__aside { width: 100%; }
  .page-project .hero__copy { width: 100%; font-size: clamp(17px, 4.4vw, 26px); }
  .page-project .hero__tags { flex-wrap: wrap; }

  /* vídeo principal: a proporção 16:9 cabe; as métricas quebram em linha */
  .page-project .main-project { min-height: auto; padding: clamp(40px, 7svh, 80px) 0; }
  .page-project .main-project__media { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .page-project .video-play { width: 66px; height: 66px; }
  .page-project .video-play svg { width: 26px; height: 26px; }
  .page-project .metrics { flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
  .page-project .metric-pill { height: 42px; font-size: clamp(14px, 3.6vw, 20px); }

  /* shorts: coluna única, cartões que rolam com o dedo */
  .page-project .shorts { min-height: auto; padding: clamp(48px, 9svh, 90px) 0; }
  .page-project .shorts__inner { flex-direction: column; gap: 30px; }
  .page-project .shorts__intro { width: 100%; }
  .page-project .shorts__title { font-size: clamp(30px, 8vw, 56px); }
  .page-project .shorts__copy { width: 100%; font-size: clamp(16px, 4.2vw, 22px); }
  .page-project .shorts__carousel { max-width: none; padding-bottom: 0; }
  .page-project .shorts__carousel .carousel__viewport { overflow-x: auto; scroll-snap-type: x mandatory; }
  .page-project .shorts__carousel .carousel__track { width: max-content; transform: none !important; }
  .page-project .shorts__carousel .short-card {
    flex: none;
    width: min(58vw, 260px);
    scroll-snap-align: center;
  }
  /* no toque não há hover: as métricas do short ficam sempre visíveis */
  .page-project .metrics--vertical { opacity: 1; transform: none; }
  .page-project .shorts__arrows { display: none; }

  /* detalhes e ferramentas */
  .page-project .project-details { min-height: auto; padding: clamp(48px, 9svh, 90px) 0; }
  .page-project .project-details__inner { flex-direction: column; gap: 26px; }
  .page-project .project-details__title { font-size: clamp(26px, 6.6vw, 40px); }
  .page-project .project-details__copy { width: 100%; font-size: clamp(18px, 4.6vw, 28px); }
  .page-project .tools { grid-template-columns: 1fr; }

  /* galeria: tudo em coluna, imagens em 4:3 */
  .page-project .others-assets { min-height: auto; padding: clamp(48px, 9svh, 90px) 0; }
  .page-project .asset--wide { width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .page-project .others-assets__pair { flex-direction: column; gap: 16px; }
  .page-project .asset--square { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .page-project .asset__title { font-size: clamp(24px, 6.4vw, 46px); }

  /* depoimento: foto em cima, texto embaixo */
  .page-project .depoiment { min-height: auto; padding: clamp(48px, 9svh, 90px) 0; }
  .page-project .depoiment__inner { flex-direction: column; gap: 26px; }
  .page-project .depoiment__photo { width: 100%; height: min(72vw, 380px); }
  .page-project .depoiment__body { width: 100%; }
  .page-project .depoiment__quote { font-size: clamp(20px, 5.2vw, 34px); }
  .page-project .depoiment__signature { width: 100%; font-size: clamp(24px, 6.4vw, 46px); line-height: 1.1; }

  /* mais projetos: mesma trilha arrastável da home */
  .page-project .last-drops { min-height: auto; padding: clamp(48px, 9svh, 90px) 0; }
  .page-project .last-drops__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .page-project .last-drops__title { font-size: clamp(34px, 9vw, 62px); }
  .page-project .last-drops .carousel { overflow-x: auto; scroll-snap-type: x mandatory; }
  .page-project .last-drops .carousel__track {
    position: static;
    display: flex;
    gap: 16px;
    height: auto;
    width: max-content;
  }
  .page-project .last-drops .carousel__track > .project-card {
    /* relative, não static: o card precisa continuar sendo o bloco de
       contenção do .project-card__clip — com static a capa resolvia contra a
       seção e cobria a lâmina inteira */
    position: relative;
    left: auto;
    margin-left: 0;
    transform: none;
    opacity: 1;
    filter: none;
    pointer-events: auto;
    scroll-snap-align: center;
    width: min(78vw, 420px);
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .page-project .last-drops__aside { align-items: flex-start; }

  /* CTA de fundo sólido nesta página */
  .page-project .work-toghether { min-height: auto; }
}

@media (max-width: 600px) {
  .page-project .shorts__carousel .short-card { width: 66vw; }
  .page-project .last-drops .carousel__track > .project-card { width: 86vw; }
}

/* ==========================================================================
   10. /blog e artigo
   ========================================================================== */
@media (max-width: 1024px) {
  .page-blog .hero,
  .page-post .hero { min-height: auto; padding: clamp(110px, 18svh, 180px) 0 clamp(36px, 6svh, 64px); }
  .page-blog .hero__title { font-size: clamp(44px, 13vw, 96px); }

  /* barra de filtros: busca em cima, tags rolando embaixo */
  .page-blog .posts__bar { flex-direction: column; align-items: stretch; gap: 16px; }
  .page-blog .search-field { width: 100%; }
  .page-blog .posts__filters { max-width: none !important; }
  .page-blog .posts__grid { grid-template-columns: 1fr; gap: 18px; }
  .tag-nav { display: none; }

  /* artigo: a coluna de leitura ocupa a largura útil */
  .page-post .post-head__col,
  .page-post .post__col,
  .page-post .post__body,
  .page-post .more-posts__head,
  .page-post .more-posts__grid { width: 100%; }
  .page-post .hero__title { font-size: clamp(28px, 7.4vw, 54px); }
  .page-post .hero__meta { gap: 8px 18px; }
  .page-post .post__cover { aspect-ratio: 4 / 3; }
  .page-post .post__body p,
  .page-post .post__body li { font-size: clamp(16px, 4.2vw, 21px); }
  .page-post .post__body h2 { font-size: clamp(22px, 5.6vw, 34px); margin-top: 38px; }
  .page-post .post__body h3 { font-size: clamp(18px, 4.8vw, 26px); }
  .page-post .post__body blockquote { padding: 20px 22px; }
  .page-post .post__body blockquote p { font-size: clamp(18px, 4.8vw, 28px); }
  .page-post .more-posts__head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .page-post .more-posts__head .btn { margin-left: 0; }
  .page-post .more-posts__title { font-size: clamp(28px, 7.4vw, 48px); }
  .page-post .more-posts__grid { grid-template-columns: 1fr; gap: 18px; }
  /* espaço de anúncio: banner largo não cabe em pé */
  .ad-slot__media { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   11. Páginas jurídicas e 404
   ========================================================================== */
@media (max-width: 1024px) {
  .page-legal .hero { min-height: auto; padding: clamp(110px, 18svh, 180px) 0 clamp(36px, 6svh, 64px); }
  .page-legal .hero__title { font-size: clamp(40px, 12vw, 86px); }
  .page-legal .legal__inner { flex-direction: column; gap: 34px; }
  .page-legal .legal__index { position: static; flex: none; max-width: none; }
  .page-legal .legal__lead { font-size: clamp(19px, 4.8vw, 30px); }
  .page-legal .clause__title { font-size: clamp(22px, 5.6vw, 34px); }
  .page-legal .clause p,
  .page-legal .clause li { font-size: clamp(16px, 4.2vw, 22px); }

  .page-404 .error__row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .page-404 .error__word { font-size: clamp(56px, 17vw, 130px); }
  .page-404 .error__note { position: static; width: 100%; top: auto; }
}

/* ==========================================================================
   12. Pop-up promocional — ancorado na base, sem cobrir a navegação
   ========================================================================== */
@media (max-width: 600px) {
  .promo { padding: 14px; }
  .promo__panel { width: 100%; }
  .promo__media { aspect-ratio: 3 / 2; }
  .promo__title { font-size: 22px; }
}

/* ==========================================================================
   13. Toque — o que depende de hover ganha um caminho no dedo
   ========================================================================== */
@media (hover: none) {
  /* o hover do cartão de projeto não existe: o estado de descanso é o que vale */
  .project-card__hover { opacity: 0; }
  /* etiquetas que seguem o ponteiro somem */
  .project-card__cursor,
  .post-card__view { display: none; }
  /* o depoimento do cliente aparece sem hover, alternado por toque no cartão */
  .client-container__quote { transition: opacity .4s var(--ease); }
}

/* --------------------------------------------------------------------------
   Carrossel de projetos no celular: as regras de desktop marcam .is-side /
   .is-active com uma classe a mais, então venciam a regra móvel e deixavam
   cards a 25%. Aqui a especificidade é igualada.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .page-home .carousel__track > .project-card.is-side,
  .page-home .carousel__track > .project-card.is-active,
  .page-project .last-drops .carousel__track > .project-card.is-side,
  .page-project .last-drops .carousel__track > .project-card.is-active {
    position: relative;
    left: auto;
    margin-left: 0;
    transform: none;
    opacity: 1;
    filter: none;
    pointer-events: auto;
  }
}

/* --------------------------------------------------------------------------
   Alturas fixas herdadas do desktop: no celular a caixa é mais estreita, o
   texto ocupa mais linhas e a altura travada corta o conteúdo.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .page-home .service-row,
  .page-home .service-row[data-expanded="true"] { height: auto; min-height: 0; }
  .page-home .client-container__photo { height: auto; aspect-ratio: 3 / 4; }
  .page-about .service-card { height: auto; min-height: 260px; }
  .page-project .short-card__media { height: auto; }
  .video-lightbox__stage { max-height: calc(100svh - 96px); }
}

/* --------------------------------------------------------------------------
   Respiro lateral: blocos que sangram até a borda ganham a mesma margem do
   container, para o conteúdo não encostar no vidro da tela.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .menu-overlay .container {
    width: calc(100% - var(--gutter) * 2);
    margin-inline: var(--gutter);
  }
  /* trilhas que rolam com o dedo: o primeiro e o último item respeitam a margem */
  .page-home .carousel__track,
  .page-home .clients__carousel .carousel__track,
  .page-project .shorts__carousel .carousel__track,
  .page-project .last-drops .carousel__track,
  .page-blog .posts__filters { padding-inline: var(--gutter); }
  .page-home .carousel,
  .page-home .clients__carousel,
  .page-project .shorts__carousel .carousel__viewport,
  .page-project .last-drops .carousel { margin-inline: calc(var(--gutter) * -1); }

  /* seções de largura cheia com conteúdo próprio */
  .page-home .service-row__inner,
  .page-work .works__filters,
  .page-project .metrics { padding-inline: var(--gutter); }
}