/* Preserve the approved phone layout. Only repair its narrow-screen overflow. */
@media (max-width: 374px) {
    html body.page.mb-responsive .pagespan ul:is(#menu-interiores, #menu-arquitetura, #menu-variosservicos) > li[id^="menu-item-"] {
        width: min(100%, 306px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    html body.home.mb-responsive > .container > .row > .AreaSpot.AreaServicos,
    html body.home.mb-responsive .AreaServicos .Sidemenuservicos,
    html body.home.mb-responsive .AreaServicos #menu-servicos {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    html body.home.mb-responsive > .container > .row > .AreaSpot.AreaServicos {
        display: block !important;
    }
    html body.home.mb-responsive .AreaSpot.AreaServicos #better-menu-widget-2 #menu-servicos.menuservicos > li:is(#menu-item-67, #menu-item-68, #menu-item-65),
    html body.home.mb-responsive .AreaSpot.AreaServicos #better-menu-widget-2 #menu-servicos.menuservicos > li:is(#menu-item-67, #menu-item-68, #menu-item-65) > a {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    html body.home.mb-responsive .AreaSpot.AreaServicos #better-menu-widget-2 #menu-servicos.menuservicos > li:is(#menu-item-67, #menu-item-68, #menu-item-65) {
        width: min(100%, 306px) !important;
    }
}

@media (min-width: 768px) {
    html body.mb-responsive .container {
        box-sizing: border-box !important;
        width: calc(100% - 40px) !important;
        max-width: 1300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    html body.mb-responsive :is(.AreaPage, .pagespan, .SideGoals, .otw-columns) {
        min-width: 0 !important;
        max-width: 100%;
    }
    html body.mb-responsive .pagespan,
    html body.mb-responsive .SideGoals > .widget {
        height: auto !important;
        min-height: 0 !important;
    }
    html body.mb-responsive :is(.pagespan, .milobras-site-footer__grid) :is(h1, h2, h3, p, a) {
        overflow-wrap: break-word;
    }
    html body.mb-responsive .pagespan :is(img, video, iframe),
    html body.mb-responsive form :is(input, select, textarea) {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Stretch paired columns, not their text or photographs. */
    html body.home.mb-responsive > .container > .row:has(.AreaVideo),
    html body.home.mb-responsive > .container > .row:has(.AreaNovidades),
    html body.mb-responsive .container.sidebar > .row:has(.SideGoals),
    html body.mb-responsive .container > .row:has(> .AreaTestemunhos) {
        display: flex !important;
        flex-wrap: wrap;
        align-items: stretch;
    }
    html body.home.mb-responsive > .container > .row:has(.AreaVideo),
    html body.home.mb-responsive > .container > .row:has(.AreaNovidades) {
        width: calc(100% + 30px) !important;
        max-width: none !important;
        height: auto !important;
    }
    html body.mb-responsive .row:has(> .AreaSpot)::before,
    html body.mb-responsive .row:has(> .AreaSpot)::after,
    html body.mb-responsive .container.sidebar > .row:has(.SideGoals)::before,
    html body.mb-responsive .container.sidebar > .row:has(.SideGoals)::after {
        display: none;
    }
    html body.home.mb-responsive :is(.AreaVideo, .AreaBemvindos, .AreaNovidades, .AreaServicos) {
        display: flex;
        min-width: 0;
    }
    html body.home.mb-responsive :is(.SideBemvindos, .Sidenovidades, .Sidemenuservicos) {
        width: 100%;
        height: auto !important;
        min-height: 0;
        margin-top: 30px !important;
        display: flex;
        flex-direction: column;
    }
    html body.home.mb-responsive :is(.SideBemvindos, .Sidenovidades) {
        margin-top: 0 !important;
    }
    html body.home.mb-responsive :is(.SideBemvindos, .Sidenovidades) > .widget {
        height: auto !important;
        min-height: 0 !important;
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-top: 30px !important;
        padding-bottom: 64px !important;
    }
    html body.home.mb-responsive :is(.SideBemvindos, .Sidenovidades) .textwidget {
        float: none !important;
        height: auto !important;
        min-height: 0 !important;
    }
    html body.home.mb-responsive :is(.SideBemvindos, .Sidenovidades) .textwidget > img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 36 / 11;
        object-fit: cover;
    }
    html body.home.mb-responsive .AreaVideo > .widget {
        display: flex;
        flex: 1;
        height: auto !important;
        min-height: 0 !important;
    }
    html body.home.mb-responsive .AreaVideo .textwidget {
        display: flex;
        width: 100%;
        height: auto !important;
    }
    html body.home.mb-responsive #videoContainer {
        width: 100%;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
    html body.home.mb-responsive #myVideo {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
        display: block;
    }
    html body.home.mb-responsive .Sidemenuservicos > .widget_text {
        flex: 0 0 auto;
    }
    html body.home.mb-responsive .Sidemenuservicos > #better-menu-widget-2 {
        flex: 1 0 auto;
        height: auto !important;
        min-height: 0;
        padding: 0 20px 20px !important;
    }
    html body.home.mb-responsive #menu-servicos.menuservicos {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 27.5px;
        height: 100% !important;
        min-height: 0;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    html body.home.mb-responsive .AreaSpot.AreaServicos #better-menu-widget-2 #menu-servicos.menuservicos > li:is(#menu-item-67, #menu-item-68, #menu-item-65) {
        position: relative !important;
        float: none !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        aspect-ratio: 222.38 / 313.5 !important;
        margin: 0 !important;
        background-size: 100% 100% !important;
        background-position: center top !important;
        transform: none !important;
    }
    html body.home.mb-responsive .AreaSpot.AreaServicos #better-menu-widget-2 #menu-servicos.menuservicos > li:is(#menu-item-67, #menu-item-68, #menu-item-65) > a {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        min-width: 0 !important;
        max-width: none !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 20px !important;
        transform: none !important;
        color: #333f4c !important;
    }
    html body.home.mb-responsive .AreaSpot.AreaServicos #better-menu-widget-2 #menu-servicos.menuservicos > li:is(#menu-item-67, #menu-item-68, #menu-item-65) > a::before {
        content: "" !important;
        display: block !important;
        flex: 0 0 calc(75% - 10px);
        position: static !important;
        width: 0 !important;
        height: auto !important;
        background: none !important;
        border: 0 !important;
    }
    html body.home.mb-responsive .AreaSpot.AreaServicos #better-menu-widget-2 #menu-servicos.menuservicos > li:is(#menu-item-67, #menu-item-68, #menu-item-65) > a > span {
        flex: 0 0 auto;
        margin: 0 !important;
        line-height: 20px !important;
    }
    html body.home.mb-responsive .AreaSpot.AreaServicos #better-menu-widget-2 #menu-servicos.menuservicos > li:is(#menu-item-67, #menu-item-68, #menu-item-65) > a::after {
        position: absolute !important;
        bottom: 20px !important;
        left: 25% !important;
        top: auto !important;
        right: auto !important;
        width: 50% !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 2px solid #86d500 !important;
        background: transparent !important;
        content: ">" !important;
        color: #86d500;
        text-align: center;
        transform: none !important;
    }
    html body.home.mb-responsive .Sidemenuservicos > #custom_html-3 {
        display: none !important;
    }

    /* Stable slider ratios; existing engines retain their controls and timings. */
    html body.home.mb-responsive .AreaPortfolio .widget {
        height: auto !important;
    }
    html body.home.mb-responsive .AreaPortfolio :is(.ms-image img, .n2-ss-slide-background-image img) {
        max-width: 100%;
    }
    html body.mb-responsive .container > .row:has(> .AreaTestemunhos) > .AreaTestemunhos,
    html body.mb-responsive .container > .row:has(> .AreaTestemunhos) > .AreaMapa {
        display: flex;
        min-width: 0;
    }
    html body.mb-responsive :is(.SideTestemunhos, .Sidemapa) {
        width: 100%;
    }
    html body.mb-responsive :is(.SideTestemunhos, .Sidemapa) > .widget {
        height: 274px !important;
    }
}

@media (min-width: 1024px) {
    html body.mb-responsive .container.sidebar > .row:has(.SideGoals) > div {
        display: flex;
        flex-direction: column;
    }
    html body.mb-responsive .container.sidebar > .row:has(.SideGoals) :is(.AreaPage, .SideGoals) {
        flex: 1;
    }
    html body.mb-responsive .container.sidebar > .row:has(.SideGoals) .SideGoals > .widget {
        min-height: 100% !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    html body.mb-responsive {
        padding-left: 0 !important;
        padding-right: 0 !important;
        height: auto !important;
        overflow-x: clip !important;
        overflow-y: visible !important;
    }
    html body.mb-responsive header#header {
        position: sticky !important;
        top: 0;
        z-index: 2147483001;
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(255, 255, 255, .86);
        -webkit-backdrop-filter: saturate(1.6) blur(10px);
        backdrop-filter: saturate(1.6) blur(10px);
    }
    html.mb-menu-open body.mb-responsive {
        padding-top: 106px !important;
    }
    html.mb-menu-open body.mb-responsive header#header {
        position: fixed !important;
        inset: 0 0 auto !important;
        width: 100% !important;
    }
    html body.mb-responsive header#header .container.preheader {
        position: relative;
        height: 86px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    html body.mb-responsive header#header .preheader > .row {
        position: relative;
        height: 86px !important;
        margin: 0 !important;
        display: flex;
        align-items: center;
        gap: 22px;
        padding-right: 64px;
    }
    html body.mb-responsive header#header .preheaderlogo {
        width: auto !important;
        flex: 1;
        padding: 0 !important;
        margin: 0 !important;
    }
    html body.mb-responsive header#header .brand {
        width: 195px !important;
        display: block;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }
    html body.mb-responsive header#header .brand img {
        position: static !important;
        width: 195px !important;
        height: auto !important;
        max-width: 100% !important;
        transform: none !important;
    }
    html body.mb-responsive header#header .milobras-anniversary {
        position: static !important;
        flex: 0 0 45px;
        width: 45px !important;
        height: 45px !important;
        margin: 0 !important;
        padding: 0 !important;
        order: 1;
        display: block !important;
    }
    html body.mb-responsive header#header .milobras-anniversary svg {
        width: 100% !important;
        height: 100% !important;
    }
    html body.mb-responsive header#header .idiomas {
        position: static !important;
        flex: 0 0 26px;
        width: 26px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        order: 2;
    }
    html body.mb-responsive header#header .idiomas a {
        transform: none !important;
    }
    html body.mb-responsive header#header .redesocias {
        position: static !important;
        width: auto !important;
        flex: 0 0 auto;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center;
        order: 3;
    }
    html body.mb-responsive header#header .redesocias a {
        width: 25px !important;
        height: 25px !important;
        margin: 0 0 0 8px !important;
        padding: 0 !important;
        background-size: 23px 23px !important;
    }
    html body.mb-responsive header#header :is(.navbar, .navbar-inner, .menu_principal, .mp, #mysticky-wrap, #mysticky-nav) {
        position: static !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        box-shadow: none !important;
        border: 0 !important;
        transform: none !important;
    }
    html body.mb-responsive header#header .btn-navbar {
        display: block !important;
        position: absolute !important;
        top: 21px !important;
        right: 35px !important;
        left: auto !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 11px 7px !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
    }
    html body.mb-responsive header#header .btn-navbar .icon-bar {
        width: 30px !important;
        height: 2px !important;
        margin-bottom: 6px !important;
        background: #686667 !important;
        box-shadow: none !important;
    }
    html body.home.mb-responsive > .container > .row:has(.AreaVideo) > .AreaSpot,
    html body.home.mb-responsive > .container > .row:has(.AreaNovidades) > .AreaSpot {
        width: 100% !important;
    }
    html body.home.mb-responsive #menu-servicos.menuservicos {
        gap: 20px;
    }
    html body.mb-responsive #milobras-site-footer .milobras-site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 30px;
    }
    html body.mb-responsive #milobras-site-footer .milobras-site-footer__bottom {
        flex-wrap: wrap;
    }
    html body.mb-responsive #milobras-home-projects .milobras-home-projects__header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 14px 24px;
    }
    html body.mb-responsive #milobras-home-projects h2 {
        border: 0;
        grid-column: 1 / -1;
    }
    html body.single-otw-portfolio.mb-responsive :is(.otw-row, .otw-row-inside, .otw-columns, .post-portfolio, .portfolio-gallery-wrapper) {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
    html body.single-otw-portfolio.mb-responsive .otw-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    html body.single-otw-portfolio.mb-responsive .otw-columns > .span4 {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    html body.mb-responsive .container.sidebar > .row:has(.SideGoals) > div,
    html body.mb-responsive .container > .row:has(> .AreaTestemunhos) > .AreaTestemunhos,
    html body.mb-responsive .container > .row:has(> .AreaTestemunhos) > .AreaMapa {
        width: 100% !important;
    }
}

@media (min-width: 1200px) {
    /* Fill the text-driven desktop row without stretching the video frame. */
    html body.home.mb-responsive #myVideo {
        object-fit: cover !important;
        object-position: center center !important;
    }
    /* The first two rows mirror each other without a pixel height or JS sync. */
    html body.home.mb-responsive > .container:has(> .row > .AreaVideo) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-auto-rows: auto;
    }
    html body.home.mb-responsive > .container > .row:has(> .AreaVideo) {
        grid-row: 1;
    }
    html body.home.mb-responsive > .container > .row:has(> .AreaNovidades) {
        grid-row: 2;
    }
    html body.home.mb-responsive .AreaSpot.AreaServicos #better-menu-widget-2 #menu-servicos.menuservicos > li:is(#menu-item-67, #menu-item-68, #menu-item-65) {
        height: 100% !important;
        aspect-ratio: auto !important;
    }
    html[lang^="pt"] body.home.mb-responsive > .container.mb-home-five-percent {
        grid-template-rows: repeat(2, calc(var(--mb-home-pair-height) + 30px));
    }
    html[lang^="pt"] body.home.mb-responsive > .container.mb-home-five-percent > .row:has(> .AreaSpot) {
        min-height: 0 !important;
    }
    html[lang^="pt"] body.home.mb-responsive > .container.mb-home-five-percent #videoContainer {
        aspect-ratio: auto !important;
        min-height: 0 !important;
    }
    html[lang^="pt"] body.home.mb-responsive > .container.mb-home-five-percent :is(.SideBemvindos, .Sidenovidades) > .widget {
        padding-bottom: calc(64px - var(--mb-home-pair-trim)) !important;
    }
    html[lang^="pt"] body.home.mb-responsive > .container.mb-home-five-percent :is(.SideBemvindos, .Sidenovidades) .textwidget a.LinkVerde {
        padding-top: 0 !important;
        bottom: 16px !important;
    }
    html body.mb-responsive #main-menu {
        display: flex !important;
        width: 100% !important;
        flex-wrap: nowrap;
        margin: 0 !important;
    }
    html body.mb-responsive #main-menu > li > a {
        font-size: 14px !important;
        padding: 10px !important;
        white-space: nowrap;
    }
    html body.home.mb-responsive > .container > .row:has(.AreaVideo) > .AreaVideo,
    html body.home.mb-responsive > .container > .row:has(.AreaNovidades) > .AreaServicos {
        width: 66.66666667% !important;
    }
    html body.home.mb-responsive > .container > .row:has(.AreaVideo) > .AreaBemvindos,
    html body.home.mb-responsive > .container > .row:has(.AreaNovidades) > .AreaNovidades {
        width: 33.33333333% !important;
    }
}

/* Match the Novidades arrow styling without changing the mobile service plaques. */
@media (min-width: 768px) {
    html body.home.mb-responsive .AreaSpot.AreaServicos #better-menu-widget-2 #menu-servicos.menuservicos > li:is(#menu-item-67, #menu-item-68, #menu-item-65) > a::after {
        left: 50% !important;
        width: 90px !important;
        height: 23px !important;
        box-sizing: border-box !important;
        font: 400 20px/20px Roboto, sans-serif !important;
        border-bottom: 1.7px solid #86d500 !important;
        transform: translateX(-50%) !important;
    }
}
@media (min-width: 1200px) {
    /* Card bottoms are 21px above the widget border; the EN footer is at 22px. */
    html body.home.mb-responsive .AreaSpot.AreaServicos #better-menu-widget-2 #menu-servicos.menuservicos > li:is(#menu-item-67, #menu-item-68, #menu-item-65) > a::after { bottom: 1px !important; }
    /* PT's approved five-percent layout places the reference footer 5px lower. */
    html[lang^="pt"] body.home.mb-responsive > .container.mb-home-five-percent .AreaSpot.AreaServicos #better-menu-widget-2 #menu-servicos.menuservicos > li:is(#menu-item-67, #menu-item-68, #menu-item-65) > a::after { bottom: -4px !important; }
}

/* Preserve the approved mobile plaque if legacy JS creates limitmenu late. */
@media (max-width: 767px) {
    html body.home .AreaSpot.AreaServicos #better-menu-widget-2 #menu-servicos.menuservicos > li#menu-item-65 > a > span.limitmenu {
        align-items: center !important; justify-content: center !important;
        display: flex !important; width: 100% !important; min-height: 40px !important;
        margin: 0 !important; color: #333f4d !important;
        font: 700 15px/18px 'Roboto Condensed', sans-serif !important;
        text-align: center !important; text-indent: 0 !important; text-transform: uppercase !important;
        visibility: visible !important; letter-spacing: 0.2px !important;
    }
}

/* Portfolio listing: three larger desktop cards, preserving existing photo and hover styles. */
@media (min-width: 993px) {
    html body.page-template-PortfolioPaginated .row_portfolio ul.otw-portfolio {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        height: auto !important;
    }
    html body.page-template-PortfolioPaginated .row_portfolio ul.otw-portfolio::before,
    html body.page-template-PortfolioPaginated .row_portfolio ul.otw-portfolio::after { display: none !important; }
    html body.page-template-PortfolioPaginated .row_portfolio ul.otw-portfolio > li {
        float: none !important;
        clear: none !important;
        width: auto !important;
        min-width: 0;
    }
}

/* Center the 150px testimonial photo in its existing 202px desktop viewport.
   The content's 0.5px border offset leaves 26px of visible space on each side.
   Keep the original 40px padding total so adaptive autoplay retains its height.
   Photo, copy and name move together; the widget and map retain their geometry. */
@media (min-width: 1200px) {
    html body.mb-responsive .AreaSpot.AreaTestemunhos .SideTestemunhos .wpmtst-testimonial-inner {
        padding-top: 25.5px !important;
        padding-bottom: 14.5px !important;
    }
}

/* Portfolio captions: one consistent dark panel, two centered semantic lines. */
html body.page-template-PortfolioPaginated .row_portfolio .otw-sc-portfolio article.otw-portfolio-item a.otw-portfolio-item-link > .title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    width: 100% !important;
    height: 82px !important;
    box-sizing: border-box;
    container-type: inline-size;
}
html body.page-template-PortfolioPaginated .row_portfolio .otw-sc-portfolio article.otw-portfolio-item a.otw-portfolio-item-link > .title > h2.milobras-portfolio-caption {
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 10px !important;
    text-align: center !important;
}
html body.page-template-PortfolioPaginated .row_portfolio .milobras-portfolio-caption-line {
    display: block;
    white-space: nowrap;
}
@media (min-width: 768px) and (max-width: 1199px) {
    html body.page-template-PortfolioPaginated .row_portfolio .otw-sc-portfolio article.otw-portfolio-item a.otw-portfolio-item-link > .title > h2.milobras-portfolio-caption {
        font-size: 16px !important;
    }
}
@media (max-width: 767px) {
    html body.page-template-PortfolioPaginated .row_portfolio .otw-sc-portfolio article.otw-portfolio-item a.otw-portfolio-item-link > .title { height: 86px !important; }
    html body.page-template-PortfolioPaginated .row_portfolio .otw-sc-portfolio article.otw-portfolio-item a.otw-portfolio-item-link > .title > h2.milobras-portfolio-caption { padding: 7px 12px !important; font-size: clamp(15px, 5.5cqw, 19px) !important; }
}

@media (min-width: 993px) and (max-width: 1040px) {
    html body.page-template-PortfolioPaginated .row_portfolio .otw-sc-portfolio article.otw-portfolio-item a.otw-portfolio-item-link > .title > h2.milobras-portfolio-caption { font-size: 15px !important; }
}