/* ===================================================================
   ESCALA DE BREAKPOINTS (desktop-first, max-width inclusivo)
   - 480px  — celulares
   - 768px  — phablets / tablet retrato
   - 1024px — tablet paisagem / notebooks compactos
   - 1280px — reservado para ajustes em telas largas (sem uso hoje)
   Exceção: 782px só para a admin-bar do WordPress.
   Novos blocos devem usar apenas esses valores; mobile-first
   (min-width) somente em blocos reescritos por completo.
   =================================================================== */

:root {
    --bg: #f7f3ea;
    --surface: #ffffff;
    --surface-alt: #f0ead9;
    --text: #0f1d2e;
    --muted: #5a6675;
    --primary: #0c2742;        /* navy — marca: títulos, ícones, detalhes */
    --primary-dark: #081a2e;   /* navy mais escuro */
    --accent: #c9a24a;         /* dourado — CTA e detalhes */
    --accent-dark: #a8842f;    /* dourado escuro — hover / eyebrow em fundo claro */
    --cta: #c9a24a;
    --cta-dark: #a8842f;
    --border: #e7ddc9;
    --shadow: 0 20px 40px rgba(10, 22, 38, 0.10);
    --radius: 24px;
    --container: 1160px;
    /* superfícies escuras (hero / ofertas) — identidade navy + dourado */
    --navy-900: #07172a;
    --navy-800: #0b2138;
    --navy-700: #11304f;
    --navy-600: #1b405f;
    --on-dark: #e9f0f8;
    --on-dark-muted: #9fb2c6;
    --gold-2: #e6c878;
    --line-gold: rgba(201, 162, 74, 0.28);
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

svg {
    display: block;
}

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

p {
    margin-top: 0;
}

.container {
    width: min(calc(100% - 2rem), var(--container));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(247, 245, 240, 0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(223, 213, 197, 0.8);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 78px;
}

body.admin-bar .site-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

.brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.7rem;
    /* alvo de toque de 44, que a marca não tinha: ela media 38 de altura no
       celular, e é link para a home em toda página (CONS-CONSORCIO-56, D30) */
    min-height: 44px;
}

.brand__logo {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
}

.brand__text {
    display: flex;
    flex-direction: column;
}

.brand__name {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.brand__role {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.2;
}

.site-nav__menu {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.site-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.8rem;
}

/* O cabeçalho de campanha acompanha o tema escuro do site: o fundo claro era
   resquício do tema antigo e deixava o nome branco ilegível (CONS-58). */
body.campaign-landing .site-header {
    backdrop-filter: none;
    background: rgba(8, 23, 42, 0.98);
}

body.campaign-landing .site-header__inner {
    min-height: 70px;
}

body.campaign-landing .site-header__actions {
    width: auto;
    margin-left: auto;
}

.site-header__cta {
    flex: 0 0 auto;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 0 rgba(201, 162, 74, 0.45);
    animation: header-cta-pulse 2.2s ease-out infinite;
}

.site-header__cta::after {
    content: "";
    position: absolute;
    top: 0;
    left: -140%;
    width: 60%;
    height: 100%;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.35) 45%, transparent 100%);
    transform: skewX(-22deg);
    animation: header-cta-shine 2.8s ease-in-out infinite;
    pointer-events: none;
}

.site-header__cta:hover {
    box-shadow: 0 10px 24px rgba(201, 162, 74, 0.35);
}

.site-nav__menu li {
    display: flex;
}

.site-nav__menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-height: 44px;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    font-size: 0.95rem;
    color: var(--text);
    font-weight: 700;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(143, 106, 51, 0.16);
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.site-nav__menu a:hover {
    transform: translateY(-1px);
    background: rgba(143, 106, 51, 0.12);
    border-color: rgba(143, 106, 51, 0.2);
    color: var(--primary-dark);
    box-shadow: 0 10px 24px rgba(25, 25, 25, 0.08);
}

.site-nav__menu a:focus-visible {
    outline: 3px solid rgba(143, 106, 51, 0.28);
    outline-offset: 2px;
    background: rgba(143, 106, 51, 0.12);
    border-color: rgba(143, 106, 51, 0.35);
    color: var(--primary-dark);
}

.site-nav__menu .current-menu-item > a,
.site-nav__menu .current_page_item > a,
.site-nav__menu .current-menu-parent > a,
.site-nav__menu .current-menu-ancestor > a,
.site-nav__menu .current-page-ancestor > a {
    color: var(--primary-dark);
    background: linear-gradient(135deg, rgba(143, 106, 51, 0.18), rgba(109, 77, 34, 0.12));
    border-color: rgba(143, 106, 51, 0.32);
    box-shadow: 0 10px 20px rgba(109, 77, 34, 0.16);
}

.site-nav__menu .current-menu-item > a:hover,
.site-nav__menu .current_page_item > a:hover,
.site-nav__menu .current-menu-parent > a:hover,
.site-nav__menu .current-menu-ancestor > a:hover,
.site-nav__menu .current-page-ancestor > a:hover {
    color: var(--primary-dark);
    background: linear-gradient(135deg, rgba(143, 106, 51, 0.24), rgba(109, 77, 34, 0.16));
}

.site-main {
    min-height: calc(100vh - 78px);
    /* dvh acompanha a barra de endereço retrátil dos navegadores mobile */
    min-height: calc(100dvh - 78px);
}

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
}

.icon svg {
    width: 100%;
    height: 100%;
}

.section,
.hero-section {
    padding: 2.6rem 0 3rem;
}

.section-alt {
    background: linear-gradient(180deg, rgba(239, 231, 216, 0.65), rgba(239, 231, 216, 0.25));
}

.hero-grid,
.grid-two,
.footer-grid,
.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

.hero-section {
    padding-top: 2.6rem;
}

.hero-section--compact {
    padding-bottom: 3rem;
}

.landing-hero .hero-grid {
    align-items: start;
}

.landing-sla {
    margin: 1rem 0 1.2rem;
    color: var(--primary-dark);
    font-weight: 700;
}

.landing-support-button {
    margin-top: 0.85rem;
}

.landing-proof-box .feature-list {
    margin-top: 0.85rem;
}

.hero-section h1,
.section h1,
.section h2,
.section h3 {
    line-height: 1.1;
    margin: 0 0 1rem;
}

.hero-section h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    max-width: 12ch;
}

.section h1,
.section h2 {
    font-size: clamp(2rem, 4vw, 3rem);
}

.lead {
    font-size: 1.125rem;
    color: var(--muted);
    max-width: 60ch;
}

.hero-section .cta-group {
    margin-top: 1.25rem;
    margin-bottom: 1rem;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-dark);
    font-weight: 700;
}

.highlight-box,
.content-card,
.contact-card,
.stat-card,
.cta-panel{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.highlight-box,
.cta-panel{
    padding: 2rem;
}

.hero-visual {
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

.hero-portrait-card {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    background: linear-gradient(180deg, var(--navy-700) 0%, var(--navy-900) 100%);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.hero-portrait-image {
    width: 100%;
    height: 100%;
    min-height: 460px;
    object-fit: cover;
    object-position: center top;
}

.hero-portrait-badge {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 1.25rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    text-align: center;
}

.hero-portrait-badge .eyebrow {
    margin-bottom: 0.2rem;
}

.hero-portrait-badge strong {
    display: block;
    font-size: 1.2rem;
}

.hero-portrait-badge p {
    margin: 0;
    max-width: 28ch;
}

/*
  O card do retrato diz onde o atendimento acontece (CONS-CONSORCIO-65). O pin
  vem junto porque endereço solto em card estreito se lê como legenda da foto.
*/
.hero-portrait-local {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.35rem;
    max-width: 36ch;
    text-align: center;
    line-height: 1.35;
}

/* A unidade em cima e a rua embaixo, sempre: deixar as duas na mesma frase
   fazia a quebra pendurar o separador no fim da linha. */
.hero-portrait-local__unidade {
    display: block;
    font-weight: 600;
    /* o card é escuro: `--text` some nele, e quem serve é o token on-dark */
    color: var(--on-dark);
}

.hero-portrait-local .icon {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    color: var(--accent-dark);
}

.hero-portrait-local .icon svg {
    width: 15px;
    height: 15px;
    display: block;
}

.feature-list,
.check-list{
    margin: 1.5rem 0 0;
    padding: 0;
}

.feature-list,
.check-list {
    list-style: none;
}

.feature-list li,
.check-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.feature-list li::before,
.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--primary);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 50px;
    padding: 0.85rem 1.35rem;
    border-radius: 999px;
    font-weight: 700;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.button:not(.button-icon-only) .icon,
.button:not(.button-icon-only) .icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.cta-note {
    margin: 0.9rem 0 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    background: linear-gradient(135deg, var(--gold-2), var(--accent));
    color: #241a04;
}

.button-primary:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}

.button-secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.button-icon-only {
    width: 50px;
    min-width: 50px;
    padding: 0;
    aspect-ratio: 1;
}

.button-icon-only .icon {
    width: 1.75rem;
    height: 1.75rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.button-small {
    min-height: 42px;
    padding: 0.7rem 1rem;
}

.cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

/* A variante de campanha das páginas locais (CONS-CONSORCIO-58): um botão só,
   maior que o padrão, e o caminho secundário como link discreto. */
.lp-campanha__cta {
    min-height: 56px;
    padding: 1rem 1.75rem;
    font-size: 1.05rem;
}

.lp-campanha__secundario {
    margin: 1rem 0 0;
    font-size: 0.95rem;
}

.lp-campanha__secundario a {
    display: inline-block;
    padding: 0.6rem 0;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lp-campanha__filial {
    margin: 1.25rem 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--muted);
}

.lp-campanha__filial span {
    display: block;
}

.lp-campanha__filial a {
    display: inline-block;
    padding: 0.75rem 0.25rem 0.75rem 0;
    font-weight: 700;
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

/*
  A variante do funil (CONS-CONSORCIO-59). Aqui o topo não é a tela inteira:
  ele repete a promessa do anúncio e devolve a altura ao simulador, que precisa
  começar ainda na primeira tela. Por isso o h1 é menor que o do hero padrão e
  a seção fecha antes. Seletor composto de propósito: a regra de celular zera
  o padding de `.hero-section` mais adiante no arquivo, e a ordem sozinha não
  ganharia dela.
*/
.hero-section.lp-campanha--funil {
    padding-bottom: 1.5rem;
}

.hero-section.lp-campanha--funil h1 {
    font-size: clamp(1.75rem, 5.2vw, 2.4rem);
    max-width: 22ch;
}

.lp-campanha--funil + .section--funnel {
    padding-top: 1.5rem;
}

/*
  O cadastro da variante de campanha, que desde o CONS-CONSORCIO-62 é um passo
  só dele: não precisa mais de linha separando, porque a tela inteira já é a
  separação. O que resta é a caixa que recebe os campos vindos do passo 1.
*/
.funnel-contato-antes {
    margin-top: 1rem;
}

.funnel-contato-antes__lead {
    margin: 0 0 1.25rem;
    color: var(--muted);
    font-size: 0.95rem;
}

/*
  A linha regulatória: informa a categoria sem disputar o clique. Corpo menor
  que o do texto secundário, e cor de apoio.
*/
.lp-campanha__regulatorio {
    margin: 1.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--muted);
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(290px, 1fr);
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.25rem;
}

.content-card__image img{
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center top;
}

.content-card__body,
.contact-card,
.stat-card{
    padding: 1.5rem;
}

.card-grid,
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.stat-card p {
    margin-bottom: 0;
    color: var(--muted);
}

.content-card__meta {
    display: inline-block;
    margin-bottom: 0.75rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.content-card__body h3,
.content-card__body h2 {
    font-size: 1.35rem;
}

/* O título do cartão é o único link do cartão de Premiações, e media 28 de
   altura: o alvo cresce sem mudar o desenho, porque quem toca ali mira a linha
   inteira, e não a letra (CONS-CONSORCIO-56, D30). */
.content-card__body h2 a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.content-card--placeholder {
    grid-column: 1 / -1;
}

.contact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contact-grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.contact-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.1rem;
    min-height: 220px;
}

.contact-card--featured {
    background: linear-gradient(135deg, rgba(31, 168, 85, 0.12), rgba(255, 255, 255, 1));
}

.contact-card--instagram {
    background: linear-gradient(135deg, rgba(131, 58, 180, 0.14), rgba(253, 29, 29, 0.08), rgba(252, 176, 69, 0.12));
}

.contact-card__icon-wrap{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(143, 106, 51, 0.12);
    color: var(--primary-dark);
}

.contact-card__icon-wrap .icon{
    width: 1.35rem;
    height: 1.35rem;
}

.contact-card__action {
    margin-top: auto;
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 0.95rem;
}

.contact-card h2 {
    margin: 0;
    font-size: 1.2rem;
}

.contact-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.contact-support-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.contact-support-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.video-card {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.video-card__embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.video-card__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-card__body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.video-card__body h3 {
    margin: 0 0 0.5rem;
}

.video-card__body p {
    margin: 0;
    color: var(--muted);
}

.about-image-grid img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes floating-whatsapp-breathe {
    0%, 100% {
        transform: translateY(0);
        box-shadow: var(--shadow);
    }
    50% {
        transform: translateY(-3px);
        box-shadow: 0 24px 34px rgba(201, 162, 74, 0.24);
    }
}

@keyframes header-cta-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(201, 162, 74, 0.45);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(201, 162, 74, 0);
    }
}

@keyframes header-cta-shine {
    0% {
        left: -140%;
    }

    55%,
    100% {
        left: 170%;
    }
}

.about-visual-stack {
    display: grid;
    gap: 1.5rem;
}

.about-image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.about-image-grid img {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    aspect-ratio: 1 / 1;
}

.contact-card{
    transition: transform 0.2s ease;
}

.contact-card:hover{
    transform: translateY(-2px);
}

.cta-section {
    padding-top: 0;
}

.cta-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.prose {
    max-width: 820px;
}

.prose p,
.prose ul,
.prose ol {
    margin-bottom: 1rem;
}

.prose img {
    border-radius: var(--radius);
}

/*
  Link dentro de texto corrido não pode crescer a caixa, senão a linha se abre e
  o parágrafo desanda. A área de toque vem de um pseudo-elemento invisível de 44
  de altura, que é a mesma solução que o tema já usava no "Conhecer minha
  trajetória" e nos pontos do carrossel (CONS-CONSORCIO-56).
*/
.legal-doc li > a,
.legal-doc p > a,
.prose li > a,
.prose p > a {
    position: relative;
}

.legal-doc li > a::after,
.legal-doc p > a::after,
.prose li > a::after,
.prose p > a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    min-width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.single-showcase__image {
    margin: 2rem 0;
}

.single-showcase__image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: var(--radius);
    object-fit: contain;
    object-position: center top;
}

.post-type-archive-autoridade_card .card-grid {
    align-items: start;
}

.single-showcase__content {
    margin-bottom: 2rem;
}

/* Ficha do estudo de caso: rótulo e valor, um par por linha no celular e dois
   no desktop. Campo vazio não é renderizado, então a ficha some por inteiro
   quando ninguém preencheu nada. */
.ficha-caso {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem 2rem;
    margin: 2rem 0 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.ficha-caso dt {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-dark);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ficha-caso dd {
    margin: 0.15rem 0 0.5rem;
    color: var(--text);
}

.ficha-caso dd:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .ficha-caso {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pagination {
    margin-top: 2rem;
}

.site-footer {
    background: #151515;
    color: #f2f2f2;
    padding: 4rem 0 2rem;
}

.site-footer--campaign {
    padding: 2.5rem 0 2rem;
}

.footer-campaign {
    display: grid;
    gap: 1rem;
    text-align: center;
}

.footer-campaign__text {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
}

.footer-campaign__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-campaign__legal {
    margin: 0 auto;
    max-width: 72ch;
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
}
/* o link da política é o único alvo de toque desta faixa, e media 16 de altura */
.footer-campaign__legal a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: underline;
    text-underline-offset: 2px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.footer-title {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.contact-support-card--address{
    font-style: normal;
}

.footer-bottom {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.78);
    text-align: center;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1024px) {
    /* o cabeçalho saiu daqui: `flex-direction: column` nunca chegou a valer,
       porque o bloco do menu mobile, mais abaixo, devolve `row` (CONS-56) */
    .section-heading,
    .cta-panel {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-grid,
.grid-two,
.footer-grid,
.contact-grid,
.contact-grid--compact,
.card-grid,
.stats-grid,
.video-grid,
.contact-support-grid{
        grid-template-columns: 1fr;
    }

    .site-nav__menu {
        flex-wrap: wrap;
    }

    body.campaign-landing .site-header__inner {
        flex-direction: row;
        align-items: center;
    }

    body.campaign-landing .site-header__actions {
        width: auto;
        margin-left: auto;
        justify-content: flex-end;
    }

    .hero-portrait-image {
        min-height: 480px;
    }
}

@media (max-width: 480px) {
    /* 4rem em cima e embaixo, num celular de 430, é quase um quinto da tela só
       de respiro entre seções. 2,75rem mantém a separação e devolve rolagem
       (D29.1 do CONS-CONSORCIO-56). */
    .hero-section,
    .section {
        padding: 2.75rem 0;
    }

    .site-header__inner {
        padding: 0.9rem 0;
        align-items: center;
    }

    .site-header__actions {
        align-items: center;
    }

    .site-nav {
        width: 100%;
    }

    .site-nav__menu {
        width: 100%;
        justify-content: center;
    }

    .brand {
        gap: 0.2rem;
    }

    .button,
    .button-small {
        width: 100%;
    }

    .cta-group {
        width: 100%;
    }

    .cta-group .button {
        flex: 1 1 100%;
    }

    .cta-group .button-icon-only {
        flex: 0 0 auto;
        width: 50px;
        min-width: 50px;
    }

    .site-header__cta {
        width: 100%;
    }

    body.campaign-landing .site-header__cta {
        width: auto;
        min-width: 180px;
    }

    .footer-campaign__actions .button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header__cta,
.site-header__cta::after{
        animation: none;
    }
}

/* ===== Blocos da home reestruturada e da pagina "Entenda o Consorcio" ===== */

/* Selos de prova no hero */
.hero-stats {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem 2.5rem;
}

.hero-stats li {
    display: flex;
    flex-direction: column;
}

.hero-stats strong {
    font-size: 1.8rem;
    line-height: 1.1;
    color: var(--primary);
}

.hero-stats span {
    font-size: 0.95rem;
    color: var(--muted);
}

/* Cards educativos (estende .stat-card) */
.edu-card__icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: var(--surface-alt);
    color: var(--primary);
}

.edu-card__icon svg {
    width: 24px;
    height: 24px;
}

/* CTA centralizado ao fim de uma secao */
.section-cta {
    margin-top: 2.5rem;
    text-align: center;
}

/* Passos numerados */
.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.step {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem 1.6rem 1.6rem;
    box-shadow: var(--shadow);
}

.step__number {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
}

.step__text {
    margin: 0;
}

/* Degrau de tablet: 2 colunas entre 768 e 1024px (evita 1 coluna esticada
   no card-grid/stats-grid e 3 colunas apertadas nos passos) */
@media (min-width: 768px) and (max-width: 1024px) {
    .card-grid,
    .stats-grid,
    .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Depoimentos */
.testimonials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.testimonial {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.testimonial__quote {
    margin: 0;
    font-size: 1.05rem;
    font-style: italic;
}

.testimonial__quote::before {
    content: "\201C";
    color: var(--primary);
    font-size: 2rem;
    line-height: 0;
    vertical-align: -0.4rem;
    margin-right: 0.2rem;
}

.testimonial__author {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-weight: 700;
}

.testimonial__author img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

/* FAQ (details/summary nativo) */
.faq {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.faq__item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0 1.4rem;
    box-shadow: var(--shadow);
}

.faq__question {
    cursor: pointer;
    list-style: none;
    padding: 1.2rem 2rem 1.2rem 0;
    font-weight: 700;
    position: relative;
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--primary);
    line-height: 1;
}

.faq__item[open] .faq__question::after {
    content: "\2013";
}

.faq__answer {
    margin: 0;
    padding: 0 0 1.3rem;
    color: var(--muted);
}

/* Intro de pagina */
.page-intro {
    max-width: 720px;
}

@media (max-width: 480px) {
    .hero-stats {
        gap: 1rem 1.8rem;
    }

    .hero-stats strong {
        font-size: 1.5rem;
    }
}

/* ===== Polish de microinterações e acessibilidade (UI/UX Pro Max) ===== */
a,
button,
summary,
[role="button"],
.button,
.contact-card,
.faq__question {
    cursor: pointer;
}

a,
.button,
.content-card,
.stat-card,
.step,
.contact-card,
.testimonial{
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease,
        transform 0.2s ease, box-shadow 0.2s ease;
}

/* foco visível para navegação por teclado */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* hover sutil em cards clicáveis */
.content-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 26px 50px rgba(25, 25, 25, 0.12);
}

/* respeita usuários que pedem menos movimento */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* faixa de selos de confiança (Trust & Authority) */
.trust-strip {
    padding-top: 2.5rem;
    padding-bottom: 0;
}

.trust-badges {
    list-style: none;
    margin: 0;
    padding: 1.4rem 1.6rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem 1.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
}

.trust-badge .icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    color: var(--primary);
}

.trust-badge .icon svg {
    width: 28px;
    height: 28px;
}

/* intro de seção e nota abaixo de grids */
.section-intro {
    max-width: 760px;
    margin: 0 0 1.8rem;
}

.cards-note {
    margin-top: 2rem;
}

/* chips das formas de contemplação (teaser na home) */
.forma-chips {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.forma-chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-weight: 600;
    box-shadow: var(--shadow);
}

.forma-chips li .icon,
.forma-chips li .icon svg {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--primary);
}

.forma-chips-note {
    color: var(--muted);
    margin: 0 0 1.5rem;
    max-width: 720px;
}

/* simulador de lance interativo */
.lance-sim {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
}

.lance-field {
    margin-bottom: 1.2rem;
}

.lance-field label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-weight: 600;
    /* o rótulo é o alvo do `for`, e tocar nele move o foco para o deslizante */
    min-height: 44px;
    align-content: center;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.lance-field output {
    color: var(--primary);
    font-weight: 700;
    font-size: 1.05rem;
}

.lance-field__hint {
    display: block;
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 0.4rem;
}

.lance-sim input[type="range"] {
    width: 100%;
    accent-color: var(--primary);
    cursor: pointer;
}

.lance-sim__presets {
    display: flex;
    gap: 0.5rem;
    margin: 0.3rem 0 1.2rem;
    flex-wrap: wrap;
}

.lance-sim__presets button {
    flex: 1;
    /* mediam 111 x 36 no celular: o alvo sobe ao piso sem mudar o desenho
       (CONS-CONSORCIO-56) */
    min-width: 90px;
    min-height: 44px;
    padding: 0.6rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lance-sim__presets button:hover,
.lance-sim__presets button.is-active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.lance-sim__result {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lance-bar {
    display: flex;
    height: 20px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-alt);
}

.lance-bar span {
    display: block;
    transition: flex-grow 0.25s ease;
}

.lance-bar__emb { background: var(--accent); flex-grow: 1; }
.lance-bar__own { background: var(--primary); flex-grow: 1; }

.lance-bar-legend {
    display: flex;
    gap: 1.2rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.lance-bar-legend .dot {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    margin-right: 0.3rem;
    vertical-align: middle;
}

.dot--emb { background: var(--accent); }
.dot--own { background: var(--primary); }

.lance-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.lance-stats li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--border);
}

.lance-stats li span {
    color: var(--muted);
    font-size: 0.95rem;
}

.lance-stats li strong {
    font-size: 1.1rem;
    white-space: nowrap;
}

.lance-stats .is-final {
    border-bottom: none;
}

.lance-stats .is-final strong {
    color: var(--primary);
    font-size: 1.4rem;
}

.lance-sim__summary {
    background: var(--surface-alt);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .lance-sim {
        grid-template-columns: 1fr;
        padding: 1.4rem;
    }
}

.lance-field__label {
    display: block;
    font-weight: 600;
    margin: 1.4rem 0 0.6rem;
}

.lance-toggle {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
    margin-top: 1.4rem;
    font-weight: 600;
}

.lance-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.lance-toggle__track {
    flex: 0 0 auto;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: var(--border);
    position: relative;
    transition: background-color 0.2s ease;
}

.lance-toggle__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.lance-toggle input:checked + .lance-toggle__track {
    background: var(--primary);
}

.lance-toggle input:checked + .lance-toggle__track::after {
    transform: translateX(20px);
}

.lance-toggle input:focus-visible + .lance-toggle__track {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.lance-parcelas {
    background: var(--surface-alt);
    border-radius: 14px;
    padding: 1rem 1.2rem;
}

.lance-parcelas .eyebrow {
    display: block;
    margin-bottom: 0.3rem;
}

.lance-parcelas p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.lance-cta {
    margin: 2rem auto 0;
    max-width: 760px;
    text-align: center;
}

.lance-cta p {
    margin: 0 0 1.2rem;
    font-size: 1.02rem;
}

/* ===== Carrossel de banners (hero com foto) ===== */
.hero-banners {
    padding-top: 2.4rem;
    padding-bottom: 0;
}

.hero-banners__carousel {
    position: relative;
}

.hero-banners__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border-radius: var(--radius);
    box-shadow: 0 22px 60px rgba(15, 77, 97, 0.22);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hero-banners__track::-webkit-scrollbar {
    display: none;
}

.hero-banners__slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-height: 440px;
    display: flex;
    align-items: center;
    padding: 3rem clamp(1.5rem, 6%, 5rem);
    background-image: var(--banner-bg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* mobile/tablet: serve o tamanho intermediário do WP em vez do 'full' */
@media (max-width: 768px) {
    .hero-banners__slide {
        background-image: var(--banner-bg-md, var(--banner-bg));
    }
}

/* overlay escuro lateral: garante legibilidade do texto sobre qualquer foto */
.hero-banners__slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(9, 38, 49, 0.92) 0%, rgba(9, 38, 49, 0.66) 38%, rgba(9, 38, 49, 0.22) 72%, rgba(9, 38, 49, 0.05) 100%);
}

.hero-banners__content {
    position: relative;
    z-index: 3;
    max-width: 600px;
    color: #fff;
}

.hero-banners__eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
}

.hero-banners__title {
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    line-height: 1.08;
    font-weight: 700;
    margin: 0 0 0.9rem;
    color: #fff;
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
}

.hero-banners__sub {
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.5;
    margin: 0 0 1.6rem;
    max-width: 30em;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.hero-banners__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--accent);
    color: #241a05;
    font-weight: 700;
    font-size: 1.02rem;
    padding: 0.95rem 1.8rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-banners__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.hero-banners__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.hero-banners__badge {
    display: inline-flex;
    align-items: center;
    background: var(--accent);
    color: #1e1e1e;
    /* 0,74rem dava 11,84 px, o único texto do site abaixo do piso de 0,75rem */
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.hero-banners__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    transition: background-color 0.2s ease;
}

.hero-banners__nav:hover {
    background: #fff;
}

.hero-banners__nav .icon,
.hero-banners__nav .icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.hero-banners__nav--prev {
    left: 18px;
}

.hero-banners__nav--next {
    right: 18px;
}

.hero-banners__dots {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.hero-banners__dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: width 0.25s ease, background-color 0.25s ease;
}

/* área de toque >=44px sem alterar o visual do dot */
.hero-banners__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.hero-banners__dot.is-active {
    width: 26px;
    border-radius: 999px;
    background: #fff;
}

@media (max-width: 480px) {
    .hero-banners__slide {
        min-height: 360px;
        padding: 2rem 1.3rem;
    }
    .hero-banners__nav {
        width: 44px;
        height: 44px;
    }
    .hero-banners__nav--prev {
        left: 8px;
    }
    .hero-banners__nav--next {
        right: 8px;
    }
}

/* ===================================================================
   IDENTIDADE NAVY + DOURADO — hero e ofertas em destaque (escuro)
   Override final; replica o conceito aprovado na prévia.
   =================================================================== */

/* Eyebrow dourado em todo o site (escuro = dourado claro; claro = dourado escuro) */
.eyebrow { color: var(--accent-dark); }

/* ---- HERO escuro ---- */
.hero-section {
    background:
        radial-gradient(1200px 520px at 82% -12%, var(--navy-600), transparent),
        linear-gradient(180deg, var(--navy-900), var(--navy-800));
    color: var(--on-dark);
}
.hero-section .eyebrow { color: var(--gold-2); }
.hero-section h1 { color: #ffffff; }
.hero-section .lead { color: #d4e0ee; }
.hero-section .cta-note { color: var(--on-dark-muted); }
.hero-section .lp-campanha__filial { color: #d4e0ee; }
.hero-section .lp-campanha__filial a { color: var(--gold-2); }
.hero-section .lp-campanha__regulatorio { color: var(--on-dark-muted); }
.hero-section .lp-campanha__secundario { color: var(--on-dark-muted); }
.hero-section .hero-stats strong { color: var(--gold-2); }
.hero-section .hero-stats span { color: var(--on-dark-muted); }
.hero-section .button-secondary {
    color: var(--on-dark);
    border-color: rgba(233, 240, 248, 0.32);
    background: transparent;
}
.hero-section .button-secondary:hover {
    border-color: var(--accent);
    color: var(--gold-2);
}
.hero-portrait-card {
    border: 1px solid var(--line-gold);
    box-shadow: 0 22px 50px rgba(4, 12, 24, 0.45);
}
.hero-portrait-badge {
    background: rgba(7, 20, 38, 0.82);
    border: 1px solid var(--line-gold);
    color: var(--on-dark);
}
.hero-portrait-badge .eyebrow { color: var(--gold-2); }
.hero-portrait-badge strong { color: #fff; }
.hero-portrait-badge p { color: var(--on-dark-muted); }

/* ===================================================================
   PADRONIZAÇÃO COM A PRÉVIA — header navy + nav de texto + h1 compacto
   =================================================================== */

/* ---- HEADER escuro (navy), igual à prévia — vale para todas as páginas ---- */
.site-header {
    background: rgba(8, 23, 42, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
/*
  A porta para o site, na landing de campanha (CONS-CONSORCIO-63). Vive sobre o
  cabeçalho escuro, então veste o dourado da casa, e não cinza: é a mesma
  família do CTA, um degrau abaixo dele. Pequena de propósito, e ainda assim
  com o alvo de toque de 44.
*/
.site-header__site {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0 0.95rem;
    border: 1px solid rgba(201, 162, 74, 0.5);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(230, 200, 120, 0.14), rgba(201, 162, 74, 0.06));
    color: var(--gold-2);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.site-header__site-seta {
    flex: 0 0 auto;
    transition: transform .18s ease;
}

.site-header__site:hover,
.site-header__site:focus-visible {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(230, 200, 120, 0.26), rgba(201, 162, 74, 0.14));
    color: #f2ddab;
}

.site-header__site:hover .site-header__site-seta,
.site-header__site:focus-visible .site-header__site-seta {
    transform: translateX(3px);
}

.site-header__site:focus-visible {
    outline: 2px solid var(--gold-2);
    outline-offset: 2px;
}

.site-header .brand__name { color: #ffffff; }
.site-header .brand__role { color: var(--on-dark-muted); }

/* nav: links de texto simples (sem pílula branca) */
.site-nav__menu a {
    background: transparent;
    border: 1px solid transparent;
    color: var(--on-dark);
    font-weight: 500;
    min-height: 40px;
}
.site-nav__menu a:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--line-gold);
    color: var(--gold-2);
}
/* foco visível para navegação por teclado (outline dourado) */
.site-nav__menu a:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--line-gold);
    color: var(--gold-2);
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}
.site-nav__menu .current-menu-item > a,
.site-nav__menu .current_page_item > a,
.site-nav__menu .current-menu-parent > a,
.site-nav__menu .current-menu-ancestor > a,
.site-nav__menu .current-page-ancestor > a {
    background: rgba(201, 162, 74, 0.14);
    border-color: var(--line-gold);
    color: var(--gold-2);
    box-shadow: none;
}

/* ---- Hero: título compacto como na prévia ---- */
.hero-section h1 {
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    max-width: 26ch;
}

/* ===================================================================
   Hero: foto do consultor com altura controlada (não estica)
   =================================================================== */
.hero-grid { align-items: center; }
.hero-portrait-card { min-height: 0; align-self: center; }
.hero-portrait-image { height: 480px; min-height: 0; }
/* coluna única no tablet: centraliza a foto (largura/altura definidas mais abaixo) */
@media (max-width: 768px) {
    .hero-portrait-card { margin: 0 auto; }
}

/* Foto do hero: proporcional (mostra o corpo inteiro) e menor */
.hero-portrait-card { max-width: 340px; margin-left: auto; min-height: 0; }
.hero-portrait-image { height: auto; min-height: 0; object-fit: contain; }

/* === Correção final: foto do consultor proporcional + badge abaixo (não cobre) + banner mais baixo === */
.hero-visual { align-self: center; }
.hero-portrait-card { max-width: 380px; margin-left: auto; min-height: 0; overflow: hidden; }
.hero-portrait-image {
    position: static;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 825 / 1100;   /* proporção real da foto — sem corte */
    object-fit: cover;
    object-position: center top;
    display: block;
}
.hero-portrait-badge {
    position: static;
    left: auto; right: auto; bottom: auto;
    background: rgba(7, 20, 38, 0.92);
    border-top: 1px solid var(--line-gold);
    padding: 0.85rem 1.1rem;
}
.hero-banners__slide { min-height: 340px; }

/* Hero: foto levemente menor (proporção mantida) + menos respiro, para o carrossel espiar */
.hero-portrait-card { max-width: 320px; }
.hero-section { padding-top: 2rem; padding-bottom: 2.2rem; }

/* Mobile: título/CTA na 1ª dobra (ordem natural do DOM) e foto compacta logo abaixo */
@media (max-width: 480px) {
    .hero-portrait-card {
        max-width: 260px;
        margin: 0 auto;
    }
}

/* ===================================================================
   Modal "Receber minha proposta" + celebração
   =================================================================== */
.proposta-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; opacity: 0; transition: opacity .22s ease; }
.proposta-modal.is-open { opacity: 1; }
.proposta-modal[hidden] { display: none; }
.proposta-modal__overlay { position: absolute; inset: 0; background: rgba(4, 12, 24, .66); backdrop-filter: blur(3px); }
.proposta-modal__card {
    position: relative; width: min(100%, 460px); max-height: 92vh; overflow: auto;
    background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
    color: var(--on-dark); border: 1px solid var(--line-gold); border-radius: 22px;
    box-shadow: 0 30px 70px rgba(4, 12, 24, .6);
    padding: 1.9rem 1.6rem 1.6rem; transform: translateY(12px) scale(.98); transition: transform .22s ease;
}
.proposta-modal.is-open .proposta-modal__card { transform: none; }
.proposta-modal__close {
    /* 44x44px de área de toque, glifo centralizado */
    position: absolute; top: .45rem; right: .45rem;
    width: 44px; height: 44px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0;
    color: var(--on-dark-muted); font-size: 1.9rem; line-height: 1; cursor: pointer;
}
.proposta-modal__close:hover { color: var(--gold-2); }
.proposta-modal h2 { color: #fff; margin: .35rem 0 .5rem; font-size: 1.5rem; }
.proposta-modal__sub { color: #cddcea; margin: 0 0 1.2rem; font-size: .95rem; }
.proposta-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; }
.proposta-field label { font-size: .85rem; font-weight: 600; color: var(--on-dark); }
.proposta-field label span { color: var(--on-dark-muted); font-weight: 400; }
.proposta-field input, .proposta-field select {
    width: 100%; padding: .8rem .9rem; border-radius: 12px;
    border: 1px solid rgba(233, 240, 248, .18); background: rgba(255, 255, 255, .04);
    color: #fff; font-size: 1rem; font-family: inherit;
}
.proposta-field input::placeholder { color: rgba(233, 240, 248, .4); }
.proposta-field input:focus, .proposta-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201, 162, 74, .22); }
.proposta-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239fb2c6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.95rem center; padding-right: 2.4rem; }
.proposta-field select option { color: #0f1d2e; }
.proposta-form__error { background: rgba(220, 38, 38, .16); border: 1px solid rgba(220, 38, 38, .4); color: #fecaca; padding: .6rem .8rem; border-radius: 10px; font-size: .88rem; margin: 0 0 .8rem; }
.proposta-form__submit { width: 100%; justify-content: center; margin-top: .3rem; }
.proposta-success { text-align: center; padding: 1rem .4rem .3rem; }
.proposta-success__emoji { font-size: 3rem; animation: proposta-pop .5s ease; }
.proposta-success p { color: #cddcea; margin: .4rem 0 1.3rem; }
.proposta-success .button { width: 100%; justify-content: center; margin-bottom: .6rem; }
@keyframes proposta-pop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
.proposta-confetti { position: absolute; bottom: 14%; left: 50%; pointer-events: none; will-change: transform, opacity; animation-name: proposta-rise; animation-timing-function: ease-out; animation-fill-mode: forwards; z-index: 2; }
@keyframes proposta-rise { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(-340px) rotate(360deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .proposta-confetti { display: none; } .proposta-modal, .proposta-modal__card { transition: none; } }

/*
  O modal fala a língua do funil (D33 e D34 do CONS-CONSORCIO-56).

  Ele era uma caixa escura com um `<select>`, e o funil de `/planos/` é claro,
  com o bem em cartão. Duas telas do mesmo site pedindo a mesma coisa de dois
  jeitos diferentes: quem vinha do banner e depois ia simular achava que tinha
  mudado de site. Aqui ele passa a ser branco sobre a página creme, com texto
  escuro e borda dourada discreta, que é o desenho do cartão do funil.
*/
.proposta-modal__card {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 22px 55px rgba(17, 17, 17, .18);
}
.proposta-modal__close { color: var(--muted); }
.proposta-modal__close:hover { color: var(--primary); }
.proposta-modal h2 { color: var(--primary-dark, #081a2e); }
.proposta-modal__sub,
.proposta-success p { color: var(--muted); }
.proposta-field label,
.proposta-field__label { font-size: .85rem; font-weight: 600; color: var(--text); }
.proposta-field label span,
.proposta-field__label span { color: var(--muted); font-weight: 400; }
.proposta-field input,
.proposta-field__livre input {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
}
.proposta-field input::placeholder { color: var(--muted); }
.proposta-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(12, 39, 66, .12); }
.proposta-consent { color: var(--muted); }
.proposta-consent a { color: var(--primary); }

/* Os cartões de bem: dois por linha no celular, no molde do passo 1 do funil */
.proposta-bens {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
    margin-top: .15rem;
}
.proposta-bens__estado {
    grid-column: 1 / -1;
    margin: 0;
    padding: .9rem 0;
    text-align: center;
    color: var(--muted);
    font-size: .9rem;
}
.proposta-bem {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 88px;
    padding: .8rem .4rem;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.proposta-bem:hover { border-color: var(--primary); }
.proposta-bem__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.proposta-bem__icone { display: inline-flex; color: var(--primary); }
.proposta-bem__icone svg { width: 26px; height: 26px; }
.proposta-bem__nome { font-size: .9rem; font-weight: 600; line-height: 1.25; }
.proposta-bem:has(.proposta-bem__radio:checked) {
    border-color: var(--primary);
    background: var(--surface-alt);
}
.proposta-bem:focus-within { outline: none; border-color: var(--primary); }
.proposta-field__livre { display: flex; flex-direction: column; gap: .35rem; margin-top: .6rem; font-size: .85rem; font-weight: 600; color: var(--text); }
/* sem isto o `display: flex` vence o [hidden], e o campo livre aparece sempre:
   é a mesma pegadinha que o `.funnel-chip__tag[hidden]` já documentava */
.proposta-field__livre[hidden] { display: none; }

/* O consentimento: a caixa media 18 e o link 17 de altura. A caixa cresce, e o
   link ganha área por pseudo-elemento, para não abrir a linha do texto. */
.proposta-consent input[type="checkbox"] {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    accent-color: var(--primary);
}
.proposta-consent { position: relative; align-items: center; min-height: 44px; }
.proposta-consent a { position: relative; }
.proposta-consent a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    min-width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: reduce) { .proposta-bem { transition: none; } }

/* Trust strip: alinhar ao topo e dar respiro (evita itens "colados") */
.trust-badges { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem 2rem; }
.trust-badge { align-items: flex-start; gap: 0.6rem; }
.trust-badge .icon, .trust-badge .icon svg { width: 22px; height: 22px; }
.trust-badge .icon { margin-top: 2px; color: var(--accent-dark); }
.trust-badge span { min-width: 0; }

/* Link suave "Conhecer minha trajetória" na foto do hero */
.hero-portrait-link {
    position: relative;
    display: inline-block;
    margin-top: 0.55rem;
    color: var(--gold-2);
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, color .2s ease;
}
.hero-portrait-link:hover { color: #fff; border-bottom-color: var(--gold-2); }

/* área de toque >=44px sem alterar o visual do link */
.hero-portrait-link::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    min-width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* O deslizante tem 16 px de caixa, e o dedo mira a barra inteira: a altura do
   alvo sobe sem mexer no traço, que continua desenhado pelo próprio controle. */
.lance-field input[type="range"] {
    min-height: 44px;
}

/* Passos "Como funciona": hover interativo */
.steps .step {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    cursor: default;
}
.steps .step:hover {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 26px 50px rgba(10, 22, 38, .16);
}
.steps .step .step__number {
    transition: background .22s ease, transform .22s ease, color .22s ease, box-shadow .22s ease;
}
.steps .step:hover .step__number {
    background: linear-gradient(135deg, var(--gold-2), var(--accent));
    color: #241a04;
    transform: scale(1.1);
    box-shadow: 0 8px 18px rgba(201, 162, 74, .4);
}
@media (prefers-reduced-motion: reduce) {
    .steps .step, .steps .step:hover { transform: none; }
}

/* Formas de contemplação: chips com popover (resumo + atalho) no hover/foco */
.forma-chips li.forma-chip { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; position: relative; display: inline-flex; }
.forma-chip__link {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem 1.2rem; background: var(--surface); border: 1px solid var(--border);
    border-radius: 999px; font-weight: 600; color: var(--text); box-shadow: var(--shadow);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.forma-chip__link .icon, .forma-chip__link .icon svg { width: 20px; height: 20px; }
.forma-chip__link .icon { color: var(--accent-dark); }
.forma-chip:hover .forma-chip__link, .forma-chip:focus-within .forma-chip__link {
    border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(10, 22, 38, .14);
}
.forma-chip__pop {
    position: absolute; bottom: calc(100% + 12px); left: 50%;
    transform: translateX(-50%) translateY(6px); width: 270px; max-width: 78vw;
    background: linear-gradient(180deg, var(--navy-700), var(--navy-900)); color: var(--on-dark);
    border: 1px solid var(--line-gold); border-radius: 14px; padding: .9rem 1rem;
    box-shadow: 0 18px 40px rgba(4, 12, 24, .5);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 30; text-align: left;
}
.forma-chip__pop strong { display: block; color: #fff; margin-bottom: .25rem; font-size: .98rem; }
.forma-chip__pop p { margin: 0 0 .55rem; font-size: .85rem; color: #cddcea; line-height: 1.45; }

.forma-chip__pop-cta { color: var(--gold-2); font-weight: 600; font-size: .82rem; }
.forma-chip__pop::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--navy-900); }
.forma-chip:hover .forma-chip__pop, .forma-chip:focus-within .forma-chip__pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* Popover das formas — visual moderno (glass + glow + pill clicável) */
.forma-chip__pop {
    width: 286px;
    background: linear-gradient(165deg, rgba(20, 52, 84, .96), rgba(8, 24, 44, .98));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(201, 162, 74, .38);
    border-radius: 18px;
    padding: 1rem 1.1rem 1.05rem;
    box-shadow: 0 22px 55px rgba(4, 12, 24, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
    transform: translateX(-50%) translateY(10px) scale(.96);
}
.forma-chip:hover .forma-chip__pop,
.forma-chip:focus-within .forma-chip__pop {
    transform: translateX(-50%) translateY(0) scale(1);
}
.forma-chip__pop strong { font-size: 1rem; letter-spacing: -.01em; }
.forma-chip__pop p { font-size: .86rem; color: #c5d4e6; margin-bottom: .8rem; }
.forma-chip__pop-cta {
    display: inline-flex; align-items: center; gap: .35rem;
    background: linear-gradient(135deg, var(--gold-2), var(--accent));
    color: #241a04; font-weight: 700; font-size: .8rem;
    padding: .42rem .8rem; border-radius: 999px;
}
.forma-chip__pop::after { border-top-color: rgba(8, 24, 44, .98); }

/*
  No celular o pop deixa de se pendurar no chip e passa a ocupar a lista inteira
  (CONS-CONSORCIO-56, D30). Centrado no chip, ele estourava a borda quando o
  chip estava perto dela: era ele, e não o carrossel, quem fazia a home rolar de
  lado em 390. Preso à lista, cabe qualquer que seja o chip tocado.

  Este bloco vem depois da regra do visual novo de propósito: é ela que fixa os
  286 px e o `translateX(-50%)`, e é ela que precisa ser vencida.
*/
@media (max-width: 640px) {
    .forma-chips { position: relative; }
    .forma-chips li.forma-chip { position: static; }
    .forma-chip__pop {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        transform: translateY(10px) scale(.98);
    }
    .forma-chip__pop::after { display: none; }
    .forma-chip:hover .forma-chip__pop,
    .forma-chip:focus-within .forma-chip__pop { transform: translateY(0) scale(1); }
}

/* Botão secundário com mais ênfase (fundo claro) */
.button-secondary {
    background: var(--surface);
    border: 1.5px solid var(--primary);
    color: var(--primary);
    box-shadow: 0 6px 16px rgba(10, 22, 38, .08);
}
.button-secondary:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-1px);
}
/* mantém o secundário legível dentro do hero/seções escuras */
.hero-section .button-secondary{
    background: transparent;
    border-color: rgba(233, 240, 248, .4);
    color: var(--on-dark);
    box-shadow: none;
}
.hero-section .button-secondary:hover{
    background: rgba(255, 255, 255, .08);
    border-color: var(--accent);
    color: var(--gold-2);
}

/* ===================================================================
   Rodapé repaginado (navy + dourado, hierarquia e ícones)
   =================================================================== */
.site-footer {
    background: var(--navy-900);
    color: var(--on-dark);
    padding: 4rem 0 0;
    border-top: 3px solid var(--accent);
}
.footer-grid {
    grid-template-columns: 1.6fr 1fr 1.4fr;
    gap: 2.5rem 3rem;
    padding-bottom: 3rem;
    align-items: start;
}
.footer-brand__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
}
.footer-brand__logo img { display: block; }
.footer-brand__name { display: flex; flex-direction: column; line-height: 1.2; }
.footer-brand__name strong { font-size: 1.15rem; color: #fff; }
.footer-brand__name small { font-size: 0.82rem; color: var(--gold-2); letter-spacing: 0.02em; }
.footer-brand__tagline {
    margin: 1.1rem 0 1.3rem;
    color: var(--on-dark-muted);
    max-width: 40ch;
    line-height: 1.6;
}
.footer-brand__cta { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }

.footer-title {
    margin: 0 0 1.1rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gold-2);
}

.footer-links,
.footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}
.footer-links a {
    /* área de toque >=44px; margem negativa preserva o ritmo do grid.
       O `min-width` entrou depois: a altura já bastava, mas "Início" tem cinco
       letras e media 40 de largura (D30) */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    margin: -0.6rem 0;
    color: var(--on-dark-muted);
    text-decoration: none;
    transition: color .18s ease, padding-left .18s ease;
}
.footer-links a:hover { color: #fff; padding-left: 0.25rem; }
.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: var(--on-dark-muted);
    line-height: 1.5;
}
.footer-contact .icon {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    color: var(--gold-2);
}
.footer-contact a {
    /* área de toque >=44px; margem negativa preserva a altura da linha */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -0.6rem 0;
    color: var(--on-dark-muted);
    text-decoration: none;
    transition: color .18s ease;
}
.footer-contact a:hover { color: #fff; }

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.3rem;
}
.footer-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 42 é o piso menos dois: faltavam dois pixels em cada eixo (D30) */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line-gold);
    background: rgba(255, 255, 255, 0.04);
    color: var(--on-dark);
    transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}
.footer-social__link .icon { width: 1.15rem; height: 1.15rem; }
.footer-social__link:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #1e1e1e;
    transform: translateY(-2px);
}

.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.footer-bottom {
    margin: 0 auto;
    padding: 1.6rem 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    border: 0;
}
.footer-bottom__legal {
    margin: 0 auto;
    font-size: 0.8rem;
    color: var(--on-dark-muted);
    max-width: 72ch;
    line-height: 1.5;
}
.footer-bottom__copy { margin: 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); }
/* piso de 0.75rem e contraste >=4.5:1 sobre o navy do rodapé */
.footer-bottom__copy--dev { font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); }

/* Consent no modal "Receber proposta" (card escuro) */
.proposta-consent { display: flex; align-items: center; gap: 0.55rem; min-height: 44px; margin-top: 0.9rem; font-size: 0.82rem; line-height: 1.45; color: var(--on-dark-muted); cursor: pointer; text-align: left; }
.proposta-consent input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.proposta-consent a { color: var(--gold-2); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ===================================================================
   Página Planos (grid de ofertas por categoria — reaproveita .offer-slide)
   =================================================================== */
.planos-empty {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(180deg, var(--navy-700), var(--navy-800));
    border: 1px solid var(--line-gold);
    border-radius: var(--radius);
    color: var(--on-dark);
    padding: 2.6rem 2rem;
}
.planos-empty .eyebrow { color: var(--gold-2); }
.planos-empty h2 { color: #fff; margin: 0.4rem 0 0.6rem; }
.planos-empty p { color: #cddcea; margin: 0 auto 1.5rem; max-width: 46ch; }

/* ===================================================================
   Galeria de Premiações/Contemplações: imagens uniformes (não corta tanto)
   =================================================================== */
.content-card__image {
    display: block;
    overflow: hidden;
    background: var(--navy-800);
}
.content-card__image img {
    aspect-ratio: 4 / 3;
    object-fit: contain;
    object-position: center;
    transition: transform 0.4s ease;
}
.content-card:hover .content-card__image img {
    transform: scale(1.03);
}
.content-card__body h2,
.content-card__body h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
}

/* área de toque >=44px no link do título dos content-cards */
.content-card__body h2 a,
.content-card__body h3 a {
    position: relative;
}
.content-card__body h2 a::after,
.content-card__body h3 a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 44px;
    transform: translateY(-50%);
}

/* ===================================================================
   Plano "Mais por Menos" (card de oferta / cartas de crédito)
   =================================================================== */

/* ===================================================================
   Carrossel de planos (Cartas de Crédito) — ~4 visíveis, auto-avanço, hover amplia
   =================================================================== */

/* ===================================================================
   Planos: 3 cards no carrossel, selo no fluxo (não cobre o texto), filtros
   =================================================================== */
/* ===================================================================
   Menu mobile (hambúrguer) — recolhe a navegação quando não cabe
   =================================================================== */
.site-header__toggle { display: none; }

@media (max-width: 1024px) {
    .site-header__inner { flex-direction: row; align-items: center; flex-wrap: nowrap; }
    .site-header__actions {
        width: auto;
        margin-left: auto;
        gap: 0.5rem;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
    }
    .site-header__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
        border-radius: 12px;
        border: 1px solid var(--line-gold);
        background: rgba(255, 255, 255, 0.06);
        color: var(--on-dark);
        cursor: pointer;
    }
    .site-header__toggle:hover { background: rgba(255, 255, 255, 0.12); }
    .site-header__cta { padding: 0.55rem 0.7rem; }
    .site-header__cta-label { display: none; }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--navy-900);
        border-top: 1px solid var(--line-gold);
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.32s ease;
        z-index: 55;
    }
    .site-header.is-nav-open .site-nav { max-height: 80vh; overflow-y: auto; }

    /* O cabeçalho encolhe ao rolar (D28), e só no celular, onde 80 px de barra
       fixa custam quase um décimo da tela em toda rolagem. O desenho é o mesmo
       que `/planos` já usava para chegar a 55: logo menor e cargo escondido.
       Marca, hambúrguer e o botão de WhatsApp continuam todos ali. */
    .site-header__inner { transition: min-height 0.18s ease, padding 0.18s ease; }
    .brand__logo { transition: width 0.18s ease, height 0.18s ease; }
    .site-header.is-encolhido .site-header__inner { min-height: 54px; padding: 0.3rem 0; }
    .site-header.is-encolhido .brand__logo { width: 32px; height: 32px; }
    .site-header.is-encolhido .brand__role { display: none; }
    /* o botão desce ao piso de 44, e não abaixo: é ele que dita a altura da
       barra encolhida, e alvo de toque não se troca por pixel de cabeçalho */
    .site-header.is-encolhido .site-header__cta {
        min-height: 44px;
        height: 44px;
        padding: 0 0.7rem;
    }
    .site-header.is-encolhido .site-header__toggle { height: 44px; }

    /* Quem pediu menos movimento recebe a mesma altura, sem a animação. */
    @media (prefers-reduced-motion: reduce) {
        .site-header__inner,
        .brand__logo { transition: none; }
    }

    /* A gaveta do celular fica em quatro itens (D27): "Como Funciona" e
       "Premiações" continuam no computador e no rodapé, e a gaveta ganha o
       "Ver tudo" para chegar neles sem sair da página. */
    .site-nav__menu .site-nav__item--secundario { display: none; }
    .site-nav__ver-tudo {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        min-height: 44px;
        margin: 0.2rem 1.1rem 0.9rem;
        padding: 0 0.4rem;
        border-top: 1px solid var(--line-gold);
        padding-top: 0.9rem;
        color: var(--on-dark-muted);
        font-size: 0.9rem;
        text-decoration: none;
        background: none;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        width: calc(100% - 2.2rem);
        cursor: pointer;
        text-align: left;
    }
    .site-nav__ver-tudo:hover { color: var(--gold-2); }
    .site-nav__menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        padding: 0.4rem 1.1rem 1rem;
    }
    .site-nav__menu li { width: 100%; }
    .site-nav__menu a {
        display: block;
        width: 100%;
        padding: 0.85rem 0.4rem;
        color: var(--on-dark);
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }
    .site-nav__menu a:hover { color: var(--gold-2); background: rgba(255, 255, 255, 0.04); }
}

@media (max-width: 480px) {
    .brand__role { display: none; }
    .brand__logo { width: 38px; height: 38px; }
}

/* ===================================================================
   Header mobile: rótulo curto "Proposta" no lugar do completo
   =================================================================== */
.site-header__cta-short { display: none; }

@media (max-width: 1024px) {
    .site-header__cta-short { display: inline; }
    .site-header__cta { padding: 0.55rem 0.9rem; gap: 0.4rem; }
}

/* ===================================================================
   Header desktop: marca nunca quebra + menu enxuto
   O conteúdo do header pedia ~1240px num container de 1160px e o
   flexbox esmagava a marca ("Júlio / Coutinho" em 2 linhas). A marca
   vira inegociável e o menu cede o espaço.
   =================================================================== */
@media (min-width: 1025px) {
    /* o "Ver tudo" é da gaveta, e a gaveta só existe abaixo de 1025 */
    .site-nav__ver-tudo { display: none; }

    .brand { flex: 0 0 auto; }
    .brand__name,
    .brand__role { white-space: nowrap; }

    .site-nav__menu { gap: 0.25rem; }
    .site-nav__menu a {
        padding: 0.7rem 0.75rem;
        font-size: 0.9rem;
    }
}

/* Degrau compacto (1025–1280px): CTA com rótulo curto, só o nome na
   marca e pílulas mais justas, garantindo o header em 1 linha até o
   limite do hambúrguer */
@media (min-width: 1025px) and (max-width: 1280px) {
    .brand__role { display: none; }
    .site-header__cta-label { display: none; }
    .site-header__cta-short { display: inline; }
    .site-header__cta { padding: 0.55rem 0.9rem; gap: 0.4rem; }
    .site-header__actions { gap: 1rem; }
    .site-nav__menu { gap: 0.15rem; }
    .site-nav__menu a { padding: 0.7rem 0.55rem; }
}

/* Botão "Proposta" compacto também no topo do mobile (desfaz o width:100% antigo) */
@media (max-width: 1024px) {
    .site-header__cta { width: auto; flex: 0 0 auto; }
}