/*
 * Mobile Overrides — Etapa 3 (refinamento de espaçamento vertical)
 * Site Unimed Ceará
 *
 * Camada incremental sobre css/main.css e styles/*.css.
 * Escopo: max-width 1024px (mobile/tablet do legado).
 * Desktop (min-width: 1025px) permanece inalterado.
 *
 * STYLES-05 — seção Base mobile (L14–115): tokens, containers, neutralização
 * .container-vw. Valores preservados; dependência upstream documentada.
 */

/* ==========================================================================
 * STYLES-05 — 1. Tokens mobile (escala de espaçamento)
 * Custom properties consumidas pelas seções Header, Hero, Content deste arquivo.
 * ========================================================================== */

@media only screen and (max-width: 1024px) {
    body.institucional {
        --mobile-padding-inline: clamp(16px, 5vw, 20px);
        --mobile-section-gap: 20px;
        --mobile-card-gap: 12px;
        --mobile-stack-gap: 8px;
        --mobile-item-gap: 16px;
        --mobile-title-gap: 12px;
        --mobile-section-padding: 16px;
        --mobile-radius-sm: 8px;
        --mobile-radius-md: 10px;
        --mobile-radius-lg: 12px;
        --mobile-touch-min: 44px;
        --mobile-header-height: 64px;
    }
}

/* ==========================================================================
 * STYLES-05 — 2. Base mobile (containers e anti-overflow)
 *
 * Seletores: body.institucional, .container-{externo,principal,interno},
 *   .container-vw (+ variantes modelo03/guia/chmd/modelo02), .portlet-*,
 *   img, #main-content, .portal-unimed-template, .home-site-padrao-template,
 *   .responsive-margin-geral
 *
 * Upstream (somente leitura): css/main.css L98–102
 *   body.institucional .container-vw { width: 100vw; transform: translateX(-50%) }
 * Templates críticos: home.php (.guia-medico-portlet.container-vw),
 *   pagetemplate-guia-medico.php, pagetemplate-sobre.php
 * ========================================================================== */

@media only screen and (max-width: 1024px) {
    /* Mascara overflow residual; neutralização estrutural abaixo é a correção real */
    body.institucional {
        overflow-x: hidden;
    }

    body.institucional .container-externo,
    body.institucional .container-principal,
    body.institucional .container-interno {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /*
     * Neutraliza full-bleed legado (100vw + translateX(-50%)) em css/main.css.
     * !important garante vitória sobre .modelo03 .container-vw e variantes no mobile.
     */
    body.institucional .container-vw,
    body.institucional .modelo03 .container-vw,
    body.institucional .guia-medico-portlet.container-vw,
    body.institucional .chmd-peq-viver-bem-site-padrao.container-vw,
    body.institucional .modelo02 .principal {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        box-sizing: border-box;
    }

    body.institucional > .container-externo {
        min-width: 0;
        max-width: 100%;
    }

    body.institucional .portlet-layout.row-fluid,
    body.institucional .portlet-column {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.institucional img {
        max-width: 100%;
        height: auto;
    }

    body.institucional .journal-content-article img,
    body.institucional .portlet-body img:not([width]) {
        max-width: 100%;
        height: auto;
    }

    body.institucional #main-content,
    body.institucional .portal-unimed-template,
    body.institucional .home-site-padrao-template {
        width: 100%;
        max-width: 100%;
    }

    body.institucional .responsive-margin-geral {
        margin-left: var(--mobile-padding-inline);
        margin-right: var(--mobile-padding-inline);
    }
}

/* --------------------------------------------------------------------------
 * Header
 * STYLES-06 — fonte canônica para header fixo e offset (≤1024px).
 * footer-mobile.css (≤768px) referencia esta seção; não duplicar regras lá.
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    body.institucional .menu-principal .container-interno {
        width: 100%;
        max-width: 100%;
        padding-inline: var(--mobile-padding-inline);
        box-sizing: border-box;
        gap: var(--mobile-stack-gap);
    }

    body.institucional .menu-principal .logo {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        float: none;
    }

    body.institucional .menu-principal .logo img {
        width: auto;
        max-width: 120px;
        height: auto;
        max-height: 48px;
        object-fit: contain;
        margin: 0;
    }

    /* .aui .pull-right { float: right } — neutralizar no flex do header */
    body.institucional .menu-principal .visivel-responsivo.pull-right {
        flex: 0 0 auto;
        float: none;
        margin-left: auto;
    }

    body.institucional .menu-principal .btn-menu-responsivo {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 var(--mobile-touch-min);
        width: var(--mobile-touch-min);
        min-width: var(--mobile-touch-min);
        min-height: var(--mobile-touch-min);
        height: var(--mobile-touch-min);
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* RD Station / Bricks injeta banner fixo no topo e reposiciona o menu via inline style.
       No mobile o header deve permanecer ancorado na viewport (top: 0). */
    body.institucional .rdstation-popup-position-embedded_top_le,
    body.institucional [id^="bricks-component-"][id$="-wrapper"].rdstation-popup-position-embedded_top_le,
    body.institucional > div[id^="popup-"] {
        display: none !important;
        height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.institucional > header.relative {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100%;
        height: 0 !important;
        min-height: 0 !important;
        z-index: 101;
        overflow: visible;
        pointer-events: none;
        margin: 0;
        padding: 0;
    }

    body.institucional .menu-principal,
    body.institucional #menuPrincipal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: var(--mobile-header-height) !important;
        z-index: 101;
        pointer-events: auto;
    }

    /* Offset do header fixo — em viewport sem grid no body (769–1024px) */
    body.institucional > .container-externo {
        margin-top: var(--mobile-header-height);
    }

    body.institucional .container-principal {
        margin-top: 0;
    }

    body.institucional .menu-principal .menu-principal-itens {
        top: var(--mobile-header-height);
        z-index: 100;
    }

    /* Overlay do menu — clicável para fechar (handler em menu-principal.js) */
    body.institucional .container-principal.container-principal-translate:after {
        z-index: 99;
        pointer-events: auto;
    }
}

@media only screen and (max-width: 375px) {
    body.institucional .menu-principal .logo img {
        max-width: 100px;
        max-height: 42px;
    }
}

/* --------------------------------------------------------------------------
 * Hero / Banner (modelo-um chamadas)
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    body.institucional .chamadas-tema {
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    body.institucional .container-principal .chamadas-tema {
        margin-top: 0;
        margin-bottom: var(--mobile-title-gap);
    }

    /* Legado fixa height: 445px — modelo-um-chamadas define min-height responsivo */
    body.institucional .slideme.front {
        height: auto;
        width: 100%;
        max-width: 100%;
        border-radius: 0 0 var(--mobile-radius-lg) var(--mobile-radius-lg);
        overflow: hidden;
    }

    body.institucional .slideme {
        width: 100%;
        max-width: 100%;
        display: block;
    }

    body.institucional .slideme li,
    body.institucional .slideme li a {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    body.institucional .slideme li a img {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
    }

    body.institucional .chamadas-tema .modelo-um ul .conteudo {
        left: var(--mobile-padding-inline);
        right: var(--mobile-padding-inline);
        margin: 0;
        max-width: calc(100% - (var(--mobile-padding-inline) * 2));
        box-sizing: border-box;
    }

    body.institucional .slideme-nav {
        right: var(--mobile-padding-inline);
        bottom: 12px;
    }

    body.institucional .slideme-control-nav-back,
    body.institucional .slideme-control-nav-next {
        width: 40px;
        height: 40px;
        margin-top: -20px;
        background-size: 80px auto;
    }
}

@media only screen and (max-width: 768px) {
    body.institucional .modelo-um ul .conteudo .titulo-midia {
        font-size: clamp(1.1rem, 4.2vw, 1.75em);
        line-height: 1.25;
    }
}

@media only screen and (max-width: 480px) {
    body.institucional .modelo-um ul .conteudo .titulo-midia {
        font-size: clamp(1rem, 4vw, 1.5em);
    }

    body.institucional .slideme-control-nav-back,
    body.institucional .slideme-control-nav-next {
        width: 32px;
        height: 32px;
        margin-top: -16px;
        background-size: 64px auto;
    }
}

/* --------------------------------------------------------------------------
 * Integração modelo05 (estilos inline em header-home.php)
 * Não duplica styles/modelo05.css — apenas neutraliza conflitos globais.
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    body.institucional .modelo05 {
        /* !important necessário: main.css força display:block!important no mobile */
        display: flex !important;
        flex-direction: column;
        padding-inline: var(--mobile-padding-inline);
        padding-top: var(--mobile-title-gap);
        padding-bottom: var(--mobile-section-padding);
        gap: var(--mobile-card-gap);
        box-sizing: border-box;
    }

    body.institucional .modelo05 .card {
        border-radius: var(--mobile-radius-md);
        overflow: hidden;
        border-bottom: none;
        margin-bottom: 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    body.institucional .modelo05 .titulo-midia,
    body.institucional .modelo05 .texto-midia {
        /* !important necessário: header-home.php injeta padding inline após wp_head() */
        padding: 0.5rem 0.75rem 0 0 !important;
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;
    }

    body.institucional .modelo05 .titulo-midia {
        line-height: 1.25;
        margin-bottom: 4px;
    }

    body.institucional .modelo05 .texto-midia {
        line-height: 1.4;
        font-size: clamp(0.85rem, 2.8vw, 1rem);
    }

    body.institucional .modelo05 .card > div:not(.seta-direita):not(.thumb):not(.icone):not(.descricao) {
        min-width: 0;
        flex: 1 1 auto;
        padding: 0;
    }

    /* main.css define padding: 50px 25px em .seta-direita no mobile */
    body.institucional .modelo05 .seta-direita {
        padding: 0.75rem;
        align-self: center;
        flex: 0 0 auto;
    }
}

@media only screen and (max-width: 480px) {
    body.institucional .modelo05 .card {
        min-height: 0;
        padding: 0.75rem 1rem;
    }

    body.institucional .modelo05 .seta-direita {
        padding: 0.5rem 0.35rem;
    }
}

/* --------------------------------------------------------------------------
 * Guia médico / blocos de atendimento
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    body.institucional .guia-medico-portlet {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
        padding-top: calc(var(--mobile-section-padding) - 4px);
        padding-bottom: calc(var(--mobile-section-padding) - 4px);
        margin-bottom: calc(var(--mobile-section-gap) - 4px);
        min-height: 0 !important;
    }

    body.institucional .guia-medico-portlet .container-vw,
    body.institucional .guia-medico-portlet .container-interno {
        width: 100%;
        max-width: 100%;
        padding-left: var(--mobile-padding-inline);
        padding-right: var(--mobile-padding-inline);
        box-sizing: border-box;
    }

    body.institucional .guia-medico-portlet header {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 0;
        padding-bottom: var(--mobile-item-gap);
    }

    body.institucional .guia-medico-portlet header:last-of-type {
        padding-bottom: 0;
    }

    body.institucional .guia-medico-portlet header:has(+ hr.visivel-responsivo) {
        padding-bottom: var(--mobile-stack-gap);
    }

    body.institucional .guia-medico-portlet header h1 {
        margin: 0 0 6px;
        line-height: 1.3;
    }

    body.institucional .guia-medico-portlet header.text-center,
    body.institucional .guia-medico-portlet header.text-center h1,
    body.institucional .guia-medico-portlet header.text-center h2 {
        text-align: center;
    }

    body.institucional .guia-medico-portlet header h1,
    body.institucional .guia-medico-portlet header h2 {
        overflow-wrap: break-word;
        word-wrap: break-word;
        padding-inline: 0;
        margin-inline: auto;
        max-width: 100%;
    }

    body.institucional .guia-medico-portlet header h2 {
        margin-bottom: 6px !important;
        line-height: 1.35;
    }

    body.institucional .guia-medico-portlet header .visivel-responsivo.margin-bottom-2x {
        margin-bottom: 6px !important;
        text-align: center;
    }

    body.institucional .guia-medico-portlet .padding-2x {
        padding: 6px 0 0 !important;
        margin-top: 0 !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }

    body.institucional .guia-medico-portlet .padding-2x[style] {
        margin-top: 0 !important;
    }

    body.institucional .guia-medico-portlet .btn-center {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-inline: auto;
        max-width: 100%;
        min-height: var(--mobile-touch-min);
        padding: 0.65rem 1.25rem;
        white-space: normal;
        line-height: 1.35;
        border-radius: var(--mobile-radius-sm);
    }

    body.institucional .guia-medico-portlet hr.visivel-responsivo {
        margin-block: 10px;
        opacity: 0.6;
    }
}

/* --------------------------------------------------------------------------
 * Cards — chamada-materia (box_home)
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    body.institucional .chamada-materia {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        padding-inline: var(--mobile-padding-inline);
        padding-top: var(--mobile-section-padding);
        padding-bottom: var(--mobile-section-padding);
        box-sizing: border-box;
    }

    body.institucional .chamada-materia .lista-chmd-materia {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--mobile-card-gap);
    }

    body.institucional .chamada-materia .chmd-materia {
        width: 100%;
        max-width: 100%;
        height: auto !important;
        border-radius: var(--mobile-radius-md);
        overflow: hidden;
        margin-bottom: 0;
    }

    body.institucional .chamada-materia .link-chmd-materia {
        width: 100%;
        max-width: 100%;
        align-items: stretch;
        min-height: 0;
    }

    /* !important necessário: home.php injeta width/height:170px inline via UA sniffing */
    body.institucional .chamada-materia .link-chmd-materia > img {
        flex: 0 0 clamp(110px, 36%, 148px);
        width: clamp(110px, 36%, 148px) !important;
        max-width: none !important;
        height: auto !important;
        min-width: 0;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
        align-self: stretch;
    }

    body.institucional .chamada-materia .chmd-materia-conteudo {
        flex: 1 1 auto;
        min-width: 0;
        height: auto !important;
        min-height: 0;
        padding: 0.875rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--mobile-stack-gap);
        overflow-wrap: break-word;
        word-wrap: break-word;
        box-sizing: border-box;
    }

    body.institucional .chamada-materia .titulo-chmd-materia {
        font-size: clamp(1.05rem, 3.8vw, 1.3em);
        line-height: 1.25;
        margin: 0;
    }

    body.institucional .chamada-materia .subtitulo-chmd-materia,
    body.institucional .chamada-materia .subtitulo-chmd-materia-invertida {
        font-size: clamp(0.9rem, 3.2vw, 1.1em);
        line-height: 1.35;
        margin: 0 !important;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

@media only screen and (max-width: 480px) {
    body.institucional .chamada-materia .link-chmd-materia > img {
        flex-basis: clamp(100px, 34%, 130px);
        width: clamp(100px, 34%, 130px) !important;
    }

    body.institucional .chamada-materia .chmd-materia-conteudo {
        padding: 0.875rem;
    }
}

@media only screen and (max-width: 375px) {
    body.institucional .chamada-materia .link-chmd-materia > img {
        flex-basis: clamp(96px, 32%, 120px);
        width: clamp(96px, 32%, 120px) !important;
    }
}

/* --------------------------------------------------------------------------
 * Cards — chamada pequena / Viver Bem / Fique por dentro
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    body.institucional .chamada-pequena-viverbem,
    body.institucional .chamada-pequena-site-padrao,
    body.institucional .chmd-peq-viver-bem-site-padrao {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.institucional .chmd-peq-viver-bem-site-padrao {
        padding-inline: var(--mobile-padding-inline);
        padding-top: var(--mobile-section-padding) !important;
        padding-bottom: var(--mobile-section-padding) !important;
    }

    body.institucional .chmd-peq-viver-bem-site-padrao .text-center.margin-bottom-2x {
        margin-bottom: var(--mobile-title-gap) !important;
        padding-inline: 0;
    }

    body.institucional .chmd-peq-viver-bem-site-padrao .text-center.margin-bottom-2x h3 {
        margin: 0;
    }

    body.institucional .chamada-pequena-site-padrao {
        padding-inline: var(--mobile-padding-inline);
        padding-top: 0;
        padding-bottom: var(--mobile-section-padding);
    }

    body.institucional .chamada-pequena-viverbem section,
    body.institucional .chamada-pequena-site-padrao section {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-card-gap);
    }

    body.institucional .chamada-pequena-viverbem .chamada-pequena,
    body.institucional .chamada-pequena-site-padrao .chamada-pequena {
        width: 100%;
        max-width: 100%;
        height: auto !important;
        min-height: 0;
        flex-basis: 100%;
        align-items: stretch;
        border-radius: var(--mobile-radius-sm);
        overflow: hidden;
        margin-bottom: 0;
        margin-top: 0;
    }

    /* Viver Bem (.img-chamada-pequena legado); Fique por dentro tem bloco STYLES-12 abaixo */
    body.institucional .chamada-pequena-viverbem .chamada-pequena .img-chamada-pequena {
        flex: 0 0 clamp(100px, 32%, 140px);
        width: clamp(100px, 32%, 140px);
        min-width: 100px;
        max-width: 38%;
        height: auto;
        flex-shrink: 0;
        overflow: hidden;
    }

    /*
     * STYLES-12 — Fique por dentro: thumbnails menores que Viver Bem (~24% do card).
     */
    body.institucional .chamada-pequena-site-padrao .chamada-pequena .img-chamada-pequena {
        flex: 0 0 clamp(72px, 24%, 112px);
        width: clamp(72px, 24%, 112px);
        min-width: 72px;
        max-width: 30%;
        height: auto;
        flex-shrink: 0;
        overflow: hidden;
    }

    /*
     * STYLES-11 — Viver Bem: .img-chamada-grande no markup sem regra em main.css.
     * clamp limita largura (max 140px); aspect-ratio no link é fallback WebKit.
     */
    body.institucional .chamada-pequena-viverbem .chamada-pequena .img-chamada-grande {
        flex: 0 0 clamp(100px, 32%, 140px);
        width: clamp(100px, 32%, 140px);
        max-width: 38%;
        min-width: 100px;
        aspect-ratio: 1 / 1;
        height: auto;
        flex-shrink: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    body.institucional .chamada-pequena-viverbem .chamada-pequena .img-chamada-pequena img,
    body.institucional .chamada-pequena-site-padrao .chamada-pequena .img-chamada-pequena img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    body.institucional .chamada-pequena-viverbem .chamada-pequena .img-chamada-grande img {
        width: 100%;
        height: auto;
        max-width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    body.institucional .chamada-pequena-viverbem .chamada-pequena .titulo-chamada-pequena,
    body.institucional .chamada-pequena-site-padrao .chamada-pequena .titulo-chamada-pequena {
        width: auto;
        max-width: 100%;
        min-width: 0;
        flex: 1 1 auto;
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--mobile-stack-gap);
        overflow-wrap: break-word;
        word-wrap: break-word;
        box-sizing: border-box;
    }

    body.institucional .chamada-pequena-viverbem .chamada-pequena .titulo-chamada-pequena h1,
    body.institucional .chamada-pequena-site-padrao .chamada-pequena .titulo-chamada-pequena h1 {
        font-size: clamp(1rem, 3.5vw, 1.25em);
        line-height: 1.3;
        margin: 0;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    body.institucional .chamada-pequena-viverbem .data-chamada,
    body.institucional .chamada-pequena-site-padrao .data-chamada {
        font-size: 0.85em;
        line-height: 1.3;
        margin: 0;
    }
}

@media only screen and (max-width: 480px) {
    body.institucional .chamada-pequena-viverbem .chamada-pequena .img-chamada-pequena {
        flex-basis: clamp(92px, 30%, 120px);
        width: clamp(92px, 30%, 120px);
        min-width: 92px;
        max-width: 36%;
    }

    body.institucional .chamada-pequena-site-padrao .chamada-pequena .img-chamada-pequena {
        flex-basis: clamp(72px, 24%, 96px);
        width: clamp(72px, 24%, 96px);
        min-width: 72px;
        max-width: 28%;
    }

    body.institucional .chamada-pequena-viverbem .chamada-pequena .img-chamada-grande {
        flex-basis: clamp(92px, 30%, 120px);
        width: clamp(92px, 30%, 120px);
        max-width: 36%;
        min-width: 92px;
    }
}

/* --------------------------------------------------------------------------
 * Banners / modelo03 (Canais de Atendimento)
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    body.institucional .modelo03 {
        margin-bottom: var(--mobile-section-gap);
    }

    body.institucional .modelo03 .container-vw.ch-contraste-branco {
        padding-inline: var(--mobile-padding-inline);
        padding-top: var(--mobile-section-padding) !important;
        padding-bottom: var(--mobile-section-padding);
        box-sizing: border-box;
    }

    body.institucional .modelo03 .titulo-topo {
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
        padding-bottom: var(--mobile-title-gap);
        box-sizing: border-box;
        text-align: center;
        margin-inline: auto;
        max-width: 100%;
    }

    body.institucional .modelo03 .titulo-topo h2 {
        margin: 0;
    }

    body.institucional .modelo03 .titulo-topo h2,
    body.institucional .modelo03 .titulo-topo h6 {
        line-height: 1.35;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    body.institucional .modelo03 .titulo-topo h6 {
        margin: var(--mobile-stack-gap) 0 0;
    }

    body.institucional .modelo03 .titulo-topo h6 br + br {
        display: none;
    }

    body.institucional .modelo03 .scroll-area {
        width: 100%;
        max-width: 100%;
        border-radius: var(--mobile-radius-md);
        overflow: hidden;
    }

    body.institucional .modelo03 .itens .item {
        box-sizing: border-box;
        padding: var(--mobile-section-padding);
    }

    body.institucional .modelo03 .itens .item .icone {
        font-size: clamp(4rem, 14vw, 7rem);
        line-height: 1;
        margin-bottom: var(--mobile-stack-gap);
    }

    body.institucional .modelo03 .itens .item .icone img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    body.institucional .modelo03 .itens .item section h3 {
        line-height: 1.35;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    body.institucional .modelo03 .itens .item section h3.margin-top-2x,
    body.institucional .modelo03 .itens .item section h3.margin-bottom-2x {
        margin-top: var(--mobile-stack-gap) !important;
        margin-bottom: var(--mobile-stack-gap) !important;
    }

    body.institucional .modelo03 .navegacao-responsiva {
        margin-top: var(--mobile-title-gap) !important;
        margin-bottom: 0 !important;
    }

    body.institucional .modelo03 .navegacao-responsiva .voltar,
    body.institucional .modelo03 .navegacao-responsiva .avancar {
        min-width: var(--mobile-touch-min);
        min-height: var(--mobile-touch-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media only screen and (max-width: 768px) {
    body.institucional .modelo03 .itens .item {
        padding: var(--mobile-title-gap) var(--mobile-section-padding);
    }

    body.institucional .modelo03 .itens .item,
    body.institucional .modelo03 .itens .item-1,
    body.institucional .modelo03 .itens .item-2,
    body.institucional .modelo03 .itens .item-3,
    body.institucional .modelo03 .itens .item-4,
    body.institucional .modelo03 .itens .item-5 {
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        border-right: none !important;
    }

    body.institucional .modelo03 .scroll-area {
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }

    body.institucional .modelo03 .itens {
        width: 100%;
    }

    body.institucional .modelo03 .navegacao-responsiva {
        display: inline-flex !important;
        justify-content: center;
        align-items: center;
        gap: var(--mobile-item-gap);
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
 * Conteúdo — vídeo YouTube
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    body.institucional .youtube-player {
        width: 100%;
        max-width: 100%;
        padding-bottom: 56.25%;
        border-radius: var(--mobile-radius-md);
        overflow: hidden;
    }

    body.institucional .youtube-player img {
        width: 100%;
        height: auto;
        position: relative;
        object-fit: cover;
    }

    body.institucional .home-site-padrao-template .chamadas:has(.youtube-player) {
        padding-inline: var(--mobile-padding-inline);
        margin-block: var(--mobile-section-gap);
        box-sizing: border-box;
    }
}

/* --------------------------------------------------------------------------
 * Fique por dentro / títulos de seção
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    body.institucional .home-site-padrao-template .paginas-estaticas.margin-top-2x.margin-bottom-2x {
        margin-top: var(--mobile-section-gap) !important;
        margin-bottom: var(--mobile-title-gap) !important;
    }

    body.institucional .home-site-padrao-template .paginas-estaticas h3.margin-top-2x {
        margin-top: 0 !important;
        margin-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
 * Banners quadrados (recursos / plano de saúde)
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    body.institucional .home-site-padrao-template .portlet-layout .modelo-um.chamadas {
        padding-inline: var(--mobile-padding-inline);
        margin-bottom: var(--mobile-card-gap);
        box-sizing: border-box;
    }

    body.institucional .home-site-padrao-template .portlet-layout .modelo-um.chamadas .slideme {
        border-radius: var(--mobile-radius-md);
        overflow: hidden;
    }

    body.institucional .home-site-padrao-template .portlet-layout.row-fluid {
        margin-bottom: var(--mobile-section-gap);
    }
}

/* --------------------------------------------------------------------------
 * Seções / conteúdo geral
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    body.institucional .btn,
    body.institucional .btn-primary {
        max-width: 100%;
        min-height: var(--mobile-touch-min);
        padding: 0.65rem 1.25rem;
        white-space: normal;
        line-height: 1.35;
        border-radius: var(--mobile-radius-sm);
        box-sizing: border-box;
    }

    body.institucional h1,
    body.institucional h2,
    body.institucional h3,
    body.institucional h4 {
        overflow-wrap: break-word;
        word-wrap: break-word;
        line-height: 1.3;
    }
}

/* --------------------------------------------------------------------------
 * Breakpoints adicionais — mobile pequeno
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 430px) {
    body.institucional .chamada-pequena-viverbem.container-interno {
        padding-inline: 0;
    }
}

@media only screen and (max-width: 320px) {
    body.institucional .menu-principal .logo img {
        max-width: 90px;
        max-height: 38px;
    }

    body.institucional .chamada-materia .chmd-materia-conteudo {
        padding: 0.75rem;
    }

    body.institucional .modelo-um ul .conteudo .titulo-midia {
        font-size: 0.95rem;
    }

    body.institucional .chamada-pequena-viverbem .chamada-pequena .titulo-chamada-pequena,
    body.institucional .chamada-pequena-site-padrao .chamada-pequena .titulo-chamada-pequena {
        padding: 0.75rem;
    }
}