:root {
    --mh-color-black: #000000;
    --mh-color-white: #ffffff;
    --mh-color-brand-primary: #111111;
    --mh-color-brand-secondary: #9f9f9f;
    --mh-color-brand-tertiary: #A8A8A8;
    --mh-color-text: #1f1f1f;
    --mh-color-border: #e6e6e6;
    --wp--preset--color--black: #000000;
    --wp--preset--color--white: #ffffff;
    --wp--preset--color--brand-primary: #111111;
    --wp--preset--color--brand-secondary: #9f9f9f;
    --wp--preset--color--default-text: #1f1f1f;
    --wp--preset--color--pink: #E9446D;
    --wp--preset--color--green: #16AD88;
    --wp--preset--color--orange: #F6A217;
    --wp--preset--color--purple: #7272B4;
    --mh-header-height: 84px; /* fallback pré-JS; o JS define o valor real (theme.js) */
    --mh-admin-bar-height: 0px; /* body.admin-bar sobrepõe (32px / 46px) */
    --mh-content-width: 1320px;
    --mh-max-width: var(--mh-content-width);
    --mh-page-gutter: 3vw;
    --mh-page-width: min(calc(100% - (var(--mh-page-gutter) * 2)), var(--mh-max-width));
    --mh-content-width-safe: min(calc(100% - (var(--mh-page-gutter) * 2)), var(--mh-content-width));
    --mh-fluid-width: calc(100% - (var(--mh-page-gutter) * 2));

    --mh-group-max-width: var(--mh-max-width);
    --mh-group-padding-x: 5.25vw;

    --mh-grid-column-gap: 24px;
    --mh-grid-row-gap-mobile: 16px;
    --mh-grid-row-gap-desktop: 24px;
    --mh-grid-item-padding: 12px;

    /* Motion tokens */
    --mh-motion-duration-fast: 240ms;
    --mh-motion-duration-base: 600ms;
    --mh-motion-duration-slow: 800ms;
    --mh-motion-duration-overlay: 280ms;
    --mh-motion-delay-stagger-sm: 80ms;
    --mh-motion-delay-stagger-md: 100ms;
    --mh-motion-reveal-delay: 150ms;
    --mh-motion-distance-sm: 16px;
    --mh-motion-distance-md: 24px;
    --mh-motion-distance-lg: 32px;
    --mh-motion-ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
    --mh-motion-ease-exit: cubic-bezier(0.4, 0, 0.2, 1);
    --mh-capa-principal-max-height: min(70svh, 680px);
}

@supports not (height: 100svh) {
    :root {
        --mh-capa-principal-max-height: min(70vh, 680px);
    }
}

* {
    box-sizing: border-box;
}

/* Gutenberg fix */
:where(.wp-block-columns.has-background) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--mh-color-white);
    color: var(--mh-color-text);
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
}

html.is-transitioning body {
    cursor: progress;
}

.container {
    width: var(--mh-page-width);
    margin-inline: auto;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10002;
    padding: 20px 0;
    color: var(--mh-color-white);
    pointer-events: none;
    isolation: isolate;
    background: var(--mh-color-black);
    transform: translateY(0);
    transition: transform var(--mh-motion-duration-fast) var(--mh-motion-ease-exit);
    will-change: transform;
}

.site-header.is-header-hidden {
    transform: translateY(calc(-100% - 4px));
}

/* Altura da barra de administração do WP: empurra o <html> (margin-top), mas o
   cabeçalho fixo não acompanha — subtrai do offset do <main>. */
body.admin-bar { --mh-admin-bar-height: 32px; }

@media screen and (max-width: 782px) {
    body.admin-bar { --mh-admin-bar-height: 46px; }
}

/* O cabeçalho é position: fixed (fora do fluxo); o <main> precisa de um offset
   igual à altura real do cabeçalho (seguida pelo JS via --mh-header-height),
   menos o que a admin bar já empurrou no <html>. Em móvil o hero é flush (0). */
.page-template-default .site-main {
    margin-top: calc(var(--mh-header-height, 84px) - var(--mh-admin-bar-height, 0px));
}

body.is-menu-open .site-header {
    transform: translateY(0);
}

.projects-template-default .site-header {
    background: transparent;
}

.projects-template-default h1 {
    font-size: 45px !important;
}

.site-header__inner {
    width: 100%;
    max-width: var(--mh-group-max-width);
    padding-inline: var(--mh-group-padding-x);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    pointer-events: auto;
}

@media screen and (min-width: 1321px) {

    .site-header__inner {
        padding-inline: 0;
    }
}

.site-header__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.site-header__title {
    margin-left: auto;
    margin-right: 40px;
    text-align: right;
}

.site-header__title .page-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--mh-color-white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.menu-toggle {
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.menu-toggle__icon {
    display: block;
    width: 2.2rem;
    height: 2.2rem;
}

.site-logo {
    display: block;
    width: auto;
    height: auto;
    max-height: 20px;
    max-width: auto;
}

/* Logo adaptativo: preto sobre fundos claros (header transparente). */
.site-logo--header.is-logo-dark {
    filter: invert(1);
}

.site-logo--header {
    transition: filter var(--mh-motion-duration-fast, 160ms) var(--mh-motion-ease-enter, ease);
}

@media (min-width: 1024px) {
    .site-logo {
        /* Desktop: restore original branding size */
        max-height: 70px;
        max-width: 240px;
    }
}

.site-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.main-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.main-menu a {
    text-decoration: none;
    font-weight: 500;
}

.main-menu a:hover {
    text-decoration: none;
}

/* Menu horizontal no cabeçalho (apenas desktop).
   O menu principal passa a aparecer na própria barra do cabeçalho; o menu
   fullscreen (overlay) e o botão de abertura mantêm-se inalterados. */
.site-header__nav {
    display: none;
}

@media (min-width: 1024px) {

    /* flex-start + gap:0 + margin-left:auto no nav: branding à esquerda,
       nav+controlos agrupados à direita com folga determinística de 30px
       até ao botão (o gap:1.5rem do inner somava 24px extra). */
    .site-header__inner {
        justify-content: flex-start;
        gap: 0;
    }
    .site-header__nav {
        display: block;
        margin-left: auto;
        margin-right: 30px;
    }

    /* No desktop, o menu horizontal substitui o título da página na barra. */
    .site-header__title {
        display: none;
    }

    .main-menu--header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 30px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .main-menu--header a {
        color: var(--mh-color-white);
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-decoration: none;
    }

    .main-menu--header a:hover,
    .main-menu--header a:focus-visible {
        text-decoration: none;
    }

    /* Cores de hover por item, coerentes com o menu fullscreen (overlay). */
    .main-menu--header li:nth-child(1) a:hover,
    .main-menu--header li:nth-child(1) a:focus-visible {
        color: var(--wp--preset--color--pink);
    }

    .main-menu--header li:nth-child(2) a:hover,
    .main-menu--header li:nth-child(2) a:focus-visible {
        color: var(--wp--preset--color--green);
    }

    .main-menu--header li:nth-child(3) a:hover,
    .main-menu--header li:nth-child(3) a:focus-visible {
        color: var(--wp--preset--color--orange);
    }
}

/* ==========================================================================
   Link Underline Animation
   ========================================================================== */

.underlined,
a {
    position: relative;
}

.underlined::before,
a::before {
    content: "";
    width: 0;
    height: 0.125rem;
    background-color: currentColor;
    position: absolute;
    bottom: 0.0625rem;
    left: auto;
    right: 0;
    transition: all 1.5s cubic-bezier(0.1, 0.6, 0.4, 1);
}

.underlined:hover::before,
a:hover::before,
.underlined:focus-visible::before,
a:focus-visible::before {
    width: 100%;
    left: 0;
    right: auto;
}

/* Skip underline animation on non-text / custom-interaction links */
.site-branding__link::before,
.site-footer__logo-link::before,
.menu-toggle::before,
.wp-block-button__link::before,
.mh-project-card__link::before,
.mh-project-card__media-link::before,
.mh-project-archive__load-more::before,
.page-numbers::before,
.menu-overlay__menu a::before,
.main-menu--header a::before,
.menu-overlay__project-list a::before {
    display: none !important;
}

.post-entry__header,
.post-entry__content>* {
    width: var(--mh-content-width-safe);
    margin-inline: auto;
}

.wp-block-column>.wp-block-group.alignfull {
    width: 100%;
    margin-inline: 0;
}

.wp-block-column>.wp-block-group>.wp-block-group__inner-container,
.wp-block-column>.wp-block-group>.is-layout-constrained,
.wp-block-column>.wp-block-group>.is-layout-flow,
.wp-block-group.is-layout-grid {
    width: 100%;
    max-width: var(--wp--style--global--content-size, var(--mh-content-width-safe));
    margin-inline: auto;
}


.post-entry__title {
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

.post-entry__content>*:first-child {
    margin-top: 0;
}

.post-entry__content>*:last-child {
    margin-bottom: 0;
}

/* Tipografia base Gutenberg (Paragraph/List/Heading) */
/* Mobile-first responsive typography patterns */
.wp-block-paragraph,
p {
    margin: 0 0 1.25rem;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
}

.wp-block-list {
    margin: 0 0 1.25rem;
    padding-left: 1.3rem;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
}

.wp-block-list li+li {
    margin-top: 0.5rem;
}

.wp-block-heading {
    margin: 0 0 0.75rem;
    color: var(--mh-color-brand-primary);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* H1 - Mobile: 36px, Tablet: 48px, Desktop: 80px */
h1,
.wp-block-heading:where(h1) {
    font-size: clamp(2.25rem, 5vw + 1rem, 5rem);
    font-weight: 600;
}

/* H2 - Fixed at 45px */
h2,
.wp-block-heading:where(h2) {
    font-size: 45px;
    font-weight: 600;
}

/* H3 - Mobile: 20px, Tablet: 22px, Desktop: 24px */
h3,
.wp-block-heading:where(h3) {
    font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem);
    font-weight: 600;
}

/* H4 - Mobile: 18px, Desktop: 20px */
h4,
.wp-block-heading:where(h4) {
    font-size: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
    font-weight: 700;
}

a {
    color: inherit;
    text-decoration: none;
    position: relative;
}

/* Remove inherited/inline underline from Gutenberg link-color wrappers */
.has-link-color,
.has-link-color a {
    text-decoration: none !important;
}

.category-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

.category-link a::after {
    content: ">";
    opacity: 0;
    transform: translateX(-0.35em);
    transition: opacity 220ms ease, transform 220ms ease;
}

.category-link a:hover::after,
.category-link a:focus-visible::after {
    opacity: 1;
    transform: translateX(0);
}

.post-entry__content a,
.wp-block-paragraph a,
.wp-block-list a {
    font-size: inherit;
}

.go-up-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 49px;
    height: 49px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--mh-motion-duration-base) var(--mh-motion-ease-enter),
        transform var(--mh-motion-duration-base) var(--mh-motion-ease-enter);
    will-change: opacity, transform;
}

.go-up-button:not([hidden]) {
    opacity: 1;
    transform: translateY(0);
}

.go-up-button:hover {
    transform: scale(1.1);
}

.go-up-button:focus-visible {
    outline: 2px solid var(--mh-color-brand-secondary);
    outline-offset: 4px;
}

.go-up-button img {
    display: block;
    width: 100%;
    height: 100%;
}

@media (min-width: 1320px) {
    :root {
        --mh-go-up-right-offset: calc((100% - var(--mh-max-width)) / 2 + 20px);
    }

    .go-up-button {
        right: calc((100% - var(--mh-max-width)) / 2 + 20px);
    }
}

@media (max-width: 1519px) {
    .go-up-button {
        right: 20px;
    }
}

@media (max-width: 900px) {
    .go-up-button {
        right: 20px;
        bottom: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .go-up-button {
        transition: none;
    }
}

/* Suporte a alinhamentos Gutenberg */
.is-layout-constrained>.alignwide {
    max-width: var(--wp--style--global--content-size);
}

.post-entry__content>.wp-block[data-align="wide"],
.post-entry__content>.wp-block.alignwide,
.post-entry__content>.alignwide {
    width: var(--mh-page-width);
    max-width: none;
}

.post-entry__content>.wp-block[data-align="full"],
.post-entry__content>.wp-block.alignfull,
.post-entry__content>.alignfull {
    width: var(--mh-page-width);
    max-width: none;
    margin-inline: auto;
}

/* Capa Principal - TRUE 100% width for full viewport images */
.post-entry__content .mh-block-capa-principal.alignwide,
.post-entry__content .mh-block-capa-principal.alignfull {
    width: 100%;
    max-width: none;
    margin-inline: auto;
}

/* Group full-width - TRUE 100% for full viewport backgrounds */
.post-entry__content>.wp-block-group.alignfull {
    width: 100%;
    max-width: none;
    margin-inline: auto;
}

/* Override WordPress default has-background padding with fluid spacing */
.post-entry__content>.wp-block-group.alignfull.has-background {
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.post-entry__content>.wp-block-group.alignwide>.wp-block-group__inner-container,
.post-entry__content>.wp-block-group.alignwide>.is-layout-constrained,
.post-entry__content>.wp-block-group.alignwide>.is-layout-flow {
    width: var(--mh-content-width-safe);
    margin-inline: auto;
}

/* Inner wrapper (legacy markup) */
.post-entry__content>.wp-block-group.alignfull>.wp-block-group__inner-container,
.post-entry__content>.wp-block-group.alignfull>.is-layout-constrained,
.post-entry__content>.wp-block-group.alignfull>.is-layout-flow {
    width: 100%;
    max-width: var(--mh-group-max-width);
    margin-inline: auto;
    padding-inline: var(--mh-group-padding-x);
}

/* Group IS the layout container (modern WP markup, no inner wrapper) */
.post-entry__content>.wp-block-group.alignfull.is-layout-flow,
.post-entry__content>.wp-block-group.alignfull.is-layout-constrained {
    padding-inline: var(--mh-group-padding-x);
}

.post-entry__content>.wp-block-group.alignfull.is-layout-flow>:where(:not(.alignfull)),
.post-entry__content>.wp-block-group.alignfull.is-layout-constrained>:where(:not(.alignfull)) {
    max-width: var(--mh-group-max-width);
    margin-inline: auto;
}

.post-entry__content>.wp-block-group.is-style-madhouse-row {
    width: 100%;
    max-width: none;
    margin-inline: auto;
}

/* Inner wrapper (legacy markup) */
.post-entry__content>.wp-block-group.is-style-madhouse-row>.wp-block-group__inner-container,
.post-entry__content>.wp-block-group.is-style-madhouse-row>.is-layout-constrained,
.post-entry__content>.wp-block-group.is-style-madhouse-row>.is-layout-flow {
    width: 100%;
    max-width: var(--mh-group-max-width);
    margin-inline: auto;
    padding-inline: var(--mh-group-padding-x);
}

/* Modern markup (no inner wrapper) */
.post-entry__content>.wp-block-group.is-style-madhouse-row.is-layout-flow,
.post-entry__content>.wp-block-group.is-style-madhouse-row.is-layout-constrained {
    padding-inline: var(--mh-group-padding-x);
    /* No vertical padding for madhouse-row by default */
    padding-top: 0;
    padding-bottom: 0;
}

.post-entry__content>.wp-block-group.is-style-madhouse-row.is-layout-flow>:where(:not(.alignfull)),
.post-entry__content>.wp-block-group.is-style-madhouse-row.is-layout-constrained>:where(:not(.alignfull)) {
    max-width: var(--mh-group-max-width);
    margin-inline: auto;
}

/* ==========================================================================
   FORCE OVERRIDE - Use these classes to override any backend-set padding
   Add to Group block > Additional CSS class(es)
   ========================================================================== */

/* Force remove all padding */
.mh-no-padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.mh-no-padding-y {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Force specific sizes with !important */
.mh-force-xs {
    padding-top: clamp(0.75rem, 2vw, 1rem) !important;
    padding-bottom: clamp(0.75rem, 2vw, 1rem) !important;
}

.mh-force-sm {
    padding-top: clamp(1rem, 3vw, 1.25rem) !important;
    padding-bottom: clamp(1rem, 3vw, 1.25rem) !important;
}

.mh-force-md {
    padding-top: clamp(1.5rem, 4vw, 2rem) !important;
    padding-bottom: clamp(1.5rem, 4vw, 2rem) !important;
}

.mh-force-lg {
    padding-top: clamp(2rem, 5vw, 3rem) !important;
    padding-bottom: clamp(2rem, 5vw, 3rem) !important;
}

.mh-force-xl {
    padding-top: clamp(3rem, 6vw, 4rem) !important;
    padding-bottom: clamp(3rem, 6vw, 4rem) !important;
}

.mh-force-2xl {
    padding-top: clamp(4rem, 8vw, 6rem) !important;
    padding-bottom: clamp(4rem, 8vw, 6rem) !important;
}

.mh-force-3xl {
    padding-top: clamp(6rem, 12vw, 10rem) !important;
    padding-bottom: clamp(6rem, 12vw, 10rem) !important;
}

/* Scroll reveal */
.reveal-ready {
    opacity: 0;
    transform: translateY(var(--mh-motion-distance-md));
    transition:
        opacity var(--mh-motion-duration-base) var(--mh-motion-ease-enter),
        transform var(--mh-motion-duration-base) var(--mh-motion-ease-enter);
    transition-delay: var(--mh-reveal-delay, var(--mh-motion-reveal-delay));
    will-change: opacity, transform;
}

.reveal-ready.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Transição entre páginas de projeto */
#page-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 10003;
    background: var(--mh-color-white);
    opacity: 0;
    pointer-events: none;
    display: grid;
    place-items: center;
    transition: opacity var(--mh-motion-duration-overlay) var(--mh-motion-ease-exit);
}

#page-transition-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

#page-transition-title {
    opacity: 0;
    transform: translateY(var(--mh-motion-distance-md));
    text-align: center;
    transition:
        opacity var(--mh-motion-duration-slow) var(--mh-motion-ease-enter),
        transform var(--mh-motion-duration-slow) var(--mh-motion-ease-enter);
}

#page-transition-overlay.is-title-visible #page-transition-title {
    opacity: 1;
    transform: translateY(0);
}

#page-transition-overlay.is-title-out #page-transition-title {
    opacity: 0;
    transform: translateY(calc(var(--mh-motion-distance-md) * -1));
    transition-duration: var(--mh-motion-duration-base);
    transition-timing-function: var(--mh-motion-ease-exit);
}

#page-transition-overlay.is-enter.is-leaving {
    opacity: 0;
}

.page-transition-title__cliente,
.page-transition-title__nome {
    margin: 0;
    color: var(--mh-color-black);
}

.page-transition-title__cliente {
    font-size: clamp(2.8rem, 2.6vw + 2rem, 4.5rem);
    font-weight: 600;
}

.page-transition-title__nome {
    margin-top: 0.35rem;
    font-size: clamp(2rem, 0.8vw + 1.8rem, 2.6rem);
    color: var(--mh-color-brand-secondary);
}

/* Menu fullscreen */
body.is-menu-open {
    overflow: hidden;
}

#menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--mh-color-black);
    color: var(--mh-color-white);
    opacity: 0;
    pointer-events: none;
    transition: opacity 420ms var(--mh-motion-ease-enter);
}

#menu-overlay[hidden] {
    display: none;
}

#menu-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.menu-overlay__inner {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--mh-page-gutter);
}

.menu-overlay__header {
    position: static;
}

.menu-overlay__menu a:hover,
.menu-overlay__menu a:focus-visible,
.menu-overlay__project-list a:hover,
.menu-overlay__project-list a:focus-visible {
    color: var(--mh-color-brand-secondary);
}

.menu-overlay__main-nav {
    width: var(--mh-content-width-safe);
    margin: 0;
}

.menu-overlay__menu,
.menu-overlay__project-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 20px;
}

.menu-overlay__menu a,
.menu-overlay__project-list a {
    color: inherit;
    text-decoration: none;
    font-size: clamp(2.6rem, 3vw + 1.25rem, 5.6rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.015em;
}

.menu-overlay__menu a:hover,
.menu-overlay__project-list a:hover {
    text-decoration: none;
}

.menu-overlay__menu li:nth-child(1) a:hover,
.menu-overlay__menu li:nth-child(1) a:focus-visible {
    color: #E9446D;
}

.menu-overlay__menu li:nth-child(2) a:hover,
.menu-overlay__menu li:nth-child(2) a:focus-visible {
    color: #16AD88;
}

.menu-overlay__menu li:nth-child(3) a:hover,
.menu-overlay__menu li:nth-child(3) a:focus-visible {
    color: #F6A217;
}

#menu-overlay .menu-overlay__stagger-item {
    opacity: 0;
    transform: translateY(var(--mh-motion-distance-lg));
}

[data-stagger-group][data-stagger="sm"] {
    --mh-stagger-delay: var(--mh-motion-delay-stagger-sm);
}

[data-stagger-group][data-stagger="md"] {
    --mh-stagger-delay: var(--mh-motion-delay-stagger-md);
}

#menu-overlay.is-open .menu-overlay__stagger-item {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity var(--mh-motion-duration-slow) var(--mh-motion-ease-enter),
        transform var(--mh-motion-duration-slow) var(--mh-motion-ease-enter);
    transition-delay: calc(110ms + (var(--stagger-index, 0) * var(--mh-stagger-delay, var(--mh-motion-delay-stagger-md))));
}

.mh-block-placeholder {
    margin: 0;
    padding: 1rem 1.25rem;
    border: 1px dashed var(--mh-color-border);
    color: var(--mh-color-brand-secondary);
    background: #fafafa;
}

/* Bloco: Capa Principal */
.mh-capa-principal__media {
    width: 100%;
    min-height: 200px;
    max-height: var(--mh-capa-principal-max-height);
    background: #f6f6f6;
    overflow: hidden;
}

.mh-capa-principal__media--image,
.mh-capa-principal__media--video {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: var(--mh-capa-principal-max-height);
}

.mh-capa-principal__image,
.mh-capa-principal__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Carousel de imagens */
.mh-capa-principal__carousel {
    position: relative;
    width: 100%;
    background: #000;
}

/* A trilha define a altura da media; os dots são absolutos, sobrepostos no fundo. */
.mh-capa-principal__carousel-track {
    position: relative;
    width: 100%;
    min-height: 200px;
    max-height: var(--mh-capa-principal-max-height);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.mh-capa-principal__carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    z-index: 1;
}

.mh-capa-principal__carousel-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.mh-capa-principal__carousel-slide .mh-capa-principal__image,
.mh-capa-principal__carousel-slide .mh-capa-principal__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Mobile: ajuste fino de posicionamento dos dots para capas mais compactas */
@media (max-width: 768px) {
    .mh-capa-principal__carousel-dots {
        bottom: 16px;
    }
}

/* Homepage: manter a Capa Principal na altura total original (16:9 sem restrição de viewport) */
body.home,
body.front-page {
    --mh-capa-principal-max-height: none;
}

body.home .mh-capa-principal__media,
body.front-page .mh-capa-principal__media {
    min-height: 280px;
    max-height: none;
}

body.home .mh-capa-principal__media--image,
body.front-page .mh-capa-principal__media--image,
body.home .mh-capa-principal__media--video,
body.front-page .mh-capa-principal__media--video {
    max-height: none;
}

body.home .mh-capa-principal__carousel-track,
body.front-page .mh-capa-principal__carousel-track {
    min-height: 280px;
    max-height: 900px;
}

@media (max-width: 768px) {
    body.home .mh-capa-principal__carousel-dots,
    body.front-page .mh-capa-principal__carousel-dots {
        bottom: 30px;
    }
}

/* Navegação do carousel */
.mh-capa-principal__carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    z-index: 10;
}

.mh-capa-principal__carousel:hover .mh-capa-principal__carousel-nav,
.mh-capa-principal__carousel-nav:focus {
    opacity: 1;
}

.mh-capa-principal__carousel-nav:hover {
    background: rgba(255, 255, 255, 1);
}

.mh-capa-principal__carousel-nav:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.mh-capa-principal__carousel-nav--prev {
    left: 1rem;
}

.mh-capa-principal__carousel-nav--next {
    right: 1rem;
}

.mh-capa-principal__carousel-nav svg {
    fill: currentColor;
}

/* Dots de navegação — sobrepostos à media, centrados, a 30px do fundo. */
.mh-capa-principal__carousel-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 0.5rem;
}

.mh-capa-principal__carousel-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.mh-capa-principal__carousel-dot:hover,
.mh-capa-principal__carousel-dot:focus {
    background: rgba(255, 255, 255, 0.9);
}

.mh-capa-principal__carousel-dot.is-active {
    background: #fff;
    transform: scale(1.2);
}

.mh-capa-principal__carousel-dot:focus-visible {
    outline: none;
    border-color: currentColor;
}

/* Reduzir movimento para acessibilidade */
@media (prefers-reduced-motion: reduce) {
    .mh-capa-principal__carousel-track {
        transition: none;
    }

    .mh-capa-principal__carousel-slide {
        transition: none;
    }
}

/* Mobile: mostrar navegação sempre */
@media (max-width: 768px) {
    .mh-capa-principal__carousel-nav {
        opacity: 1;
        width: 40px;
        height: 40px;
    }

    .mh-capa-principal__carousel-nav--prev {
        left: 0.5rem;
    }

    .mh-capa-principal__carousel-nav--next {
        right: 0.5rem;
    }
}

/* Cartões de projeto (reutilizáveis) */
.mh-project-card {
    position: relative;
    height: 100%;
}

.mh-project-card--mosaico {
    height: auto;
}

.mh-project-card__link {
    display: grid;
    gap: 0.85rem;
    height: 100%;
    text-decoration: none;
}

.mh-project-card__link:hover {
    text-decoration: none;
}

.mh-project-card__media {
    overflow: hidden;
}

.mh-project-card__image {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 240ms ease;
}

.mh-project-card.is-portrait .mh-project-card__image {
    aspect-ratio: 18 / 25;
}

.mh-project-card__image--placeholder {
    background: #efefef;
}

.mh-project-card__title {
    margin: 0;
    font-size: 20px;
}

.mh-project-card__subtitle {
    font-size: 14px;
}

.mh-project-card__arrow {
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 240ms ease, transform 240ms ease;
}

.mh-project-card__link:hover .mh-project-card__image,
.mh-project-card__link:focus-visible .mh-project-card__image {
    transform: scale(1.02);
}

.mh-project-card__link:hover .mh-project-card__arrow,
.mh-project-card__link:focus-visible .mh-project-card__arrow {
    opacity: 1;
    transform: translateY(0);
}

.mh-project-card--mosaico .mh-project-card__link {
    display: block;
    position: relative;
    height: auto;
}

.mh-project-card--mosaico .mh-project-card__media {
    position: relative;
}

.mh-project-card--mosaico .mh-project-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity var(--mh-motion-duration-fast) var(--mh-motion-ease-enter);
    pointer-events: none;
}

.mh-project-card--mosaico .mh-project-card__content {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
    z-index: 2;
}

.mh-project-card--mosaico .mh-project-card__title {
    color: var(--mh-color-white);
    font-size: clamp(1.35rem, 1.2vw + 1rem, 2.1rem);
    line-height: 1.12;
    opacity: 0;
    transform: translateY(var(--mh-motion-distance-sm));
    transition:
        opacity var(--mh-motion-duration-fast) var(--mh-motion-ease-enter),
        transform var(--mh-motion-duration-fast) var(--mh-motion-ease-enter);
}

.mh-project-card--mosaico .mh-project-card__subtitle {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.05rem;
    opacity: 0;
    transform: translateY(var(--mh-motion-distance-sm));
    transition:
        opacity var(--mh-motion-duration-fast) var(--mh-motion-ease-enter),
        transform var(--mh-motion-duration-fast) var(--mh-motion-ease-enter);
    transition-delay: 60ms;
}

.mh-project-card--mosaico .mh-project-card__arrow {
    right: 1.25rem;
    bottom: 1.25rem;
    top: auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0;
    background-color: transparent;
    background-image: url('../img/icon-link.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    font-size: 0;
    line-height: 1;
    z-index: 2;
    opacity: 0;
    transform: translateX(calc(var(--mh-motion-distance-sm) * -1));
    transition:
        opacity var(--mh-motion-duration-fast) var(--mh-motion-ease-enter),
        transform var(--mh-motion-duration-fast) var(--mh-motion-ease-enter);
}

.mh-project-card--mosaico .mh-project-card__link:hover .mh-project-card__media::after,
.mh-project-card--mosaico .mh-project-card__link:focus-visible .mh-project-card__media::after {
    opacity: 1;
}

.mh-project-card--mosaico .mh-project-card__link:hover .mh-project-card__title,
.mh-project-card--mosaico .mh-project-card__link:focus-visible .mh-project-card__title,
.mh-project-card--mosaico .mh-project-card__link:hover .mh-project-card__subtitle,
.mh-project-card--mosaico .mh-project-card__link:focus-visible .mh-project-card__subtitle {
    opacity: 1;
    transform: translateY(0);
}

.mh-project-card--mosaico .mh-project-card__link:hover .mh-project-card__arrow,
.mh-project-card--mosaico .mh-project-card__link:focus-visible .mh-project-card__arrow {
    opacity: 1;
    transform: translateX(0);
}

.mh-project-card--mosaico .mh-project-card__link:hover .mh-project-card__image,
.mh-project-card--mosaico .mh-project-card__link:focus-visible .mh-project-card__image {
    transform: none;
}

.mh-project-card--archive {
    height: auto;
}

.mh-project-card--archive .mh-project-card__link {
    display: block;
    position: relative;
    height: auto;
}

.mh-project-card--archive .mh-project-card__media {
    position: relative;
}

.mh-project-card--archive .mh-project-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity var(--mh-motion-duration-fast) var(--mh-motion-ease-enter);
    pointer-events: none;
}

.mh-project-card--archive .mh-project-card__content {
    position: static;
    margin-top: 1rem;
}

.mh-project-card--archive .mh-project-card__title {
    margin: 0;
    color: var(--mh-color-white);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    opacity: 1;
    transform: none;
}

.mh-project-card--archive .mh-project-card__subtitle {
    margin-top: 0.35rem;
    color: var(--mh-color-white);
    font-weight: 300;
    font-size: 20px;
    opacity: 1;
    transform: none;
}

.mh-project-card--archive .mh-project-card__arrow {
    right: 1.25rem;
    bottom: 1.25rem;
    top: auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0;
    background-color: transparent;
    background-image: url('../img/icon-link.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    font-size: 0;
    line-height: 1;
    z-index: 2;
    opacity: 0;
    transform: translateX(calc(var(--mh-motion-distance-sm) * -1));
    transition:
        opacity var(--mh-motion-duration-fast) var(--mh-motion-ease-enter),
        transform var(--mh-motion-duration-fast) var(--mh-motion-ease-enter);
}

.mh-project-card--archive .mh-project-card__link:hover .mh-project-card__media::after,
.mh-project-card--archive .mh-project-card__link:focus-visible .mh-project-card__media::after {
    opacity: 1;
}

.mh-project-card--archive .mh-project-card__link:hover .mh-project-card__title,
.mh-project-card--archive .mh-project-card__link:focus-visible .mh-project-card__title,
.mh-project-card--archive .mh-project-card__link:hover .mh-project-card__subtitle,
.mh-project-card--archive .mh-project-card__link:focus-visible .mh-project-card__subtitle {
    opacity: 1;
    transform: translateY(0);
}

.mh-project-card--archive .mh-project-card__link:hover .mh-project-card__arrow,
.mh-project-card--archive .mh-project-card__link:focus-visible .mh-project-card__arrow {
    opacity: 1;
    transform: translateX(0);
}

.mh-project-card--archive .mh-project-card__link:hover .mh-project-card__image,
.mh-project-card--archive .mh-project-card__link:focus-visible .mh-project-card__image {
    transform: none;
}

/* Cartão de projeto: Related (single-projects) */
.mh-project-card--related {
    height: auto;
}

.mh-project-card--related .mh-project-card__link {
    display: block;
    position: relative;
    height: auto;
}

.mh-project-card--related .mh-project-card__media {
    position: relative;
    overflow: hidden;
}

.mh-project-card--related .mh-project-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity var(--mh-motion-duration-fast) var(--mh-motion-ease-enter);
    pointer-events: none;
    z-index: 1;
}

.mh-project-card--related .mh-project-card__image {
    aspect-ratio: 3 / 2;
}

.mh-project-card--related .mh-project-card__content {
    margin-top: 1rem;
}

.mh-project-card--related .mh-project-card__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--mh-color-white);
}

.mh-project-card--related .mh-project-card__subtitle {
    font-size: 20px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.72);
    margin: 0.35rem 0 0;
}

.mh-project-card--related .mh-project-card__arrow {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    top: auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0;
    background-color: transparent;
    background-image: url('../img/icon-link.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    font-size: 0;
    line-height: 1;
    z-index: 2;
    opacity: 0;
    transform: translateX(calc(var(--mh-motion-distance-sm) * -1));
    transition:
        opacity var(--mh-motion-duration-fast) var(--mh-motion-ease-enter),
        transform var(--mh-motion-duration-fast) var(--mh-motion-ease-enter);
    pointer-events: none;
}

.mh-project-card--related .mh-project-card__link:hover .mh-project-card__media::after,
.mh-project-card--related .mh-project-card__link:focus-visible .mh-project-card__media::after {
    opacity: 1;
}

.mh-project-card--related .mh-project-card__link:hover .mh-project-card__arrow,
.mh-project-card--related .mh-project-card__link:focus-visible .mh-project-card__arrow {
    opacity: 1;
    transform: translateX(0);
}

.mh-project-card--related .mh-project-card__link:hover .mh-project-card__image,
.mh-project-card--related .mh-project-card__link:focus-visible .mh-project-card__image {
    transform: scale(1.02);
}

/* Bloco: Cartão de Projeto */
.mh-block-cartao-projeto {
    margin-bottom: 2.5rem;
}

.mh-project-card--single {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mh-project-card--single .mh-project-card__header {
    display: flex;
    flex-direction: column;
}

.mh-project-card--single .mh-project-card__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    line-height: .6;
}

.mh-project-card--single .mh-project-card__subtitle {
    font-size: 20px;
    font-weight: 300;
    margin: 0.5rem 0 0;
}

.mh-project-card__view-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.35rem;
    margin-top: 1rem;
    font-size: 20px !important;
    font-weight: 700;
    color: var(--mh-color-brand-tertiary);
    text-decoration: none;
}

.mh-project-card__view-link:has(.mh-project-card__view-label)::before {
    display: none !important;
}

.mh-project-card__view-link:hover {
    color: var(--mh-color-black);
}

.mh-project-card__view-label {
    position: relative;
    display: inline-block;
}

.mh-project-card__view-label::before {
    content: "";
    width: 0;
    height: 0.125rem;
    background-color: currentColor;
    position: absolute;
    bottom: 0.0625rem;
    left: auto;
    right: 0;
    transition: all 1.5s cubic-bezier(0.1, 0.6, 0.4, 1);
}

.mh-project-card__view-link:hover .mh-project-card__view-label::before,
.mh-project-card__view-link:focus-visible .mh-project-card__view-label::before {
    width: 100%;
    left: 0;
    right: auto;
}

.mh-project-card__view-arrow {
    font-size: 1.25rem;
    line-height: 1;
}

.mh-project-card__media-link {
    display: block;
    text-decoration: none;
}

.mh-project-card__media-link:hover .mh-project-card__image,
.mh-project-card__media-link:focus-visible .mh-project-card__image {
    transform: scale(1.02);
}

/* Bloco: Mosaico de Projetos */
.mh-block-mosaico-projetos {
    margin-bottom: 2.5rem;
}

.mh-mosaico__title {
    margin: 0 0 1.25rem;
    font-size: clamp(1.125rem, 2vw + 0.5rem, 1.5rem);
}

.mh-mosaico__subtitle {
    font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);
}

.mh-mosaico__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1rem);
    align-items: start;
}

.mh-mosaico__columns {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.mh-mosaico__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mh-mosaico__item {
    grid-column: span 6;
}

.mh-mosaico--alternado .mh-mosaico__item:nth-child(3n + 1) {
    grid-column: span 7;
}

.mh-mosaico--alternado .mh-mosaico__item:nth-child(3n + 2),
.mh-mosaico--alternado .mh-mosaico__item:nth-child(3n + 3) {
    grid-column: span 5;
}

.mh-mosaico--destaque .mh-mosaico__item:first-child {
    grid-column: span 12;
}

/* Bloco: Arquivo de Projetos */
.mh-block-arquivo-projetos {
    margin-bottom: 2.5rem;
}

.mh-project-archive__header {
    margin-bottom: 1rem;
}

.mh-project-archive__title {
    margin: 0;
    font-size: 24px;
    color: var(--mh-color-white);
}

.mh-project-archive__subtitle {
    margin: 0.35rem 0 0;
    font-size: 14px;
    color: var(--mh-color-white);
}

.mh-project-archive__filter-list {
    list-style: none;
    margin: 0 0 50px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 4vw, 40px);
}

.mh-project-archive__filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.2rem 0;
    font-size: 20px !important;
    font-weight: 700;
    color: var(--mh-color-brand-tertiary);
    text-decoration: none;
    position: relative;
}

.mh-project-archive__filter::before {
    bottom: 0;
    height: 2px;
}

.mh-project-archive__filter.is-active::before {
    width: 100%;
    left: 0;
    right: auto;
}

.mh-project-archive__filter:hover,
.mh-project-archive__filter.is-active,
.mh-project-archive__filter:focus-visible {
    font-weight: 700;
    color: var(--mh-project-filter-color, var(--mh-color-white));
}

/* Cor por categoria nos filtros (hover e ativo). "Todos os projetos"
   (data-filter-term vazio) mantém o branco via fallback da variável. */
.mh-project-archive__filter[data-filter-term="branding"] {
    --mh-project-filter-color: var(--wp--preset--color--pink);
}

.mh-project-archive__filter[data-filter-term="print"] {
    --mh-project-filter-color: var(--wp--preset--color--green);
}

.mh-project-archive__filter[data-filter-term="digital"] {
    --mh-project-filter-color: var(--wp--preset--color--orange);
}

.mh-project-archive__filter[data-filter-term="ambientes"] {
    --mh-project-filter-color: var(--wp--preset--color--purple);
}

.mh-project-archive__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(0.75rem, 2vw, 1rem);
    row-gap: 30px;
}

.mh-project-archive__grid>* {
    will-change: opacity, transform;
}

.mh-project-archive__item {
    grid-column: span 6;
}

@media (min-width: 1024px) {
    .mh-project-archive__item {
        grid-column: span 4;
    }
}

.mh-project-archive__pagination {
    margin-top: 1.5rem;
}

.mh-project-archive__pagination .page-numbers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mh-project-archive__pagination .page-numbers a,
.mh-project-archive__pagination .page-numbers span,
.mh-project-archive__load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--mh-color-border);
    text-decoration: none;
}

.mh-project-archive__pagination a:hover,
.mh-project-archive__load-more:hover {
    text-decoration: none;
}

.mh-project-archive__pagination .page-numbers .current,
.mh-project-archive__load-more:hover,
.mh-project-archive__load-more:focus-visible {
    background: var(--mh-color-black);
    color: var(--mh-color-white);
}

.mh-project-archive__infinite {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 2.2rem;
    margin-top: 1.5rem;
}

.mh-project-archive__infinite.is-complete {
    display: none;
}

.mh-project-archive__infinite-status:empty::before,
.mh-project-archive__infinite.is-loading .mh-project-archive__infinite-status::before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    border: 2px solid var(--mh-color-border);
    border-top-color: var(--mh-color-black);
    border-radius: 50%;
    vertical-align: middle;
    animation: mh-infinite-spin 0.7s linear infinite;
}

.mh-project-archive__infinite:not(.is-loading) .mh-project-archive__infinite-status:empty::before {
    display: none;
}

@keyframes mh-infinite-spin {
    to {
        transform: rotate(360deg);
    }
}

.project-single__header {
    margin-bottom: 1rem;
}

.project-single__nome {
    margin: 0.25rem 0 0;
    color: var(--mh-color-brand-secondary);
}

.project-single__categories {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-single__categories a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.1rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--mh-color-border);
    text-decoration: none;
}

.project-single__categories a:hover {
    text-decoration: none;
}

.project-single__featured-image {
    width: var(--mh-page-width);
    margin: 1.5rem auto;
}

.project-single__featured-image-el {
    width: 100%;
    height: auto;
    display: block;
}

.project-single__footer {
    width: var(--mh-content-width-safe);
    margin: 2rem auto 0;
}

.project-single__adjacent {
    border-top: 1px solid var(--mh-color-border);
    padding-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.project-single__adjacent a {
    text-decoration: none;
    font-weight: 500;
}

.project-single__adjacent a:hover {
    text-decoration: none;
}

.project-single__related {
    margin-top: 140px;
    padding: 0;
    border-top: none;
}

.project-single__related>.wp-block-group {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    background-color: var(--mh-color-black);

    @media (min-width: 1024px) {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

.project-single__related>.wp-block-group>.wp-block-group__inner-container {
    width: var(--mh-page-width);
    max-width: var(--mh-max-width);
    margin-inline: auto;
}

.project-single__related-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.project-single__related-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--mh-color-white);
}
.project-single__related-portfolio-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--mh-color-brand-tertiary);
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--mh-motion-duration-fast) var(--mh-motion-ease-enter);
}

.project-single__related-portfolio-link:hover,
.project-single__related-portfolio-link:focus-visible {
    color: var(--mh-color-white);
}

.project-single__related-nav {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
}

.project-single__related-arrow {
    position: absolute;
    top: calc((100cqw - 2 * var(--mh-related-gap)) / 9);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: rgba(255, 255, 255, 0.9);
    color: var(--mh-color-black);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    transform: translateY(-50%);
    transition: opacity var(--mh-motion-duration-fast) var(--mh-motion-ease-enter), background var(--mh-motion-duration-fast) var(--mh-motion-ease-enter);
}

.project-single__related-arrow[data-related-carousel-prev] {
    left: 1rem;
}

.project-single__related-arrow[data-related-carousel-next] {
    right: 1rem;
}

.project-single__related-arrow:hover:not(:disabled) {
    background: var(--mh-color-white);
}

.project-single__related-arrow:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.project-single__related-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.project-single__related-carousel {
    --mh-related-gap: clamp(1rem, 2vw, 1.5rem);

    position: relative;
    container-type: inline-size;
}

.project-single__related-track {
    --mh-related-gap: clamp(1rem, 2vw, 1.5rem);

    display: flex;
    gap: var(--mh-related-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.project-single__related-track::-webkit-scrollbar {
    display: none;
}

.project-single__related-item {
    flex: 0 0 calc((100% - 2 * var(--mh-related-gap)) / 3);
    min-width: 0;
    scroll-snap-align: start;
}

@media (max-width: 639px) {
    .project-single__related-item {
        flex-basis: 100%;
    }

    .project-single__related-head {
        flex-wrap: wrap;
        margin-bottom: 2rem;
    }

    .project-single__related-arrow {
        top: 33.333cqw;
        width: 40px;
        height: 40px;
    }

    .project-single__related-arrow[data-related-carousel-prev] {
        left: 0.75rem;
    }

    .project-single__related-arrow[data-related-carousel-next] {
        right: 0.75rem;
    }
}

.site-footer {
    width: 100%;
    margin-inline: auto;
    background: var(--mh-color-black);
    color: var(--mh-color-white);
    font-size: clamp(0.875rem, 1vw + 0.5rem, 1.25rem);
}

.site-footer a {
    font-size: inherit;
}

.site-footer p {
    font-size: inherit;
}

.site-footer__inner {
    width: 100%;
    max-width: var(--mh-group-max-width);
    margin-inline: auto;
    padding-inline: var(--mh-group-padding-x);
    padding-top: var(--mh-page-gutter);
    padding-bottom: var(--mh-page-gutter);
}

@media screen and (min-width: 1321px) {
    .site-footer__inner {
        padding-inline: 0;
    }
}

.site-footer__columns {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: stretch;
}

.site-footer__primary {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

.site-footer__branding {
    display: flex;
    align-items: center;
}

.site-footer__branding .wp-block-image {
    margin: 0;
}

.site-footer__branding img {
    display: block;
    width: auto;
    height: auto;
    max-height: 52px;
}

.site-footer__logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.site-footer__logo-link:hover {
    text-decoration: none;
}

.site-logo--footer {
    /* Footer logo can be larger than header */
    max-height: 52px;
    max-width: 280px;
}

.site-footer__title {
    margin: 0;
    font-weight: 700;
    font-size: 1.125rem;
}

.widget {
    margin: 0;
}

.widget-title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.site-footer .widget-title {
    color: var(--mh-color-white);
}

.site-footer__widget-col {
    color: var(--mh-color-white)
}

.site-footer__widget-col a {
    text-decoration: none;
    color: inherit;
}

.site-footer__widget-col a:hover {
    text-decoration: none;
}

.site-footer__widget-col a:hover,
.site-footer__widget-col a:focus-visible {
    color: var(--mh-color-white);
}

.site-footer__widget-col--secondary {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.site-footer__widget-col--tertiary {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.site-footer__copyright {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    color: var(--mh-color-white);
}

.site-footer--light {
    background: var(--mh-color-white);
    color: var(--mh-color-text);
}

.site-footer--light .site-footer__widget-title,
.site-footer--light .widget-title {
    color: var(--mh-color-black);
}

.site-footer--light .site-footer__widget-col {
    color: var(--mh-color-black);
}

.site-footer--light .site-footer__widget-col a:hover,
.site-footer--light .site-footer__widget-col a:focus-visible {
    color: var(--mh-color-black);
}

.site-footer--light .site-footer__copyright {
    color: var(--mh-color-black)
}

/* Keep footer branding SVG dark when footer background is light */
.site-footer--light .site-footer__branding .wp-image-101 {
    filter: brightness(0);
}

.site-footer--light .site-footer__branding .wp-image-101 :is(path, rect, circle, ellipse, polygon, polyline) {
    fill: var(--mh-color-black) !important;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --mh-motion-duration-fast: 240ms;
        --mh-motion-duration-base: 240ms;
        --mh-motion-duration-slow: 240ms;
        --mh-motion-duration-overlay: 240ms;
        --mh-motion-reveal-delay: 0ms;
        --mh-motion-distance-sm: 0px;
        --mh-motion-distance-md: 0px;
        --mh-motion-distance-lg: 0px;
    }

    .reveal-ready,
    .menu-overlay__stagger-item,
    #page-transition-title {
        transform: none !important;
    }
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   Matching  patterns:
   - sm: 640px
   - md: 768px
   - lg: 1024px
   - xl: 1280px
   - 2xl: 1320px (theme max-width)
   ============================================ */

/* Tablet and up (640px+) - 2 column layouts */
@media (min-width: 640px) {
    :root {
        /* Increase gutter on larger screens */
        --mh-page-gutter: 4vw;
        --mh-grid-row-gap-mobile: 20px;
    }

    .wp-block-paragraph,
    p,
    .wp-block-list {
        font-size: 20px;
        line-height: 1.6;
    }
}

/* Tablet landscape and up (768px+) */
@media (min-width: 768px) {
    :root {
        --mh-page-gutter: 5vw;
    }
}

/* Desktop and up (1024px+) */
@media (min-width: 1024px) {

    .wp-block-paragraph,
    p,
    .wp-block-list {
        font-size: 20px;
        line-height: 1.6;
    }
}

/* Large Desktop (1280px+) */
@media (min-width: 1280px) {

    .wp-block-paragraph,
    p,
    .wp-block-list {
        font-size: 20px;
    }
}

/* Max-width container (1320px+) */
@media (min-width: 1320px) {
    :root {
        --mh-go-up-right-offset: calc((100% - var(--mh-max-width)) / 2 + 20px);
    }

    .go-up-button {
        right: 40px;
    }
}

/* ============================================
   MOBILE OVERRIDES (< 640px)
   ============================================ */
@media (max-width: 639px) {
    :root {
        --mh-group-padding-x: 5.25vw;
        --mh-grid-row-gap-mobile: 16px;
    }

    .site-header {
        padding: 12px 0;
    }

    .site-header__controls {
        width: auto;
    }

    .site-logo {
        max-height: 20px;
        max-width: auto;
    }

    .main-navigation {
        display: none;
    }

    /* Menu overlay mobile adjustments */
    .menu-overlay__inner {
        padding: 0 12px;
    }

    .menu-overlay__menu,
    .menu-overlay__project-list {
        gap: 20px;
    }

    .menu-overlay__menu a,
    .menu-overlay__project-list a {
        font-size: clamp(2rem, 8vw, 3rem);
        line-height: 1.1;
    }

    .menu-overlay__main-nav {
        margin-top: clamp(6rem, 20vh, 10rem);
    }

    /* Grid layouts - single column on mobile */
    .mh-mosaico__item,
    .mh-mosaico--alternado .mh-mosaico__item,
    .mh-mosaico--destaque .mh-mosaico__item,
    .mh-project-archive__item {
        grid-column: span 12;
    }

    .mh-mosaico__columns {
        flex-direction: column;
    }

    .mh-mosaico__col {
        display: contents;
    }

    .mh-mosaico__columns .mh-mosaico__item {
        order: var(--mh-mosaico-order, 0);
    }

    /* Project single adjustments */
    .project-single__adjacent {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .site-footer__columns {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 2rem;
    }

    .site-footer__primary,
    .site-footer__widget-col--secondary,
    .site-footer__widget-col--tertiary,
    .site-footer__copyright {
        grid-column: auto;
        grid-row: auto;
    }

    .site-footer__copyright {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Go up button mobile position */
    .go-up-button {
        right: 12px;
        bottom: 12px;
        width: 40px;
        height: 40px;
    }
}

/* Small mobile adjustments (< 480px) */
@media (max-width: 479px) {
    :root {
        --mh-page-gutter: 3vw;
    }

    .menu-overlay__menu,
    .menu-overlay__project-list {
        gap: 20px;
    }
}

/* ============================================================
   Responsive 4-column → 2×2 grid layout for Gutenberg Columns
   Apply class "is-style-2x2-mobile" to the Columns block
   ============================================================ */

/* Desktop: 4 columns side by side (default Gutenberg behavior) */
.wp-block-columns.is-style-2x2-mobile {
    /* No changes needed - uses default flex layout */
}

/* Tablet and below: 2×2 grid */
@media (max-width: 781px) {
    .wp-block-columns.is-style-2x2-mobile {
        flex-wrap: wrap !important;
        gap: var(--wp--style--block-gap, 1rem) !important;
    }

    .wp-block-columns.is-style-2x2-mobile>.wp-block-column {
        flex-basis: calc(50% - var(--wp--style--block-gap, 1rem) / 2) !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
    }
}

/* Mobile: Stack to single column (optional - remove if you want 2×2 even on small screens) */
@media (max-width: 480px) {
    .wp-block-columns.is-style-2x2-mobile>.wp-block-column {
        flex-basis: 100% !important;
    }
}

/* ==========================================================================
   Group Block Vertical Paddings - matching 
   Overrides backend-set values with fluid responsive spacing
   ========================================================================== */

/* Remove default WordPress group padding and apply fluid system
   Keep width at 100% for alignfull backgrounds to occupy full viewport
*/
.wp-block-group.has-background,
.wp-block-group {
    padding-top: 0;
    padding-bottom: 0;
}

/* Ensure alignfull groups are TRUE full width for viewport-wide backgrounds */
.wp-block-group.alignfull {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Section padding utilities - matching  section__container patterns */
.mh-section--xs {
    padding-top: clamp(0.75rem, 2vw, 1rem);
    padding-bottom: clamp(0.75rem, 2vw, 1rem);
}

.mh-section--sm {
    padding-top: clamp(1rem, 3vw, 1.25rem);
    padding-bottom: clamp(1rem, 3vw, 1.25rem);
}

.mh-section--md {
    padding-top: clamp(1.5rem, 4vw, 2rem);
    padding-bottom: clamp(1.5rem, 4vw, 2rem);
}

.mh-section--lg {
    padding-top: clamp(2rem, 5vw, 3rem);
    padding-bottom: clamp(2rem, 5vw, 3rem);
}

.mh-section--xl {
    padding-top: clamp(3rem, 6vw, 4rem);
    padding-bottom: clamp(3rem, 6vw, 4rem);
}

.mh-section--2xl {
    padding-top: clamp(4rem, 8vw, 6rem);
    padding-bottom: clamp(4rem, 8vw, 6rem);
}

.mh-section--3xl {
    padding-top: clamp(6rem, 12vw, 10rem);
    padding-bottom: clamp(6rem, 12vw, 10rem);
}

/* Alternative: Apply fluid padding to ALL alignfull groups by default */
/* Uncomment below to force fluid padding on all full-width groups */
/*
.wp-block-group.alignfull {
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}
*/

/* Specific spacing patterns from :
   - Header: py-3 (12px) → xl:py-5 (20px)
   - Content sections: py-8 (32px) → py-12 (48px) → py-32 (128px)
   - Using viewport-relative scaling
*/

/* Default fluid padding for groups without explicit sizing */
.wp-block-columns {
    padding-top: clamp(6rem, 5vw, 3rem);
    padding-bottom: clamp(6rem, 5vw, 3rem);
}

.wp-block-columns.no-padding {
    padding-top: 0;
    padding-bottom: 0;
}

.wp-block-columns.extra-padding {
    padding-top: 10rem;
    padding-bottom: 10rem;
}

/* Mobile: match the 100px row spacing used on Sobre Nós (inline editor padding)
   so the first H2 sits at the same distance below the hero on every page. */
@media (max-width: 781px) {
    .wp-block-columns.extra-padding {
        padding-top: 6.25rem; /* 100px */
    }
}

/* ==========================================================================
   Grid System - matching 
   ========================================================================== */

/* Grid container */
.mh-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* Grid item base */
.mh-grid__item {
    width: 100%;
    padding-left: var(--mh-grid-item-padding);
    padding-right: var(--mh-grid-item-padding);
    margin-bottom: var(--mh-grid-row-gap-mobile);
}

/* Grid item large (full width on all screens) */
.mh-grid__item--large {
    width: 100%;
}

/* Tablet and above: 2 columns */
@media (min-width: 640px) {
    .mh-grid__item {
        width: 50%;
        margin-bottom: var(--mh-grid-row-gap-desktop);
    }

    .mh-grid__item--large {
        width: 50%;
    }
}

/* Desktop and above: 3 columns */
@media (min-width: 1024px) {
    .mh-grid__item {
        width: 33.333333%;
    }

    .mh-grid__item--large {
        width: 50%;
    }
}

/* Section container - matching  section__container */
.mh-section {
    position: relative;
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

/* Utility: Full width */
.mh-full-width {
    width: 100%;
    max-width: none;
}

/* Utility: Content width (1320px) */
.mh-content-width {
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

.wp-singular .site-footer_branding img {
    filter: brightness(0) !important;
}

/* Unique elements */
.wp-elements-cd49dd3395eef797f2a11615a18c5965 {
    padding-top: clamp(14rem, 5vw, 7rem);
    padding-bottom: clamp(14rem, 5vw, 7rem);
}

.wp-elements-141a63f59bbb36e376328ee3675e94a2 {
    @media screen and (min-width: 1024px) {
        margin-right: 5%;
    }
}

/* Sobre nós: 1 full-width column + 2x2 columns on smaller screens
 * Preferred: add HTML Anchor "sobre-areas-grid" to the target Columns block.
 */
@media screen and (max-width: 1023px) {
    /* Works if the ID is on the Columns block OR on its parent Group block */
    #sobre-areas-grid.wp-block-columns,
    #sobre-areas-grid > .wp-block-columns,
    /* Temporary fallbacks for current markup */
    .wp-elements-bc6325fd378eadc2da58c682d69fdef8 > .wp-block-columns,
    .wp-elements-3a7b68bc9640b1becf1b291ff4c1370e > .wp-block-columns,
    body.page-id-40 .wp-block-columns.alignwide.are-vertically-aligned-top.is-not-stacked-on-mobile {
        flex-wrap: wrap !important;
    }

    #sobre-areas-grid.wp-block-columns > .wp-block-column:first-child,
    #sobre-areas-grid > .wp-block-columns > .wp-block-column:first-child,
    .wp-elements-bc6325fd378eadc2da58c682d69fdef8 > .wp-block-columns > .wp-block-column:first-child,
    .wp-elements-3a7b68bc9640b1becf1b291ff4c1370e > .wp-block-columns > .wp-block-column:first-child,
    body.page-id-40 .wp-block-columns.alignwide.are-vertically-aligned-top.is-not-stacked-on-mobile > .wp-block-column:first-child {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #sobre-areas-grid.wp-block-columns > .wp-block-column:nth-child(n + 2),
    #sobre-areas-grid > .wp-block-columns > .wp-block-column:nth-child(n + 2),
    .wp-elements-bc6325fd378eadc2da58c682d69fdef8 > .wp-block-columns > .wp-block-column:nth-child(n + 2),
    .wp-elements-3a7b68bc9640b1becf1b291ff4c1370e > .wp-block-columns > .wp-block-column:nth-child(n + 2),
    body.page-id-40 .wp-block-columns.alignwide.are-vertically-aligned-top.is-not-stacked-on-mobile > .wp-block-column:nth-child(n + 2) {
        /* account for 24px flex gap so 2 columns can fit on one row */
        flex: 0 0 calc(50% - (var(--wp--style--block-gap, 24px) / 2)) !important;
        width: calc(50% - (var(--wp--style--block-gap, 24px) / 2)) !important;
        max-width: calc(50% - (var(--wp--style--block-gap, 24px) / 2)) !important;
    }

    /* Add extra spacing before the second row (columns 2 and 3) */
    #sobre-areas-grid.wp-block-columns > .wp-block-column:nth-child(2),
    #sobre-areas-grid.wp-block-columns > .wp-block-column:nth-child(3),
    #sobre-areas-grid > .wp-block-columns > .wp-block-column:nth-child(2),
    #sobre-areas-grid > .wp-block-columns > .wp-block-column:nth-child(3),
    .wp-elements-bc6325fd378eadc2da58c682d69fdef8 > .wp-block-columns > .wp-block-column:nth-child(2),
    .wp-elements-bc6325fd378eadc2da58c682d69fdef8 > .wp-block-columns > .wp-block-column:nth-child(3),
    .wp-elements-3a7b68bc9640b1becf1b291ff4c1370e > .wp-block-columns > .wp-block-column:nth-child(2),
    .wp-elements-3a7b68bc9640b1becf1b291ff4c1370e > .wp-block-columns > .wp-block-column:nth-child(3),
    body.page-id-40 .wp-block-columns.alignwide.are-vertically-aligned-top.is-not-stacked-on-mobile > .wp-block-column:nth-child(2),
    body.page-id-40 .wp-block-columns.alignwide.are-vertically-aligned-top.is-not-stacked-on-mobile > .wp-block-column:nth-child(3) {
        margin-top: 30px !important;
    }

    /* Fix icons group spacing on mobile devices */
    .is-mh-icons {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: -40px !important;
    }

    .page-template-default .site-main {
        margin-top: 0 !important;
    }
}