/* Reset CSS básico */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

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

ul,
ol {
    list-style: none;
}

/* Variáveis de design corporativo (Uniube) */
:root {
    --font-title: 'Poppins', sans-serif;
    --font-body: 'Poppins', sans-serif;
    --font-title-display: 'Ubuntu', sans-serif;
    --font-title-serif: 'Georgia', serif;
    --font-body-alt: 'Inter', sans-serif;

    --color-bg: #FAF6EE;
    --color-blue-dark: #1E1B4B;
    --color-gold: #F5B841;
    --color-agro-green: #618B62;
    --color-white: #FFFFFF;
    --color-text-muted: #5B6B78;
    --color-blue-light: #DCEBF7;

    --color-whatsapp-green: #25D366;

    --color-hero-start: #2B1E6B;
    --color-hero-end: #3D2B8C;

    --shadow-soft: 0 4px 20px rgba(11, 47, 74, 0.08);
    --shadow-card: 0 8px 24px rgba(30, 27, 75, 0.08);

    --radius-card: 16px;
    --radius-button: 999px;
    --radius-curve: 110px;
    --space-card: 32px;

    --container-max: 1200px;
    --container-max-wide: 1800px;
    --container-padding: 24px;

    /* Espelha o `zoom: 0.8` do <main> (ver regra `main` abaixo) — usada só
       pelo header (cabecalho.php), que fica FORA do <main> e por isso não é
       afetado por esse zoom, para que a largura da navbar da home
       (.ouv-site-header--overlay, em OuvidoriaTemplate.css) resulte no mesmo
       tamanho em tela que os containers dentro do <main>. */
    --main-zoom: 0.8;
}

body {
    background-color: var(--color-bg);
    font-family: var(--font-body);
    color: var(--color-blue-dark);
}

h1 {
    font-family: var(--font-title-display);
}

h2 {
    font-family: var(--font-title-display);
    font-size: 2rem;
}

h3,
h4 {
    font-family: var(--font-title);
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

main {
    zoom: 0.8;
}

/* ==========================================================================
   BANNER (hero)
   ========================================================================== */
.banner {
    position: relative;
    min-height: 860px;
    padding-block: 170px 140px;
    /* Mesmo recuo horizontal do container largo usado pelas seções abaixo
       (cards, WhatsApp, Campi, Agro, Hospital, redes sociais, portais — ver
       `.uni-XXX .container { max-width: var(--container-max-wide) }` mais
       abaixo), pra o título/subtítulo/traço ficarem alinhados com o resto
       da lp em vez do antigo `8%` arbitrário. */
    padding-inline: max(var(--container-padding), calc((100% - var(--container-max-wide)) / 2 + var(--container-padding)));
    display: flex;
    align-items: center;
    color: var(--color-white);
    background:
        linear-gradient(to right,
            rgba(30, 27, 75, 0.97) 0%,
            rgba(30, 27, 75, 0.85) 40%,
            rgba(30, 27, 75, 0.45) 75%,
            rgba(30, 27, 75, 0.25) 100%),
        url('../images/banner.png') center/cover no-repeat,
        var(--color-blue-dark);
}

.banner-conteudo {
    max-width: 620px;
}

.banner-curva {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 203px;
    height: 428px;
    background-color: var(--color-bg);
    clip-path: path("M203,199.9 A260,320 0 0 1 0,320 L0,428 L203,428 Z");
    pointer-events: none;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
    margin-bottom: 40px;
}

.breadcrumb .separador {
    opacity: 0.7;
}

.banner h1 {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 6.25rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 20px;
    white-space: nowrap;
}

.subtitulo {
    font-size: 1.875rem;
    font-weight: 400;
    color: var(--color-white);
    line-height: 1.4;
    margin-bottom: 32px;
}

.barra-amarela {
    width: 100px;
    height: 6px;
    background-color: var(--color-gold);
}

/* ==========================================================================
   INTERMEDIÁRIA (curva de conexão entre o banner e os cards)
   ========================================================================== */
.intermediaria {
    position: relative;
    background-color: var(--color-bg);
    margin-top: calc(-1 * var(--radius-curve));
    border-top-left-radius: var(--radius-curve);
    min-height: var(--radius-curve);
}

/* ==========================================================================
   CARDS DE ATENDIMENTO
   ========================================================================== */
.cards-atendimento {
    background-color: var(--color-bg);
    padding-bottom: 80px;
}

/* Componente "Cartões de Atendimento" (uni-grid-channels / uni-card-channel)
   Tokens escopados ao componente — não usam as variáveis globais do site. */
.uni-grid-channels {
    --uni-color-blue-dark: #1A255D;
    --uni-color-blue-light: #DCEBF7;
    --uni-color-gold: #FFB84D;
    --uni-color-text-muted: #003366;
    --uni-color-white: var(--color-white);
    --uni-font-title: var(--font-title-display);
    --uni-font-body: var(--font-body-alt);

    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    max-width: var(--container-max-wide);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    transform: translateY(-40px);
}

.uni-card-channel {
    position: relative;
    flex: 1 1 480px;
    max-width: 640px;
    background-color: var(--uni-color-white);
    border-radius: 20px;
    box-shadow: var(--shadow-card);
    padding: 56px;
    overflow: hidden;
}

.uni-card-channel::before,
.uni-card-channel::after {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    background-image: radial-gradient(circle, var(--uni-color-blue-light) 2.1px, transparent 2.1px);
    background-size: 11px 11px;
    pointer-events: none;
}

.uni-card-channel::before {
    top: 10px;
    right: 10px;
    width: 55px;
    height: 110px;
}

.uni-card-channel::after {
    left: 10px;
    bottom: 6px;
    width: 44px;
    height: 33px;
}

.card-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 26px;
    margin-bottom: 32px;
}

.card-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    background-color: var(--uni-color-blue-dark);
    border-radius: 18px;
    color: var(--uni-color-white);
}

.card-icon svg {
    width: 56px;
    height: 56px;
}

.card-heading {
    flex: 1;
}

.card-title {
    font-family: var(--uni-font-title);
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--uni-color-blue-dark);
}

.card-title-accent {
    display: block;
    width: 52px;
    height: 5px;
    margin-top: 11px;
    border-radius: 2px;
    background-color: var(--uni-color-gold);
}

.card-body {
    position: relative;
    z-index: 1;
}

.card-description {
    background-color: var(--uni-color-blue-light);
    border-radius: 14px;
    padding: 26px 26px 66px;
    font-family: var(--uni-font-body);
    font-size: 1.25rem;
    color: var(--uni-color-text-muted);
    line-height: 1.7;
    margin-bottom: 34px;
}

.card-action {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 90%;
    background-color: var(--uni-color-gold);
    color: var(--uni-color-blue-dark);
    font-family: var(--uni-font-body);
    font-weight: 700;
    font-size: 1.625rem;
    padding: 16px 32px;
    border-radius: 30px;
    margin-top: -66px;
    transition: filter 0.2s ease;
}

.card-action svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.card-action:hover {
    filter: brightness(1.05);
}

/* ==========================================================================
   BANNER WHATSAPP (wa-*)
   Tokens escopados ao componente — não usam as variáveis globais do site.
   ========================================================================== */
.wa-banner {
    --wa-bg: #EEF3F7;
    --wa-border: #D9E2EA;
    --wa-blue-dark: var(--color-blue-dark);
    --wa-green: #25D366;
    --wa-text-muted: var(--color-text-muted);
    --wa-white: var(--color-white);
    --wa-font: var(--font-body-alt);

    padding-bottom: 120px;
}

.wa-banner .container {
    max-width: var(--container-max-wide);
}

.wa-card {
    /* container query, não vw: o card fica limitado por --container-max-wide
       (1800px) bem antes de qualquer monitor grande, então escalar pelo
       tamanho do próprio card (cqi) é o que faz os itens continuarem
       crescendo/encolhendo por toda a faixa de telas em vez de baterem no
       teto cedo demais. */
    container-type: inline-size;
    background-color: var(--wa-bg);
    border: 1px solid var(--wa-border);
    border-radius: 24px;
    overflow: hidden;
    font-family: var(--wa-font);
}

.wa-top {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: clamp(16px, 1.7cqi, 30px) clamp(12px, 1.2cqi, 20px) clamp(16px, 1.7cqi, 30px) clamp(16px, 4.6cqi, 80px);
}

.wa-left {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: clamp(10px, 2.3cqi, 40px);
}

.wa-icon-col {
    flex-shrink: 0;
}

.wa-icon {
    width: clamp(56px, 14.3cqi, 250px);
    height: clamp(56px, 14.3cqi, 250px);
    fill: var(--wa-green);
}

.wa-content {
    min-width: 0;
}

.wa-title {
    font-family: var(--wa-font);
    font-size: clamp(18px, 2.4cqi, 42px);
    font-weight: 700;
    color: var(--wa-blue-dark);
    line-height: 1.2;
    margin-bottom: 12px;
}

.wa-subtitle {
    font-size: clamp(13px, 1.3cqi, 22px);
    color: #003366;
    line-height: 1.5;
    max-width: 460px;
    margin-bottom: 24px;
}

.wa-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--wa-green);
    color: var(--wa-white);
    font-weight: 700;
    font-size: clamp(13px, 1.3cqi, 22px);
    padding: clamp(8px, 0.8cqi, 14px) clamp(12px, 1.6cqi, 28px);
    border-radius: 10px;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.wa-cta:hover {
    filter: brightness(0.95);
    transform: translateY(-2px);
}

.wa-cta svg {
    width: clamp(14px, 1.5cqi, 26px);
    height: clamp(14px, 1.5cqi, 26px);
    flex-shrink: 0;
}

.wa-right {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.6cqi, 28px);
    margin-left: clamp(10px, 2.3cqi, 40px);
    padding-left: clamp(10px, 2.3cqi, 40px);
    border-left: 2px solid var(--wa-border);
}

.wa-qr-box {
    flex-shrink: 0;
    width: clamp(72px, 13.1cqi, 230px);
    height: clamp(72px, 13.1cqi, 230px);
    background-color: var(--wa-white);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 20px rgba(11, 47, 74, 0.08);
}

.wa-qr-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wa-qr-text {
    position: relative;
    max-width: 320px;
    min-width: 0;
}

.wa-arrow {
    display: block;
    width: clamp(56px, 8.6cqi, 150px);
    height: clamp(38px, 5.7cqi, 100px);
    margin-top: 10px;
    margin-left: 8px;
}

.wa-qr-text p {
    font-size: clamp(13px, 1.4cqi, 24px);
    color: var(--wa-blue-dark);
    line-height: 1.5;
    margin-top: 30px;
    margin-left: clamp(4px, 2.6cqi, 45px);
}

.wa-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(12px, 1.4cqi, 24px);
    background-color: var(--wa-blue-dark);
    color: var(--wa-white);
    padding: clamp(16px, 1.3cqi, 22px) clamp(20px, 3cqi, 52px);
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.wa-footer-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.wa-footer-logo {
    height: 35px;
    width: auto;
    flex-shrink: 0;
}

.wa-footer-divider {
    flex-shrink: 0;
    width: 1px;
    height: 35px;
    background-color: #D9D9D9;
}

.wa-footer-message {
    flex: 1;
    min-width: 0;
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 1.1rem;
}

/* ==========================================================================
   NOSSOS CAMPI (uni-campi)
   Tokens escopados ao componente — não usam as variáveis globais do site.
   ========================================================================== */
.uni-campi {
    --campi-blue-dark: #1A255D;
    --campi-accent: var(--color-gold);
    --campi-text-muted: var(--color-text-muted);
    --campi-border: #ECECEC;
    --campi-font-title: var(--font-title-serif);
    --campi-font-body: var(--font-body-alt);

    padding-block: 96px;
    background-color: var(--color-white);
}

.uni-campi .container {
    max-width: var(--container-max-wide);
}

.campi-header {
    margin-bottom: 72px;
}

.section-tagline {
    display: block;
    font-family: var(--campi-font-body);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--campi-accent);
    margin-bottom: 10px;
}

.section-title {
    font-family: var(--campi-font-title);
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--campi-blue-dark);
}

.title-accent {
    display: block;
    width: 64px;
    height: 5px;
    margin-top: 16px;
    border-radius: 2px;
    background-color: var(--campi-accent);
}

.campi-carousel-wrapper {
    display: block;
}

.btn-nav {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1.5px solid var(--campi-border);
    color: var(--campi-blue-dark);
    background-color: var(--color-white);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-nav svg {
    width: 22px;
    height: 22px;
}

.btn-nav:hover {
    background-color: var(--campi-blue-dark);
    border-color: var(--campi-blue-dark);
    color: var(--color-white);
}

.btn-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: var(--color-white);
    border-color: var(--campi-border);
    color: var(--campi-blue-dark);
}

.campi-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.campi-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
}

.campus-card.is-hidden {
    display: none;
}

.campus-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border: 1px solid #E5E5E5;
    border-radius: 20px 0 0 20px;
    box-shadow: 0 8px 28px rgba(26, 37, 93, 0.08);
    width: 100%;
    max-width: 1000px;
    justify-self: center;
    cursor: pointer;
    transition: border-color 0.2s ease;
    height: 100%;
    min-height: 680px;
}

.campus-photo {
    position: relative;
    z-index: 10;
    margin-top: -1px;
    height: 460px;
    background-color: var(--campi-blue-dark);
    background-size: cover;
    background-position: center;
    border-radius: 20px 0 0 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.campus-photo--cutout {
    overflow: visible;
}

.campus-photo-cutout-img {
    position: absolute;
    left: 0;
    top: -180px;
    width: 100%;
    height: calc(100% + 180px);
    object-fit: cover;
    object-position: center top;
    border-bottom-left-radius: 20px;
}

/* Campus Vila Gávea: foto ainda cortava metade do prédio com o offset
   padrão do cutout; precisa subir mais que o Via Centro (que já ficou bom
   em -180px). Offset reduzido de -320px para abaixar a imagem sem mexer
   na base (que continua alinhada ao fundo do card, calc(100% + N) mantém
   o bottom fixo em 100% independente de N). */
.campus-photo-cutout-img--vila-gavea {
    top: -260px;
    height: calc(100% + 260px);
}

.campus-body {
    flex: 1;
    padding: 30px;
}

.campus-name-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.icon-pin {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--campi-blue-dark);
    color: var(--color-white);
}

.icon-pin svg {
    width: 22px;
    height: 22px;
}

.campus-name {
    font-family: var(--campi-font-body);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--campi-blue-dark);
}

.campus-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 20px;
    margin-left: 80px;
}

.campus-address {
    display: flex;
    gap: 8px;
    font-family: var(--campi-font-body);
    font-size: 0.92rem;
    color: var(--campi-text-muted);
    line-height: 1.5;
}

.campus-address svg {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    color: var(--campi-text-muted);
}

.campus-contact {
    padding-left: 20px;
    border-left: 1px solid #E5E5E5;
}

.campus-contact p {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--campi-font-body);
    font-size: 0.92rem;
    color: var(--campi-text-muted);
    margin-bottom: 10px;
}

.campus-contact p:last-child {
    margin-bottom: 0;
}

.campus-contact svg {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    color: var(--campi-text-muted);
}

.campus-highlights {
    margin-left: 80px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #E5E5E5;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.campus-highlights li {
    position: relative;
    padding-left: 18px;
    font-family: var(--campi-font-body);
    font-size: 0.92rem;
    color: var(--campi-text-muted);
    line-height: 1.5;
}

.campus-highlights li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-gold);
}

.campus-highlights strong {
    color: var(--color-blue-dark);
}

.campi-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 200px;
    margin-top: 36px;
}

.campi-controls-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.carousel-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--campi-border);
    cursor: pointer;
}

.dot--active {
    background-color: var(--campi-blue-dark);
}

.btn-more-campi {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid var(--campi-blue-dark);
    color: var(--campi-blue-dark);
    font-family: var(--campi-font-body);
    font-weight: 700;
    font-size: 1rem;
    padding: 14px 32px;
    border-radius: 6px;
    background-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-more-campi svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.btn-more-campi:hover {
    background-color: var(--campi-blue-dark);
    color: var(--color-white);
}

.btn-more-campi:hover svg {
    transform: translateX(3px);
}

.campi-map-wrapper {
    border-radius: 0 20px 20px 0;
    overflow: hidden;
    min-height: 680px;
}

.campi-map-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   UNIVERSIDADE DO AGRO (uni-agro)
   Tokens escopados ao componente — não usam as variáveis globais do site.
   ========================================================================== */
.uni-agro {
    --agro-green: #2E7E3C;
    --agro-green-dark: #397A44;
    --agro-gold: #F3BA4F;
    --agro-white: var(--color-white);
    --agro-font: var(--font-body);

    background-color: var(--agro-green);
    color: var(--agro-white);
    padding-block: 100px;
    font-family: var(--agro-font);
}

.uni-agro .container {
    max-width: var(--container-max-wide);
}

.agro-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: stretch;
    justify-items: stretch;
}

.agro-info {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.agro-brand img {
    height: 400px;
    width: auto;
    margin-bottom: 4px;
    position: relative;
    margin-left: -50px;
    margin-right: auto;
}

.agro-slogan {
    font-family: var(--agro-font);
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.3;
    color: var(--agro-white);
    margin-bottom: 22px;
}

.agro-slogan em {
    display: block;
    font-style: italic;
    color: var(--agro-gold);
}

.agro-accent-line {
    display: block;
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background-color: var(--agro-gold);
    margin-bottom: 36px;
}

.agro-contact-list {
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin: 0;
    margin-top: auto;
    padding: 0;
}

.agro-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.agro-contact-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--agro-white);
}

.agro-contact-icon svg {
    width: 22px;
    height: 22px;
}

.agro-contact-list strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--agro-gold);
    margin-bottom: 6px;
}

.agro-contact-list p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.4;
}

.agro-showcase-panel {
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
    background-color: var(--agro-green-dark);
    border-radius: 28px;
    padding: 42px;
}

.agro-panel-top {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.agro-panel-text-block {
    flex: 1.3;
}

.agro-panel-title {
    font-family: var(--agro-font);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--agro-gold);
    margin-bottom: 18px;
}

.agro-panel-text-block p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
}

.agro-gallery__image {
    border-radius: 18px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.agro-gallery__image--small {
    flex: 1;
    height: 220px;
    margin-top: 10px;
}

.agro-gallery__image--large {
    height: 320px;
    width: 100%;
}

/* ==========================================================================
   HOSPITAL UNIVERSITÁRIO (uni-hospital)
   Tokens escopados ao componente — não usam as variáveis globais do site.
   ========================================================================== */
.uni-hospital {
    --hospital-blue-dark: var(--color-blue-dark);
    --hospital-blue-light: #DCEBF7;
    --hospital-text-muted: var(--color-text-muted);
    --hospital-white: var(--color-white);
    --hospital-font-title: var(--font-title-serif);
    --hospital-font-body: var(--font-body-alt);

    background-color: var(--hospital-white);
    padding-block: 120px;
    font-family: var(--hospital-font-body);
}

.uni-hospital .container {
    max-width: var(--container-max-wide);
}

.hospital-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.5fr;
    gap: 72px;
    align-items: center;
}

.hospital-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.hospital-brand img {
    height: 70px;
    width: auto;
}

.hospital-title {
    font-family: var(--hospital-font-title);
    font-weight: 700;
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    line-height: 1.25;
    color: var(--hospital-blue-dark);
    margin-bottom: 14px;
}

.hospital-lead {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--hospital-text-muted);
    margin-bottom: 20px;
    max-width: none;
    width: 100%;
}

.hospital-contact-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
}

.hospital-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background-color: var(--hospital-white);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    padding: 8px 12px;
}

.hospital-contact-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-color: var(--hospital-blue-light);
    color: var(--hospital-blue-dark);
}

.hospital-contact-icon svg {
    width: 15px;
    height: 15px;
}

.hospital-contact-list strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--hospital-blue-dark);
    margin-bottom: 2px;
}

.hospital-contact-list p {
    font-size: 0.8rem;
    color: var(--hospital-text-muted);
    line-height: 1.4;
}

.hospital-actions {
    display: flex;
    gap: 20px;
}

.hospital-cta-whatsapp,
.hospital-cta-chegar {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--hospital-font-body);
    font-weight: 700;
    font-size: 1.1rem;
    padding: 20px 30px;
    border-radius: 8px;
    transition: filter 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.hospital-cta-whatsapp svg,
.hospital-cta-chegar svg {
    width: 20px;
    height: 20px;
}

.hospital-cta-whatsapp {
    background-color: var(--hospital-blue-dark);
    color: var(--hospital-white);
}

.hospital-cta-whatsapp:hover {
    filter: brightness(1.1);
}

.hospital-cta-chegar {
    background-color: transparent;
    border: 1.5px solid var(--hospital-blue-dark);
    color: var(--hospital-blue-dark);
}

.hospital-cta-chegar:hover {
    background-color: var(--hospital-blue-dark);
    color: var(--hospital-white);
}

.hospital-showcase-bg {
    position: relative;
}

.hospital-showcase-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: translate(32px, -32px);
    background-color: var(--hospital-blue-light);
    border-radius: 28px;
    z-index: 0;
}

.hospital-showcase {
    position: relative;
    z-index: 1;
    margin: 0;
}

.hospital-gallery-top {
    display: flex;
    gap: 28px;
    margin-bottom: 28px;
}

.hospital-photo-main {
    flex: 1.6;
    min-height: 400px;
    border-radius: 24px;
    background-color: var(--hospital-blue-dark);
    background-size: cover;
    background-position: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.hospital-highlights {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.hospital-highlight-card {
    border-radius: 24px;
    padding: 28px;
}

.hospital-highlight-card--dark {
    background-color: var(--hospital-blue-dark);
    color: var(--hospital-white);
}

.hospital-highlight-card--light {
    background-color: var(--hospital-white);
    color: var(--hospital-blue-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.hospital-highlight-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.hospital-highlight-icon {
    display: flex;
    flex-shrink: 0;
}

.hospital-highlight-icon svg {
    width: 44px;
    height: 44px;
}

.hospital-highlight-card h3 {
    font-family: var(--hospital-font-body);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
}

.hospital-highlight-card p {
    padding-left: 58px;
    font-size: 1.05rem;
    line-height: 1.5;
    opacity: 0.9;
}

.hospital-gallery-bottom {
    display: flex;
    gap: 28px;
}

.hospital-photo-small {
    flex: 1;
    height: 230px;
    border-radius: 24px;
    background-color: var(--hospital-blue-dark);
    background-size: cover;
    background-position: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.hospital-photo-small--wide {
    flex: 1.4;
}

/* ==========================================================================
   NOSSOS POLOS (uni-polos)
   Tokens escopados ao componente — não usam as variáveis globais do site.
   ========================================================================== */
.uni-polos {
    --polos-bg: #FAF6EE;
    --polos-blue-dark: var(--color-blue-dark);
    --polos-green: #418B56;
    --polos-green-dark: #2D6336;
    --polos-gold: var(--color-gold);
    --polos-white: var(--color-white);
    --polos-text-muted: var(--color-text-muted);
    --polos-border: #E2E8F0;
    --polos-border-light: #F1F5F9;
    --polos-font-title: var(--font-title-serif);
    --polos-font-body: var(--font-body);

    background-color: #FCF9F4;
    padding-block: 80px;
    font-family: var(--polos-font-body);
    color: var(--polos-blue-dark);
}

.polos-container {
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    gap: 48px;
    max-width: var(--container-max-wide);
    margin-inline: auto;
    padding-inline: 48px;
    align-items: start;
}

/* Coluna 1: Textos */
.polos-info-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.polos-tagline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--polos-blue-dark);
    text-transform: uppercase;
    margin-bottom: 20px;
}

.polos-title {
    font-family: var(--polos-font-title);
    font-size: 4.8rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
}

.polos-accent-line {
    display: block;
    width: 64px;
    height: 6px;
    background-color: var(--polos-gold);
    border-radius: 2px;
    margin-bottom: 32px;
}

.polos-description {
    font-size: 1.3rem;
    color: var(--polos-text-muted);
    line-height: 1.7;
    margin-bottom: 44px;
    max-width: 460px;
}

.btn-all-polos {
    display: inline-flex;
    align-items: center;
    padding: 17px 38px;
    border: 1.5px solid var(--polos-blue-dark);
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
    color: var(--polos-blue-dark);
    transition: all 0.2s ease;
}

.btn-all-polos:hover {
    background-color: var(--polos-blue-dark);
    color: var(--polos-white);
}

/* Coluna 2: Mapa interativo dos polos (MapaEad) */
.polos-mapaead-col {
    width: 100%;
}

.polos-mapaead-col #mapa {
    background: transparent !important;
    box-shadow: none !important;
}

.polos-mapaead-col .avisoPolo {
    background: var(--polos-white);
    color: var(--polos-blue-dark);
    font-family: var(--polos-font-body);
}

.polos-mapaead-col .card-polo {
    position: relative;
    max-width: 480px;
    margin-inline: auto;
    margin-top: 16px;
    margin-bottom: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(30, 27, 75, 0.06);
}

.polos-mapaead-col .sign-up-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 22px 22px 78px;
    font-size: 1.25rem;
    color: var(--polos-gold);
    border-radius: 12px 12px 0 0;
}

.polos-mapaead-col .sign-up-title::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 10px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--polos-gold);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23FFFFFF' d='M128 252.6C128 148.4 214 64 320 64C426 64 512 148.4 512 252.6C512 371.9 391.8 514.9 341.6 569.4C329.8 582.2 310.1 582.2 298.3 569.4C248.1 514.9 127.9 371.9 127.9 252.6zM320 320C355.3 320 384 291.3 384 256C384 220.7 355.3 192 320 192C284.7 192 256 220.7 256 256C256 291.3 284.7 320 320 320z'/%3E%3C/svg%3E");
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.polos-mapaead-col .card-polo>div:last-child {
    column-count: 2;
    column-gap: 24px;
    column-rule: 1px solid var(--polos-border);
}

.polos-mapaead-col .card-polo>div:last-child>div {
    position: relative;
    min-height: 32px;
    padding-left: 42px;
    overflow-wrap: anywhere;
    break-inside: avoid;
}

.polos-mapaead-col .card-polo>div:last-child>div span {
    display: block;
    margin-bottom: 2px;
    color: var(--polos-blue-dark);
}

.polos-mapaead-col .card-polo>div:last-child>a {
    display: none;
}

.polos-mapaead-col .card-polo>div:last-child>div:nth-child(1)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: var(--color-blue-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%231E1B4B' d='M128 252.6C128 148.4 214 64 320 64C426 64 512 148.4 512 252.6C512 371.9 391.8 514.9 341.6 569.4C329.8 582.2 310.1 582.2 298.3 569.4C248.1 514.9 127.9 371.9 127.9 252.6zM320 320C355.3 320 384 291.3 384 256C384 220.7 355.3 192 320 192C284.7 192 256 220.7 256 256C256 291.3 284.7 320 320 320z'/%3E%3C/svg%3E");
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
}

.polos-mapaead-col .card-polo>div:last-child>div:nth-child(2) {
    display: none;
}

.polos-mapaead-col .card-polo>div:last-child>div:nth-child(3)::before,
.polos-mapaead-col .card-polo>div:last-child>div:nth-child(4)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: var(--color-blue-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%231E1B4B' d='M224.2 89C216.3 70.1 195.7 60.1 176.1 65.4L170.6 66.9C106 84.5 50.8 147.1 66.9 223.3C104 398.3 241.7 536 416.7 573.1C493 589.3 555.5 534 573.1 469.4L574.6 463.9C580 444.2 569.9 423.6 551.1 415.8L453.8 375.3C437.3 368.4 418.2 373.2 406.8 387.1L368.2 434.3C297.9 399.4 241.3 341 208.8 269.3L253 233.3C266.9 222 271.6 202.9 264.8 186.3L224.2 89z'/%3E%3C/svg%3E");
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
}

.polos-mapaead-col .card-polo>div:last-child>div:nth-child(5)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: var(--color-blue-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%231E1B4B' d='M112 128C85.5 128 64 149.5 64 176C64 191.1 71.1 205.3 83.2 214.4L291.2 370.4C308.3 383.2 331.7 383.2 348.8 370.4L556.8 214.4C568.9 205.3 576 191.1 576 176C576 149.5 554.5 128 528 128L112 128zM64 260L64 448C64 483.3 92.7 512 128 512L512 512C547.3 512 576 483.3 576 448L576 260L377.6 408.8C343.5 434.4 296.5 434.4 262.4 408.8L64 260z'/%3E%3C/svg%3E");
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
}

.polos-mapaead-col #mapa-cards {
    scrollbar-width: thin;
    scrollbar-color: var(--polos-gold) transparent;
}

.polos-mapaead-col #mapa-cards::-webkit-scrollbar {
    width: 6px;
}

.polos-mapaead-col #mapa-cards::-webkit-scrollbar-track {
    background: transparent;
}

.polos-mapaead-col #mapa-cards::-webkit-scrollbar-thumb {
    background: var(--polos-gold);
    border-radius: 999px;
}

/* ==========================================================================
   REDES SOCIAIS (uni-social-mural)
   Tokens escopados ao componente — não usam as variáveis globais do site.
   Mobile-first: estilos base para telas pequenas, ampliado via min-width.
   ========================================================================== */
.uni-social-mural {
    --social-blue-dark: var(--color-blue-dark);
    --social-blue-darker: #1F2344;
    --social-gold: var(--color-gold);
    --social-white: var(--color-white);
    --social-text-muted: #C9CCE3;
    --social-font-title: var(--font-title-serif);
    --social-font-body: var(--font-body);

    background-color: var(--color-bg);
    padding-block: 56px;
    font-family: var(--social-font-body);
}

.uni-social-mural .container {
    max-width: var(--container-max-wide);
}

.social-mural-box {
    /* container query, não vw: escala pelo tamanho do próprio card (cqi),
       que é quem realmente muda com o monitor (a vw batia no teto do
       clamp() bem antes de --container-max-wide, então parecia "travado"
       em telas grandes). */
    container-type: inline-size;
    position: relative;
    overflow: hidden;
    background-color: var(--social-blue-dark);
    border-radius: 24px;
    padding: clamp(28px, 3.7cqi, 64px) clamp(20px, 4.1cqi, 72px);
}

.social-mural-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(260deg, rgba(30, 27, 75, 0.55) 0%, rgba(30, 27, 75, 0.85) 45%, var(--social-blue-dark) 75%),
        url('../images/banner.png') right center / contain no-repeat,
        var(--social-blue-darker);
    mask-image: linear-gradient(to left, black 0%, black 35%, transparent 70%);
    -webkit-mask-image: linear-gradient(to left, black 0%, black 35%, transparent 70%);
    pointer-events: none;
}

.social-mural-dots {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 60px;
    background-image: radial-gradient(circle, rgba(245, 184, 65, 0.15) 1.4px, transparent 1.4px);
    background-size: 16px 16px;
    opacity: 0.9;
    pointer-events: none;
}

.social-mural-dots--right {
    left: auto;
    right: 0;
    top: 130px;
    opacity: 0.9;
}

.social-mural-logo-corner {
    position: absolute;
    top: -5px;
    right: -20px;
    width: 95px;
    height: 150px;
    overflow: hidden;
    opacity: 0.2;
    pointer-events: none;
    z-index: 2;
}

.social-mural-logo-corner img {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    max-width: none;
    height: auto;
    object-fit: contain;
}

.social-mural-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.social-mural-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.social-accent-line {
    display: block;
    width: 48px;
    height: 4px;
    background-color: var(--social-gold);
    border-radius: 2px;
    margin-bottom: 14px;
}

.social-mural-title {
    font-family: var(--social-font-title);
    font-size: clamp(27px, 2.8cqi, 48px);
    font-weight: 700;
    color: var(--social-white);
    margin-bottom: 16px;
}

.social-mural-description {
    font-size: clamp(14px, 1cqi, 18px);
    line-height: 1.65;
    color: var(--social-gold);
    max-width: 560px;
}

.social-cards-row {
    /* sempre em linha única (nunca 2 col x 3 linhas): os cards têm um
       tamanho confortável fixo (flex-basis) e só encolhem (flex-shrink)
       quando realmente não cabem — em vez de dividir a largura toda em
       6 partes iguais, o que deixava os ícones pequenos em monitor grande.
       O espaço sobrando é absorvido pelos .social-connector, que crescem. */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 0.85cqi, 16px);
    width: 100%;
}

.social-card {
    /* container próprio (aninhado no do .social-mural-box): o ícone e o
       nome escalam pela largura que o card realmente ocupa (depois do
       flex-basis/flex-shrink), não pela largura do mural inteiro — por
       isso continuam cabendo os 6 lado a lado em qualquer tamanho de tela,
       mas sem ficar espremidos em telas grandes. */
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 0.85cqi, 14px);
    flex: 1 1 clamp(70px, 11.5cqi, 190px);
    min-width: 0;
    transition: transform 0.2s ease;
}

.social-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(22px, 79cqi, 150px);
    height: clamp(22px, 79cqi, 150px);
    flex-shrink: 0;
    border-radius: 20px;
}

.social-card-icon > .social-icon-mask,
.social-icon-mask-group {
    width: clamp(12px, 42.7cqi, 81px);
    height: clamp(12px, 42.7cqi, 81px);
}

/* Ícones carregados de /assets/images/icons/*.svg via CSS mask (em vez de
   <img>) porque precisam de uma cor sólida diferente do arquivo original
   (que não define fill) — o mask deixa a forma do SVG e pinta com
   background-color, então o mesmo arquivo serve qualquer cor de marca. */
.social-icon-mask {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.social-icon-mask--x {
    -webkit-mask-image: url('/assets/images/icons/x-twitter.svg');
    mask-image: url('/assets/images/icons/x-twitter.svg');
    background-color: #0B0B0F;
}

.social-icon-mask--linkedin {
    -webkit-mask-image: url('/assets/images/icons/linkedin-in.svg');
    mask-image: url('/assets/images/icons/linkedin-in.svg');
    background-color: #FFFFFF;
}

.social-icon-mask--facebook {
    -webkit-mask-image: url('/assets/images/icons/facebook-f.svg');
    mask-image: url('/assets/images/icons/facebook-f.svg');
    background-color: #FFFFFF;
}

.social-icon-mask--instagram {
    -webkit-mask-image: url('/assets/images/icons/instagram.svg');
    mask-image: url('/assets/images/icons/instagram.svg');
    background-color: #FFFFFF;
}

/* TikTok: mesmo truque de 3 camadas do desenho original (ciano + rosa
   levemente deslocados atrás, branco por cima), só que cada camada agora é
   um mask do tiktok.svg em vez de um <use> com fill. */
.social-icon-mask-group {
    position: relative;
}

.social-icon-mask-group .social-icon-mask {
    position: absolute;
    inset: 0;
    -webkit-mask-image: url('/assets/images/icons/tiktok.svg');
    mask-image: url('/assets/images/icons/tiktok.svg');
}

.social-icon-mask--tiktok-cyan {
    background-color: #25F4EE;
    transform: translate(-2.5%, 2.5%);
}

.social-icon-mask--tiktok-pink {
    background-color: #FE2C55;
    transform: translate(2.5%, -2.5%);
}

.social-icon-mask--tiktok-white {
    background-color: #FFFFFF;
}

.social-card-icon--tiktok {
    background-color: #000000;
}

.social-card-icon--x {
    background-color: var(--social-white);
}

.social-card-icon--youtube .social-icon-mask {
    width: clamp(13px, 48cqi, 91px);
    height: clamp(12px, 44cqi, 84px);
}

.social-icon-mask--youtube {
    -webkit-mask-image: url('/assets/images/icons/youtube-play.svg');
    mask-image: url('/assets/images/icons/youtube-play.svg');
    background-color: #FFFFFF;
}

.social-card-icon--linkedin {
    background-color: #0A66C2;
}

.social-card-icon--youtube {
    width: clamp(24px, 80cqi, 152px);
    background-color: #FF0000;
}

.social-card-icon--facebook {
    background-color: #1877F2;
    border-radius: 50%;
}

.social-card-icon--instagram {
    background: linear-gradient(135deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
}

.social-card-name {
    font-family: var(--social-font-body);
    font-size: clamp(10px, 6cqi, 16px);
    font-weight: 500;
    color: var(--social-white);
    text-align: center;
}

.social-card:hover {
    transform: translateY(-4px);
}

.social-connector {
    /* sempre visível: como os cards não crescem além do seu tamanho
       confortável (flex-basis), é o conector que absorve o espaço sobrando
       em telas largas — por isso os ícones não ficam "esticados" finos por
       um monitor grande. Encolhe (e a linha decorativa vira um traço fino)
       em telas estreitas, mas nunca some. */
    display: block;
    position: relative;
    align-self: center;
    flex: 1 1 clamp(4px, 1cqi, 24px);
    min-width: 4px;
    height: clamp(48px, 6cqi, 120px);
}

.social-connector::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background-image: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.3) 0,
            rgba(255, 255, 255, 0.3) calc(50% - 14px),
            transparent calc(50% - 14px),
            transparent calc(50% + 14px),
            rgba(255, 255, 255, 0.3) calc(50% + 14px),
            rgba(255, 255, 255, 0.3) 100%);
}

.social-connector::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 6px;
    height: 6px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: var(--social-gold);
}

@media (min-width: 640px) {
    .social-mural-text {
        align-items: flex-start;
        align-self: flex-start;
        max-width: 50%;
        text-align: left;
    }

    .social-mural-description {
        max-width: 340px;
    }
}


/* ==========================================================================
   NOSSOS PORTAIS (uni-portais)
   Tokens escopados ao componente — não usam as variáveis globais do site.
   ========================================================================== */
.uni-portais {
    --portais-blue-dark: var(--color-blue-dark);
    --portais-gold: var(--color-gold);
    --portais-text-muted: var(--color-text-muted);
    --portais-white: var(--color-white);
    --portais-border-light: #F1F5F9;
    --portais-font-title: var(--font-title);
    --portais-font-body: var(--font-body);

    position: relative;
    overflow: hidden;
    padding-block: 96px;
    font-family: var(--portais-font-body);
}

.uni-portais .container {
    max-width: var(--container-max-wide);
}

.portais-decor {
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

.portais-decor-logo {
    position: absolute;
    top: 0;
    right: 0;
    height: 420px;
    width: 280px;
    max-width: none;
    object-fit: contain;
    object-position: top right;
}

.portais-accent-line {
    display: block;
    width: 64px;
    height: 5px;
    background-color: var(--portais-gold);
    border-radius: 2px;
    margin-bottom: 20px;
}

.portais-title {
    font-family: var(--portais-font-title);
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--portais-blue-dark);
    margin-bottom: 12px;
}

.portais-subtitle {
    font-size: 1.2rem;
    color: var(--portais-text-muted);
    margin-bottom: 48px;
}

.portais-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.portal-card {
    position: relative;
    display: flex;
    background-color: var(--portais-white);
    border-radius: 26px;
    box-shadow: 0 4px 14px rgba(30, 27, 75, 0.06);
    padding: 60px;
    min-height: 180px;
    color: inherit;
    text-decoration: none;
}

/* Sem overflow:hidden: em repouso o object-fit:contain do <img> (ver
   abaixo) já garante que a logo nunca estoura essa caixa, então não há
   nada pra recortar — e o leve zoom de 8% no hover (poucos px) só precisa
   do respiro do padding do .portal-card ao redor (25-60px) pra não cortar
   a logo, em vez de ser cortado de forma abrupta por este overflow. */
.portal-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* width/height:100% (em vez do antigo max-width/max-height:100% com
   width/height:auto) dão ao <img> uma caixa DEFINIDA do tamanho do
   container — só assim object-fit:contain funciona como esperado (encolhe
   OU AUMENTA a imagem, preservando a proporção, sem nunca estourar a
   caixa). Com width/height:auto, a caixa do <img> nunca passava do
   tamanho intrínseco do arquivo: um logo com poucos pixels (ex.: 205x59)
   ficava pequeno dentro do card em vez de preencher o espaço disponível.
   --logo-scale (opcional, via style inline) continua existindo só pra
   ajuste fino de peso visual entre logos vizinhos (ex.: uma logo cujo
   aspect ratio já bate quase exatamente com o do card, como a da AVA,
   preenche os dois eixos e por isso "pesa" mais que as outras) — não é
   mais o que faz a logo caber; sem overflow:hidden no container (ver
   acima), um scale-up modesto (a folga de sobra no eixo que não está
   colado na borda) só respira no padding do .portal-card ao redor, nunca
   corta. */
.portal-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(var(--logo-scale, 1));
    transition: transform 0.3s ease;
}

.portal-card:hover .portal-card-logo img {
    transform: scale(calc(var(--logo-scale, 1) * 1.08));
}

.portal-card-arrow {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background-color: var(--portais-border-light);
    border-radius: 50%;
    color: var(--portais-blue-dark);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.portal-card-arrow svg {
    width: 18px;
    height: 18px;
}

.portal-card:hover .portal-card-arrow {
    background-color: var(--portais-blue-dark);
    color: var(--portais-white);
}

/* ==========================================================================
   CURVA DE TRANSIÇÃO (footer-wave)
   ========================================================================== */
.footer-wave {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    background-color: var(--color-bg);
}

.footer-wave svg {
    display: block;
    width: 100%;
    height: 70px;
}

/* ==========================================================================
   FOOTER (site-footer)
   Tokens escopados ao componente — não usam as variáveis globais do site.
   ========================================================================== */
.site-footer {
    --footer-blue-dark: var(--color-blue-dark);
    --footer-blue-darker: #17143B;
    --footer-gold: var(--color-gold);
    --footer-white: var(--color-white);
    --footer-text-muted: #9C9FC4;
    --footer-border: rgba(255, 255, 255, 0.12);
    --footer-font-body: var(--font-body);

    background-color: var(--footer-blue-dark);
    color: var(--footer-white);
    font-family: var(--footer-font-body);
}

.site-footer .container {
    max-width: var(--container-max-wide);
}

.footer-main {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
    align-items: center;
    gap: 40px;
    padding-block: 56px;
}

.footer-col--contact {
    padding-left: 40px;
    border-left: 1px solid var(--footer-border);
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-logo-img {
    /* Base: mesma largura do texto logo abaixo (.footer-about tem
       max-width:320px) — antes a logo tinha só a altura fixada (150px) e
       ficava bem mais larga que o parágrafo/tagline/ícones. -10% por
       pedido posterior. */
    width: 288px;
    max-width: 100%;
    height: auto;
}

.footer-about {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--footer-text-muted);
    max-width: 320px;
    margin-bottom: 24px;
}

.footer-accent-line {
    display: block;
    width: 56px;
    height: 4px;
    background-color: var(--footer-gold);
    border-radius: 2px;
    margin-bottom: 16px;
}

.footer-tagline {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: var(--footer-gold);
    text-transform: uppercase;
    margin-bottom: 28px;
}

.footer-social-row {
    display: flex;
    gap: 12px;
}

.footer-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--footer-border);
    border-radius: 50%;
    color: var(--footer-white);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.footer-social-icon svg {
    width: 17px;
    height: 17px;
}

.footer-social-icon:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--footer-white);
}

.footer-col-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--footer-white);
    margin-bottom: 18px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-links a {
    font-size: 1rem;
    color: var(--footer-text-muted);
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--footer-white);
}

.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

.footer-contact-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    color: var(--footer-text-muted);
}

.footer-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--footer-gold);
}

.footer-contact-icon svg {
    width: 19px;
    height: 19px;
}

.footer-qr-block {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-qr-code {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    padding: 7px;
    background-color: var(--footer-white);
    border-radius: 10px;
}

.footer-qr-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-qr-text {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--footer-text-muted);
    max-width: 160px;
}

.footer-bottom {
    background-color: var(--footer-blue-darker);
    border-top: 1px solid var(--footer-border);
}

.footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 20px;
}

.footer-bottom-left {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--footer-text-muted);
}

.footer-bottom-left strong {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--footer-white);
}

.footer-bottom-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    font-size: 0.8rem;
    color: var(--footer-text-muted);
}

.footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-bottom-links a {
    color: var(--footer-text-muted);
    transition: color 0.2s ease;
}

.footer-bottom-links a:hover {
    color: var(--footer-white);
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

/* Abaixo da largura "cheia" de desktop não sobra espaço vertical suficiente
   entre o título "Nossos Campi" e o card para o vazamento de -180px/-260px
   usado no desktop. Reduz o vazamento para um valor pequeno que ainda dá o
   efeito de cutout mas cabe no espaço disponível sem tapar o título. */
@media (max-width: 1300px) {
    .campus-photo-cutout-img,
    .campus-photo-cutout-img--vila-gavea {
        top: -32px;
        height: calc(100% + 32px);
    }

    /* A foto da Vila Gávea é quadrada e tem bastante céu na metade de
       cima; com object-position "top" (herdado) o corte sobra vem de
       baixo, mantendo todo o céu visível. Ancora embaixo pra cortar o
       céu em vez do prédio, e aumenta um pouco o zoom pra reforçar. */
    .campus-photo-cutout-img--vila-gavea {
        top: -70px;
        height: calc(100% + 70px);
        object-position: center bottom;
    }
}

@media (max-width: 960px) {
    .banner {
        min-height: 620px;
        padding: 150px 6% 100px;
    }

    .banner h1 {
        font-size: 2.75rem;
    }

    .subtitulo {
        font-size: 1.25rem;
    }

    .campi-showcase {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .campus-card {
        border-radius: 20px;
    }

    .campus-photo {
        border-radius: 20px 20px 0 0;
    }

    .campi-map-wrapper {
        border-radius: 20px;
        min-height: 380px;
    }

    .agro-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hospital-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hospital-showcase {
        margin: 0;
    }

    .hospital-gallery-top {
        flex-direction: column;
    }

    .hospital-gallery-bottom {
        flex-direction: column;
    }

    .polos-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .portais-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
        row-gap: 40px;
    }

    .footer-col--brand {
        grid-column: 1 / -1;
    }

    .footer-col--contact {
        grid-column: 1 / -1;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--footer-border);
        padding-top: 32px;
    }
}

@media (max-width: 560px) {

    .wa-top,
    .wa-footer {
        padding-inline: 24px;
    }

    .wa-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        text-align: left;
    }

    .wa-footer-message {
        text-align: left;
    }

    .portais-grid {
        grid-template-columns: 1fr;
    }

    .footer-main {
        grid-template-columns: 1fr;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}