/* Consórcio Porto — site de captação (mesma dinâmica do site oficial) */
:root {
    --azul: #00a1fc;
    --acao: #0046c0;
    --acao-escuro: #00318a;
    --tinta: #000000;
    --cinza: #6f7073;
    --borda: #dadbdd;
    --fundo: #ffffff;
    --fundo-claro: #f4f4f4;
    --altura-ribbon: 36px;
    --altura-links: 40px;
    --altura-menu: 68px;
    --topo-total: 144px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html { scroll-behavior: smooth; }

[hidden] { display: none !important; }

body {
    padding-top: var(--topo-total);
    background: var(--fundo);
    color: var(--tinta);
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.secao-inner {
    max-width: 1352px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- topo fixo ---------- */

.cabecalho {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}

.ribbon {
    height: var(--altura-ribbon);
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ribbon p { font-size: 14px; line-height: 16px; text-align: center; padding: 0 16px; }
.ribbon a { font-weight: 700; text-decoration: underline; }

.barra-links {
    height: var(--altura-links);
    background: #fff;
    border-top: 1px solid var(--borda);
    display: flex;
    align-items: center;
    padding: 0 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.barra-links::-webkit-scrollbar { display: none; }

.barra-links a {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 16px;
    font-size: 12px;
    line-height: 16px;
    color: var(--cinza);
    white-space: nowrap;
}

.barra-links a:hover { color: var(--tinta); text-decoration: underline; }

.barra-links a + a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background: var(--borda);
}

.barra-principal {
    height: var(--altura-menu);
    background: #fff;
    border-bottom: 1px solid var(--borda);
}

.barra-inner {
    max-width: 1352px;
    height: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.marca { display: flex; align-items: center; }
.marca img { width: 105px; height: 24px; }

.menu { display: flex; align-items: stretch; height: 100%; }

.menu a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 16px;
    line-height: 24px;
    color: var(--tinta);
}

.menu a::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 4px;
    background: var(--acao);
    transform: scaleX(0);
    transition: transform 0.15s ease;
}

.menu a:hover::after { transform: scaleX(1); }

.area-cliente {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 20px;
    color: var(--acao);
    font-weight: 600;
}

.area-cliente:hover { text-decoration: underline; }

/* ---------- abertura ---------- */

.abertura { background: #fff; }

.abertura-inner {
    max-width: 1352px;
    margin: 0 auto;
    padding: 56px 20px 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
}

.sobre-titulo {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cinza);
}

.sobre-titulo.claro { color: rgba(255, 255, 255, 0.66); }

.abertura h1 {
    margin-top: 14px;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    max-width: 20ch;
}

.lead {
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--cinza);
    max-width: 56ch;
}

.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 26px;
    border: 0;
    border-radius: 8px;
    background: var(--acao);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    transition: background 0.15s ease;
}

.botao svg { width: 18px; height: 18px; }
.botao:hover { background: var(--acao-escuro); }
.botao:disabled { opacity: 0.65; cursor: default; }

.botao-vazado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 24px;
    border: 1px solid var(--acao);
    border-radius: 8px;
    background: #fff;
    color: var(--acao);
    font-size: 16px;
    font-weight: 700;
}

.botao-vazado:hover { background: #f0f5ff; }

.retorno {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #b42318;
    max-width: 46ch;
}

.retorno.bom { color: var(--acao); font-weight: 600; }

.numeros {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--borda);
}

.numeros b {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: var(--acao);
    font-variant-numeric: tabular-nums;
}

.numeros span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--cinza);
    line-height: 1.4;
}

.abertura-imagem img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ---------- banner ---------- */

.banner img { width: 100%; height: auto; }

/* ---------- pilares ---------- */

.pilares { padding: 48px 0; border-bottom: 1px solid var(--borda); }

.pilares .secao-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}

.pilares h2 { font-size: 18px; font-weight: 700; line-height: 1.3; }
.pilares p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--cinza); }

/* ---------- seções ---------- */

.secao { padding: 64px 0; }
.fundo-claro { background: var(--fundo-claro); }

.titulo {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.subtitulo {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--cinza);
    max-width: 68ch;
}

/* ---------- passos ---------- */

.passos {
    list-style: none;
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.passo-num {
    display: block;
    width: 32px;
    height: 32px;
    border: 1px solid var(--acao);
    border-radius: 50%;
    color: var(--acao);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    line-height: 30px;
    margin-bottom: 14px;
}

.passos h3 { font-size: 17px; font-weight: 700; }
.passos p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--cinza); }

/* ---------- modalidades ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 22px; }

.chip {
    height: 44px;
    padding: 0 22px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: #fff;
    color: var(--tinta);
    font-size: 15px;
    font-weight: 600;
}

.chip:hover { border-color: var(--acao); color: var(--acao); }

.chip.is-on {
    background: var(--acao);
    border-color: var(--acao);
    color: #fff;
}

.condicao {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 28px 24px;
}

.condicao h3 { font-size: 20px; font-weight: 700; }

.cond-texto {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--cinza);
    max-width: 78ch;
}

.cond-lista {
    list-style: none;
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0 24px;
}

.cond-lista li { padding: 14px 0; border-top: 1px solid var(--borda); }

.cond-lista b {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cinza);
}

.cond-lista span {
    display: block;
    margin-top: 6px;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- prova ---------- */

.prova {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 32px;
    margin-top: 32px;
}

.prova h3 { font-size: 16px; font-weight: 700; }
.prova p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--cinza); }

/* ---------- blocos de duas colunas ---------- */

.duplo { padding: 64px 0; }

.duplo-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
}

.duplo-imagem img { width: 100%; height: auto; border-radius: 8px; }

.lista { list-style: none; margin-top: 24px; }

.lista li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--cinza);
}

.lista li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--acao);
    border-bottom: 2px solid var(--acao);
    transform: rotate(-45deg);
}

.duplo .botao, .duplo .botao-vazado { margin-top: 28px; }
.duplo .retorno { margin-top: 16px; }

.caixa {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 28px 24px;
}

.caixa h3 { font-size: 18px; font-weight: 700; }
.caixa > p { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--cinza); }

.faixas { margin-top: 20px; }

.faixas div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--borda);
}

.faixas b { font-size: 15px; font-weight: 700; color: var(--acao); }
.faixas span { font-size: 13px; color: var(--cinza); text-align: right; }

/* ---------- patrocínio ---------- */

.patrocinio { background: #000; color: #fff; padding: 56px 0; }

.patrocinio .titulo { margin-top: 12px; }

.patrocinio .subtitulo { color: rgba(255, 255, 255, 0.72); }

/* ---------- cards ---------- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 36px;
}

.card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 28px 24px;
}

.card h3 { font-size: 17px; font-weight: 700; line-height: 1.4; }
.card p { margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--cinza); }

.card a {
    margin-top: auto;
    padding-top: 18px;
    color: var(--acao);
    font-size: 15px;
    font-weight: 700;
}

.card a:hover { text-decoration: underline; }

.artigo { padding: 0; overflow: hidden; }

.artigo img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.artigo-texto { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 26px; }

/* ---------- perguntas ---------- */

.perguntas { margin-top: 32px; border-top: 1px solid var(--borda); }

.perguntas details { border-bottom: 1px solid var(--borda); }

.perguntas summary {
    position: relative;
    list-style: none;
    padding: 20px 44px 20px 0;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.perguntas summary::-webkit-details-marker { display: none; }

.perguntas summary::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -7px;
    border-right: 2px solid var(--acao);
    border-bottom: 2px solid var(--acao);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.perguntas details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }

.perguntas p {
    padding: 0 0 22px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--cinza);
    max-width: 88ch;
}

/* ---------- rodapé ---------- */

.rodape { background: #000; color: #fff; padding: 48px 0 40px; }

.rodape-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.rodape-topo img { width: 105px; height: 24px; }

.rodape-links { display: flex; flex-wrap: wrap; gap: 24px; }

.rodape-links a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.rodape-links a:hover { color: #fff; text-decoration: underline; }

.legal {
    margin-top: 22px;
    font-size: 12px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.56);
    max-width: 100ch;
}

.legal + .legal { margin-top: 10px; }

/* ---------- responsivo ---------- */

@media (min-width: 1440px) {
    .secao-inner, .abertura-inner, .barra-inner { padding-left: 64px; padding-right: 64px; }
}

@media (max-width: 1023.98px) {
    :root { --topo-total: 104px; }
    .barra-links { display: none; }
    .menu { display: none; }
}

@media (max-width: 900px) {
    .abertura-inner, .duplo-inner { grid-template-columns: 1fr; gap: 32px; }
    .abertura-imagem { order: -1; }
    .pilares .secao-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
}

@media (max-width: 620px) {
    .ribbon p { font-size: 12px; }
    .abertura-inner { padding: 36px 20px 32px; }
    .abertura h1 { font-size: 30px; max-width: none; }
    .secao, .duplo { padding: 44px 0; }
    .titulo { font-size: 25px; }
    .numeros { grid-template-columns: 1fr; gap: 16px; }
    .pilares .secao-inner { grid-template-columns: 1fr; }
    .area-cliente { font-size: 13px; }
    .area-cliente svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}