/* ==========================================================================
   Hewth — mobile.css
   Tudo aqui está dentro de @media (max-width: 1024px): telemóvel, iPad e
   tablets. Nada neste ficheiro chega ao desktop (≥1025px).

   Direção de arte
   ---------------
   O desktop vive do orb do cursor: o conteúdo "escondido" só aparece quando o
   rato passa por cima. Em touch isso não existe, por isso o mobile troca a
   revelação por hierarquia: tipografia grande alinhada à esquerda, filetes
   finos a separar blocos, numeração editorial e um acento vermelho usado com
   parcimónia. O conteúdo da .layer__red (que no desktop está por baixo da
   máscara) é reaproveitado em cartões "toca para ver" — assim nada se perde.

   Elementos com prefixo .m- são injetados pelos scripts js/mobile-*.js e só
   existem em mobile.
   ========================================================================== */

@media (max-width: 1024px) {

    /* ======================================================================
       1. Tokens e fundações
       ====================================================================== */
    :root {
        --m-gap: clamp(1.15rem, 5.4vw, 1.65rem);
        --m-header-h: 4rem;
        --m-section-y: clamp(3.75rem, 15vw, 5.75rem);
        --m-ink: #0d0d0d;
        --m-ink-soft: rgba(13, 13, 13, 0.62);
        --m-ink-mute: rgba(13, 13, 13, 0.38);
        --m-ink-ghost: rgba(13, 13, 13, 0.16);
        --m-accent: #f53636;
        --m-surface: #e0dede;
        --m-surface-raised: #d5d3d2;
        --m-inverse: #0d0d0d;
        --m-rule: rgba(13, 13, 13, 0.18);
        --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
        --m-safe-l: env(safe-area-inset-left, 0px);
        --m-safe-r: env(safe-area-inset-right, 0px);
        --m-safe-b: env(safe-area-inset-bottom, 0px);
        --m-safe-t: env(safe-area-inset-top, 0px);
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html,
    body {
        -webkit-overflow-scrolling: touch !important;
        -webkit-tap-highlight-color: transparent;
        -webkit-text-size-adjust: 100%;
        height: auto !important;
        max-width: 100%;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-y !important;
    }

    img,
    video,
    svg {
        max-width: 100%;
    }

    .main-layer,
    .layer,
    .container,
    .hero,
    .about,
    .work,
    .client,
    .contact {
        touch-action: pan-y !important;
    }

    body.is-mobile-menu-open {
        overflow: hidden !important;
        touch-action: none !important;
    }

    /* O desktop tem uma segunda camada inteira por baixo da máscara do cursor.
       Em touch não há máscara: escondemos e reciclamos o texto nos .m-aside. */
    .layer.layer__red,
    .hero-reveal-overlay,
    .motto-reveal-overlay,
    .about-reveal-overlay,
    .work-reveal-overlay,
    .client-reveal-overlay,
    .testimonial-reveal-overlay,
    .cursor-orb,
    .client_list_3d,
    .frame-mobile,
    #js-btn_clipPath,
    .hero_bg {
        display: none !important;
    }

    /* ======================================================================
       2. Grelha
       O tema usa a grelha do Bootstrap. Em mobile tudo colapsa para uma
       coluna única com a mesma goteira lateral, para o texto ficar alinhado
       de secção para secção.
       ====================================================================== */
    .container {
        max-width: 100% !important;
        overflow: hidden;
        padding-left: calc(var(--m-gap) + var(--m-safe-l)) !important;
        padding-right: calc(var(--m-gap) + var(--m-safe-r)) !important;
        width: 100% !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    [class*="col-"] {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    [class*="offset-"] {
        margin-left: 0 !important;
    }

    .container_content {
        max-width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ======================================================================
       3. Header
       ====================================================================== */
    .header {
        align-items: center !important;
        background: transparent !important;
        display: flex !important;
        gap: 1rem;
        justify-content: space-between !important;
        left: 0 !important;
        min-height: calc(var(--m-header-h) + var(--m-safe-t));
        mix-blend-mode: normal !important;
        padding: var(--m-safe-t) calc(var(--m-gap) + var(--m-safe-r)) 0 calc(var(--m-gap) + var(--m-safe-l)) !important;
        pointer-events: none;
        position: fixed !important;
        right: 0 !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 10020 !important;
    }

    /* Véu que aparece só depois de sair do topo, para o header não competir
       com o hero mas continuar legível sobre o conteúdo. */
    .header::before {
        background: rgba(224, 222, 222, 0.86);
        border-bottom: 1px solid transparent;
        content: "";
        inset: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        transition: opacity 0.3s ease, border-color 0.3s ease;
        z-index: -1;
    }

    .header.is-scrolled::before {
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-bottom-color: var(--m-rule);
        opacity: 1;
    }

    /* O logo do sidebar está escondido no base.css; em mobile volta como
       marca do header. O tema deixa-o em position:fixed para a barra lateral,
       o que aqui o punha por cima do botão de menu. */
    .header_logo {
        display: block !important;
        pointer-events: auto;
        position: static !important;
    }

    .header_logo a {
        display: block;
        line-height: 0;
    }

    .header_logo_img {
        border-radius: 0.35rem;
        display: block;
        height: 2.15rem;
        width: 2.15rem;
    }

    /* ---- Botão de menu (injetado por js/mobile-nav.js) ---- */
    .m-nav-toggle {
        align-items: center;
        background: var(--m-ink);
        border: 1px solid var(--m-ink);
        border-radius: 999px;
        box-shadow: 0 10px 26px rgba(13, 13, 13, 0.18);
        color: var(--m-surface);
        display: inline-flex;
        font-size: 0.72rem;
        gap: 0.6rem;
        justify-content: center;
        letter-spacing: 0.14em;
        line-height: 1;
        min-height: 44px;
        padding: 0 1.05rem;
        pointer-events: auto;
        position: relative;
        text-transform: uppercase;
        transition: background-color 0.25s ease, color 0.25s ease;
        z-index: 10022;
    }

    body.is-mobile-menu-open .m-nav-toggle {
        background: transparent;
        color: var(--m-ink);
    }

    .m-nav-toggle_icon {
        display: block;
        height: 1px;
        position: relative;
        width: 1.1rem;
    }

    .m-nav-toggle_icon,
    .m-nav-toggle_icon::before,
    .m-nav-toggle_icon::after {
        background: currentColor;
        border-radius: 999px;
        transition: transform 0.28s var(--m-ease), opacity 0.2s ease;
    }

    .m-nav-toggle_icon::before,
    .m-nav-toggle_icon::after {
        content: "";
        height: 1px;
        left: 0;
        position: absolute;
        width: 100%;
    }

    .m-nav-toggle_icon::before {
        transform: translateY(-0.34rem);
    }

    .m-nav-toggle_icon::after {
        transform: translateY(0.34rem);
    }

    body.is-mobile-menu-open .m-nav-toggle_icon {
        background: transparent;
    }

    body.is-mobile-menu-open .m-nav-toggle_icon::before {
        transform: rotate(45deg);
    }

    body.is-mobile-menu-open .m-nav-toggle_icon::after {
        transform: rotate(-45deg);
    }

    /* ======================================================================
       4. Painel de navegação
       Ecrã inteiro em vez de gaveta: em telemóveis estreitos uma gaveta de
       86vw deixa uma faixa inútil e dá a sensação de meio-caminho.
       ====================================================================== */
    .header_menu {
        background: var(--m-surface) !important;
        display: flex !important;
        flex-direction: column;
        inset: 0 !important;
        justify-content: flex-start;
        max-width: none;
        text-align: left !important;
        padding:
            calc(var(--m-header-h) + var(--m-safe-t) + 2rem)
            calc(var(--m-gap) + var(--m-safe-r))
            calc(2rem + var(--m-safe-b))
            calc(var(--m-gap) + var(--m-safe-l)) !important;
        pointer-events: auto;
        position: fixed !important;
        transform: translateX(100%);
        transition: transform 0.42s var(--m-ease), visibility 0.42s;
        visibility: hidden;
        width: 100% !important;
        z-index: 10021 !important;
    }

    body.is-mobile-menu-open .header_menu {
        transform: translateX(0);
        visibility: visible;
    }

    /* margin auto no bloco: centra a lista no espaço livre e empurra o
       rodapé para baixo sem depender de justify-content */
    .header_menu_list {
        counter-reset: m-nav;
        display: flex !important;
        flex-direction: column !important;
        margin: auto 0;
        width: 100%;
    }

    .header_menu_item {
        border-bottom: 1px solid var(--m-rule);
        display: block !important;
        opacity: 0;
        transform: translateY(1.1rem);
        width: 100%;
    }

    .header_menu_item:first-child {
        border-top: 1px solid var(--m-rule);
    }

    body.is-mobile-menu-open .header_menu_item {
        animation: m-nav-item-in 0.5s var(--m-ease) both;
    }

    .header_menu_item:nth-child(1) {
        animation-delay: 0.08s;
    }

    .header_menu_item:nth-child(2) {
        animation-delay: 0.14s;
    }

    .header_menu_item:nth-child(3) {
        animation-delay: 0.2s;
    }

    .header_menu_item:nth-child(4) {
        animation-delay: 0.26s;
    }

    .header_menu_item:nth-child(5) {
        animation-delay: 0.32s;
    }

    @keyframes m-nav-item-in {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .header_menu_item a {
        align-items: baseline;
        display: flex !important;
        gap: 0.85rem;
        justify-content: flex-start;
        line-height: 1;
        min-height: 60px;
        padding: 1rem 0 !important;
        width: 100%;
    }

    /* Numeração editorial 01…05 */
    .header_menu_item a::before {
        color: var(--m-accent);
        content: counter(m-nav, decimal-leading-zero);
        counter-increment: m-nav;
        flex: none;
        font-size: 0.68rem;
        letter-spacing: 0.14em;
        transform: translateY(-0.15em);
    }

    .header_menu_item_inner {
        display: block;
        text-align: left !important;
        width: 100%;
    }

    /* No item activo o tema esconde o __deep e sobe o __active no lugar dele.
       Sem hover essa troca não acontece, por isso o __deep fica sempre visível. */
    .header_menu_item_link__deep {
        font-size: clamp(1.6rem, 8.5vw, 2.4rem) !important;
        line-height: 1 !important;
        text-transform: none;
        transform: none !important;
        visibility: visible !important;
    }

    /* A duplicata que no desktop desliza no hover não tem função em touch */
    .header_menu_item_link__active {
        display: none !important;
    }

    .header_menu_item.is-active .header_menu_item_link__deep {
        color: var(--m-accent) !important;
    }

    /* ---- Rodapé do painel (injetado) ---- */
    .m-menu-foot {
        display: grid;
        gap: 0.55rem;
        justify-items: start;
        padding-top: 1.5rem;
    }

    .m-menu-foot_label {
        color: var(--m-ink-mute);
        font-size: 0.66rem;
        letter-spacing: 0.18em;
        margin: 0 0 0.2rem;
        text-transform: uppercase;
    }

    .m-menu-foot a {
        color: var(--m-ink);
        font-size: 1rem;
        line-height: 1.5;
        min-height: 32px;
    }

    /* ======================================================================
       5. Hero
       ====================================================================== */
    .hero {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: auto !important;
        min-height: 100svh !important;
        overflow: hidden !important;
        padding-bottom: clamp(2.25rem, 7vh, 3.5rem) !important;
        padding-top: calc(var(--m-header-h) + var(--m-safe-t) + 1.5rem) !important;
        position: relative;
    }

    /* O tema dá height:100vh ao .hero_content; somado ao padding do .hero isso
       empurrava o indicador de scroll para fora do ecrã. */
    .hero_content {
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: 0 !important;
        padding-top: 0 !important;
        width: 100%;
    }

    .hero .row {
        margin-bottom: 0 !important;
    }

    .hero_content_inner {
        flex: 0 0 100% !important;
        margin-bottom: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Sobrescrita "eyebrow": pequena, capitulada, com filete de acento */
    .hero_content_inner_subtitle {
        align-items: center;
        color: var(--m-ink-soft) !important;
        display: flex !important;
        font-size: 0.7rem !important;
        gap: 0.65rem;
        letter-spacing: 0.18em !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
        text-align: left !important;
        text-transform: uppercase;
    }

    .hero_content_inner_subtitle::before {
        background: var(--m-accent);
        content: "";
        flex: none;
        height: 1px;
        width: 1.6rem;
    }

    .hero_content_inner_subtitle .line--mask-element,
    .hero_content_inner_subtitle span {
        display: inline !important;
    }

    /* Pilha "high / end / landing / pages" à esquerda: centrar num ecrã
       estreito desperdiça largura e obriga a reduzir o corpo. */
    .hero h1,
    .hero .h1 {
        font-size: clamp(2.6rem, 16vw, 4.6rem) !important;
        hyphens: none !important;
        letter-spacing: -0.005em !important;
        line-height: 0.88 !important;
        margin-bottom: 1.15rem !important;
        overflow-wrap: normal !important;
        text-align: left !important;
        word-break: normal !important;
    }

    .hero .anim--chars .line {
        display: block !important;
        text-align: left !important;
        width: 100% !important;
    }

    .hero .anim--chars .line strong {
        display: inline !important;
    }

    .hero .anim--chars .char {
        display: inline-block !important;
    }

    .hero p {
        color: var(--m-ink-soft);
        font-size: 0.98rem !important;
        line-height: 1.45 !important;
        margin-bottom: 1.4rem !important;
        max-width: 30ch;
        text-align: left !important;
    }

    /* ---- Ações (injetadas por js/mobile-hero.js) ---- */
    .m-hero-actions {
        display: grid;
        gap: 0.65rem;
        grid-template-columns: 1fr 1fr;
        max-width: 26rem;
    }

    .m-btn {
        align-items: center;
        border: 1px solid var(--m-ink);
        border-radius: 999px;
        display: inline-flex;
        font-size: 0.78rem;
        gap: 0.5rem;
        justify-content: center;
        letter-spacing: 0.1em;
        line-height: 1;
        min-height: 52px;
        padding: 0 1rem;
        text-align: center;
        text-transform: uppercase;
        transition: transform 0.2s var(--m-ease), opacity 0.2s ease;
    }

    .m-btn:active {
        transform: scale(0.975);
    }

    .m-btn--primary {
        background: var(--m-ink);
        color: var(--m-surface) !important;
    }

    .m-btn--ghost {
        background: transparent;
        color: var(--m-ink) !important;
    }

    /* ---- Faixa do código promocional (texto vindo da .layer__red) ---- */
    .m-promo {
        border-left: 2px solid var(--m-accent);
        color: var(--m-ink-soft);
        font-size: 0.78rem;
        line-height: 1.4;
        margin: 1.15rem 0 0;
        max-width: 34ch;
        padding-left: 0.8rem;
    }

    .m-promo b {
        color: var(--m-accent);
        font-weight: 400;
    }

    /* ---- Indicador de scroll ---- */
    .m-scroll-cue {
        align-items: center;
        bottom: calc(1.5rem + var(--m-safe-b));
        color: var(--m-ink-mute);
        display: flex;
        font-size: 0.62rem;
        gap: 0.7rem;
        left: calc(var(--m-gap) + var(--m-safe-l));
        letter-spacing: 0.2em;
        position: absolute;
        text-transform: uppercase;
    }

    .m-scroll-cue::after {
        animation: m-scroll-cue 1.9s var(--m-ease) infinite;
        background: var(--m-ink-mute);
        content: "";
        height: 1.75rem;
        transform-origin: top;
        width: 1px;
    }

    @keyframes m-scroll-cue {

        0%,
        100% {
            opacity: 0.25;
            transform: scaleY(0.35);
        }

        45% {
            opacity: 1;
            transform: scaleY(1);
        }
    }

    /* ======================================================================
       6. Ritmo das secções
       ====================================================================== */
    .about,
    .work,
    .client,
    .contact {
        padding-bottom: var(--m-section-y) !important;
        padding-top: var(--m-section-y) !important;
    }

    /* O tema reserva ~29vh acima e abaixo destes blocos para o paralaxe do
       desktop. Em mobile isso são ecrãs inteiros em branco: o ritmo passa a
       ser dado só por --m-section-y. */
    .about_me,
    .work_experience,
    .client_info {
        margin-bottom: 0 !important;
        min-height: auto !important;
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }

    .about_me,
    .client_info {
        margin-bottom: var(--m-section-y) !important;
    }

    .about_ido {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }

    .contact_content {
        margin-top: 0 !important;
    }

    /* Etiqueta de secção */
    .about_content_label,
    .work_content_label,
    .client_content_label,
    .contact_label {
        align-items: center;
        color: var(--m-ink-mute) !important;
        display: flex;
        font-size: 0.66rem !important;
        gap: 0.65rem;
        letter-spacing: 0.2em !important;
        margin-bottom: 1.5rem !important;
    }

    .about_content_label::before,
    .work_content_label::before,
    .client_content_label::before,
    .contact_label::before {
        background: var(--m-accent);
        content: "";
        flex: none;
        height: 1px;
        width: 1.6rem;
    }

    /* ======================================================================
       7. Parágrafos revelados no scroll
       A camada "fill" é absoluta por cima da "base": as duas têm de quebrar
       linha exatamente da mesma maneira, por isso ambas passam a
       white-space: normal e as palavras nunca se partem a meio.
       ====================================================================== */
    .about_content_desc,
    .work_content_desc,
    .client_content_desc {
        font-size: clamp(1.85rem, 9.4vw, 3rem) !important;
        hyphens: none !important;
        letter-spacing: 0 !important;
        line-height: 1.1 !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .about-scroll-fill .line,
    .work-scroll-fill .line,
    .client-scroll-fill .line,
    .about-scroll-base .line,
    .work-scroll-base .line,
    .client-scroll-base .line {
        max-width: 100% !important;
        overflow: visible !important;
        white-space: normal !important;
        word-break: normal !important;
    }

    .mobile-scroll-word {
        display: inline-block;
        white-space: nowrap;
    }

    /* ---- Cartão "toca para ver" (injetado por js/mobile-reveal.js) ----
       Guarda o texto que no desktop só aparece dentro do orb. */
    .m-aside {
        margin-top: 1.75rem;
    }

    .m-aside-toggle {
        align-items: center;
        background: transparent;
        border: 1px solid var(--m-rule);
        border-radius: 999px;
        color: var(--m-ink);
        display: inline-flex;
        font-size: 0.68rem;
        gap: 0.6rem;
        letter-spacing: 0.16em;
        line-height: 1;
        min-height: 44px;
        padding: 0 1.05rem;
        text-transform: uppercase;
        transition: border-color 0.25s ease, color 0.25s ease;
    }

    .m-aside[data-open="true"] .m-aside-toggle {
        border-color: var(--m-accent);
        color: var(--m-accent);
    }

    .m-aside-toggle_icon {
        display: block;
        height: 0.62rem;
        position: relative;
        width: 0.62rem;
    }

    .m-aside-toggle_icon::before,
    .m-aside-toggle_icon::after {
        background: currentColor;
        content: "";
        inset: 50% 0 auto 0;
        height: 1px;
        position: absolute;
        transition: transform 0.3s var(--m-ease);
    }

    .m-aside-toggle_icon::after {
        transform: rotate(90deg);
    }

    .m-aside[data-open="true"] .m-aside-toggle_icon::after {
        transform: rotate(0deg);
    }

    /* grid-template-rows 0fr -> 1fr anima altura automática sem medir em JS */
    .m-aside-panel {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.45s var(--m-ease);
    }

    .m-aside[data-open="true"] .m-aside-panel {
        grid-template-rows: 1fr;
    }

    .m-aside-panel_inner {
        min-height: 0;
        overflow: hidden;
    }

    .m-aside-card {
        background: var(--m-inverse);
        color: #fff;
        font-size: clamp(1.1rem, 5.4vw, 1.5rem);
        line-height: 1.28;
        margin-top: 0.9rem;
        padding: 1.4rem 1.25rem;
    }

    .m-aside-card b,
    .m-aside-card strong {
        color: var(--m-accent);
        font-weight: 400;
    }

    /* ======================================================================
       8. Listas heading-mask (serviços e clientes)
       Sem hover, as duas camadas sobrepostas do desktop não fazem sentido:
       fica só a camada visível, com título e descrição empilhados.
       ====================================================================== */
    /* app.css fixa .client .heading-mask e .about_ido .heading-mask_el em
       4.5rem no telemóvel e só faz o unset a partir de 768px. Em tablets
       (768–1024) o tema já solta a altura, mas mantemos o override para
       a coluna única não depender disso. */
    .heading-mask {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* No desktop as duas camadas são sobrepostas com altura fixa (a do título)
       e a descrição transborda escondida. Em mobile a altura tem de seguir o
       conteúdo, senão as descrições passam por cima do item seguinte. */
    .heading-mask > .heading-mask_el__deep,
    .heading-mask > .heading-mask_el__masking {
        background: transparent !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        height: auto !important;
        min-height: 0 !important;
        position: static !important;
        transform: none !important;
    }

    .heading-mask .row {
        gap: 0.55rem;
    }

    .heading-mask .h1 {
        font-size: clamp(2.35rem, 12.5vw, 3.75rem) !important;
        hyphens: none !important;
        letter-spacing: 0 !important;
        line-height: 0.98 !important;
        overflow-wrap: normal !important;
        white-space: normal !important;
        word-break: normal !important;
    }

    /* As descrições estão marcadas com .d-none / .d-sm-block pelo tema */
    .heading-mask .desc,
    .heading-mask .d-none,
    .heading-mask .d-sm-block {
        display: block !important;
    }

    .heading-mask .desc {
        color: var(--m-ink-soft);
        font-size: 0.92rem !important;
        hyphens: none !important;
        line-height: 1.5 !important;
        max-width: 34ch;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .about_ido > .heading-mask,
    .client_list > .heading-mask {
        border-top: 1px solid var(--m-rule);
        counter-increment: m-item;
        display: block;
        padding: 1.6rem 0;
        position: relative;
    }

    .about_ido,
    .client_list {
        counter-reset: m-item;
    }

    .about_ido > .heading-mask:last-child,
    .client_list > .heading-mask:last-child {
        border-bottom: 1px solid var(--m-rule);
    }

    /* Índice ancorado à direita: não rouba largura ao título */
    .about_ido > .heading-mask::before,
    .client_list > .heading-mask::before {
        color: var(--m-accent);
        content: counter(m-item, decimal-leading-zero);
        font-size: 0.66rem;
        letter-spacing: 0.14em;
        position: absolute;
        right: 0;
        top: 1.75rem;
    }

    /* A camada "deep" é só o duplicado de hover */
    .about_ido > .heading-mask > .heading-mask_el__deep,
    .client_list > .heading-mask > .heading-mask_el__deep {
        display: none !important;
    }

    .about_ido > .heading-mask > .heading-mask_el__masking,
    .client_list > .heading-mask > .heading-mask_el__masking {
        color: var(--m-ink) !important;
        display: block !important;
        padding-right: 2.5rem;
    }

    .about_ido > .heading-mask .h1,
    .client_list > .heading-mask .h1 {
        color: var(--m-ink) !important;
        margin-bottom: 0.5rem !important;
    }

    .client_list {
        margin-bottom: 0 !important;
        min-height: auto !important;
        padding-top: 0;
    }

    /* ======================================================================
       9. Contactos
       Aqui é o inverso: a camada "deep" tem a informação real e a "masking"
       tem o comentário pessoal — que passa a legenda por baixo.
       ====================================================================== */
    .contact {
        padding-bottom: calc(2.5rem + var(--m-safe-b)) !important;
    }

    .contact .row {
        gap: 0;
    }

    .contact ul {
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
    }

    /* O tema desalinha estes dois blocos de propósito (margin no .social-link,
       deslocamento relativo no .contact_info) para o efeito escalonado do
       desktop. Em coluna única só desalinha a margem esquerda. */
    .contact .social-link {
        margin-left: 0 !important;
    }

    .contact .contact_info {
        left: auto !important;
        margin: 0 !important;
        right: auto !important;
        width: 100%;
    }

    .contact .heading-mask {
        border-top: 1px solid var(--m-rule) !important;
        display: block;
        padding: 1.4rem 0 !important;
    }

    .contact .heading-mask__now {
        border-top-color: var(--m-ink) !important;
    }

    .contact .heading-mask_el {
        display: block !important;
    }

    /* O padding-left abria espaço para a seta animada do desktop */
    .contact .contact_link {
        padding-left: 0 !important;
    }

    .contact .heading-mask_el__deep .contact_link,
    .contact .heading-mask_el__deep .h4 {
        display: block;
        font-size: clamp(1.6rem, 8.5vw, 2.35rem) !important;
        line-height: 1.05 !important;
        margin-bottom: 0.2rem;
    }

    /* border-bottom em vez de text-decoration: o <span> do @ é inline-block
       (para o kerning) e partia o sublinhado em dois. */
    .contact .heading-mask_el__deep .sub-content {
        border-bottom: 1px solid var(--m-accent);
        display: inline-block;
        font-size: 1rem;
        line-height: 1.4;
        padding-bottom: 0.15rem;
        text-decoration: none !important;
    }

    /* Comentário pessoal como legenda */
    .contact .heading-mask_el__masking {
        margin-top: 0.5rem;
    }

    .contact .heading-mask_el__masking .h4,
    .contact .heading-mask_el__masking .contact_link {
        color: var(--m-ink-soft) !important;
        display: block;
        font-size: 0.82rem !important;
        letter-spacing: 0.02em !important;
        line-height: 1.45 !important;
    }

    .contact .heading-mask_el__masking .sub-content {
        display: none !important;
    }

    /* Linkedin / Instagram: mesma linha vermelha do email/telefone, e seta
       desenhada em CSS (o ↗ vira emoji azul no iOS/iPadOS). */
    .social-link .heading-mask_el__deep .contact_link {
        border-bottom: 1px solid var(--m-accent);
        display: inline-block !important;
        padding-bottom: 0.15rem;
        text-decoration: none !important;
    }

    .social-link .heading-mask_el__deep .contact_link::after {
        border-right: 1.5px solid var(--m-accent);
        border-top: 1.5px solid var(--m-accent);
        content: "";
        display: inline-block;
        height: 0.38em;
        margin-left: 0.4em;
        transform: translateY(-0.12em) rotate(45deg);
        vertical-align: middle;
        width: 0.38em;
    }

    .contact_link,
    .sub-content {
        hyphens: none !important;
        overflow-wrap: normal !important;
        touch-action: manipulation;
        word-break: normal !important;
    }

    .footer_legal_text {
        max-width: 100%;
    }

    /* ======================================================================
       10. Preloader
       ====================================================================== */
    #page-loading_logo,
    .page-loading_logo img {
        width: clamp(180px, 52vw, 300px) !important;
    }

    .page-loading_boot_pct {
        font-size: clamp(2.75rem, 16vw, 4rem);
    }

    .page-loading_start {
        min-height: 52px;
        min-width: 11rem;
    }

    .page-loading_notice {
        font-size: 0.75rem;
        line-height: 1.4;
        top: calc(100% + 1.1rem);
        width: min(22rem, calc(100vw - 2.5rem));
    }

    /* ======================================================================
       11. Movimento reduzido
       ====================================================================== */
    @media (prefers-reduced-motion: reduce) {

        .header_menu,
        .header_menu_item,
        .m-aside-panel,
        .m-nav-toggle_icon,
        .m-nav-toggle_icon::before,
        .m-nav-toggle_icon::after,
        .m-aside-toggle_icon::before,
        .m-aside-toggle_icon::after {
            animation: none !important;
            transition: none !important;
        }

        .header_menu_item {
            opacity: 1;
            transform: none;
        }

        .m-scroll-cue::after {
            animation: none;
            opacity: 0.6;
            transform: none;
        }
    }
}