/* =====================================================================
   Condo Personnalite - site de apresentacao e venda
   Mesmas cores do portal (src/CondoPersonnalite.Web/wwwroot/app.css).
   ===================================================================== */

:root {
    --azul: #0060f1;
    --azul-escuro: #004ecb;
    --azul-claro: #3d8bff;
    --azul-suave: #ebf3ff;
    --azul-borda: #a9c9ff;
    --marinho: #032a5d;
    --marinho-profundo: #021a3d;

    --texto: #101828;
    --texto-medio: #344054;
    --texto-suave: #5d6b82;
    --texto-apagado: #98a2b3;
    --borda: #e4e7ec;
    --borda-forte: #d0d5dd;
    --fundo-alt: #f5f7fb;
    --branco: #fff;

    --verde: #12b76a;
    --verde-escuro: #0f7a3d;
    --verde-suave: #dcfce7;
    --verde-whats: #1faa53;
    --laranja: #c4560c;
    --laranja-suave: #fff1e6;
    --roxo: #6941c6;
    --roxo-suave: #f1ecff;
    --vermelho: #d92d20;
    --vermelho-suave: #fef3f2;

    --raio: 16px;
    --raio-pequeno: 10px;
    --raio-grande: 28px;
    --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
    --sombra-media: 0 12px 32px -8px rgba(16, 24, 40, .14);
    --sombra-elevada: 0 40px 80px -24px rgba(3, 42, 93, .35);

    --fonte: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonte-titulo: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --altura-topo: 72px;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--altura-topo) + 12px);
}

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--texto);
    background: var(--branco);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-escuro); }

h1, h2, h3 {
    margin: 0;
    font-family: var(--fonte-titulo);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--texto);
}

h1, h2, h3 { text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

[hidden] { display: none !important; }

:focus-visible {
    outline: 3px solid var(--azul-claro);
    outline-offset: 3px;
    border-radius: 6px;
}

.container {
    width: min(1200px, 100% - 2.5rem);
    margin-inline: auto;
}

.pular {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 2000;
    padding: .6rem 1rem;
    background: var(--marinho);
    color: #fff;
    border-radius: var(--raio-pequeno);
}
.pular:focus { top: 1rem; color: #fff; }

/* cores de apoio (icones) */
.cor-azul { color: var(--azul); background: var(--azul-suave); }
.cor-verde { color: var(--verde-escuro); background: var(--verde-suave); }
.cor-laranja { color: var(--laranja); background: var(--laranja-suave); }
.cor-roxo { color: var(--roxo); background: var(--roxo-suave); }
.cor-vermelho { color: var(--vermelho); background: var(--vermelho-suave); }
.cor-marinho { color: var(--marinho); background: #e6ecf5; }

/* =====================================================================
   Botoes
   ===================================================================== */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.botao:active { transform: translateY(1px); }

.botao-primario {
    background: var(--azul);
    color: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 8px 20px -6px rgba(0, 96, 241, .55);
}
.botao-primario:hover { background: var(--azul-escuro); color: #fff; }

.botao-contorno {
    background: var(--branco);
    color: var(--texto);
    border-color: var(--borda-forte);
    box-shadow: var(--sombra);
}
.botao-contorno:hover { border-color: var(--azul-borda); color: var(--azul); }

.botao-whatsapp {
    background: var(--verde-whats);
    color: #fff;
}
.botao-whatsapp:hover { background: #178c44; color: #fff; }

.botao-grande { padding: .95rem 1.5rem; font-size: 1.02rem; border-radius: 14px; }
.botao-bloco { width: 100%; }

/* =====================================================================
   Topo
   ===================================================================== */
.topo {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--altura-topo);
    background: rgba(255, 255, 255, .78);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.topo.rolado {
    background: rgba(255, 255, 255, .92);
    border-bottom-color: var(--borda);
    box-shadow: 0 6px 24px -12px rgba(16, 24, 40, .18);
}

.topo-linha {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.marca img { width: 176px; height: auto; }

.menu {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
}
.menu a {
    padding: .5rem .8rem;
    border-radius: 10px;
    color: var(--texto-medio);
    font-size: .95rem;
    font-weight: 500;
}
.menu a:hover { color: var(--texto); background: var(--fundo-alt); }
.menu .menu-cta { display: none; }

.topo-acoes { display: flex; align-items: center; gap: .5rem; }

.menu-botao {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: var(--branco);
    color: var(--texto);
    font-size: 1.5rem;
    cursor: pointer;
    place-items: center;
}

/* =====================================================================
   Hero
   ===================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0 6rem;
    margin-top: calc(var(--altura-topo) * -1);
    padding-top: calc(var(--altura-topo) + 4.5rem);
}

.hero-fundo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(900px 520px at 85% 10%, rgba(0, 96, 241, .16), transparent 65%),
        radial-gradient(700px 480px at 0% 0%, #dbe7ff, transparent 60%),
        radial-gradient(700px 400px at 50% 110%, #e8f0ff, transparent 60%),
        linear-gradient(180deg, #f7faff 0%, #fff 100%);
}
.hero-fundo::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(3, 42, 93, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(3, 42, 93, .05) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}

.hero-grade {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 3.5rem;
}

.selo {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .85rem;
    border: 1px solid var(--azul-borda);
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    color: var(--azul-escuro);
    font-size: .85rem;
    font-weight: 600;
}

.hero h1 {
    margin-top: 1.25rem;
    font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.04;
    color: var(--marinho);
}

.destaque {
    background: linear-gradient(92deg, var(--azul) 0%, #2f86ff 55%, #00a6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-sub {
    margin-top: 1.4rem;
    max-width: 34rem;
    font-size: 1.15rem;
    color: var(--texto-suave);
}

.hero-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2rem;
}

.hero-garantias {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    margin-top: 2rem;
    color: var(--texto-medio);
    font-size: .92rem;
    font-weight: 500;
}
.hero-garantias li { display: inline-flex; align-items: center; gap: .45rem; }
.hero-garantias i { color: var(--azul); font-size: 1.05rem; }

/* ----- mockup do portal ----- */
.hero-visual {
    position: relative;
    padding: 1rem 4.5rem 3rem 0;
}

.tela {
    position: relative;
    border-radius: 18px;
    background: var(--branco);
    border: 1px solid rgba(3, 42, 93, .1);
    box-shadow: var(--sombra-elevada);
    overflow: hidden;
    font-size: 12px;
    line-height: 1.4;
    transform: perspective(1800px) rotateY(-8deg) rotateX(3deg);
    transform-origin: left center;
    animation: tela-entra 1s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes tela-entra {
    from { opacity: 0; transform: perspective(1800px) rotateY(-16deg) rotateX(6deg) translateY(30px); }
}

.tela-barra {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    background: #f2f4f7;
    border-bottom: 1px solid var(--borda);
}
.tela-barra > span { width: 10px; height: 10px; border-radius: 50%; background: #d0d5dd; }
.tela-barra > span:nth-child(1) { background: #ff6159; }
.tela-barra > span:nth-child(2) { background: #ffbd2e; }
.tela-barra > span:nth-child(3) { background: #28c941; }
.tela-url {
    margin-left: 14px;
    padding: 3px 12px;
    border-radius: 8px;
    background: #fff;
    color: var(--texto-suave);
    font-size: 11px;
}
.tela-url i { color: var(--verde); font-size: 10px; }

.tela-corpo { display: grid; grid-template-columns: 136px 1fr; min-height: 330px; }

.tela-lateral {
    padding: 12px 10px;
    border-right: 1px solid var(--borda);
    background: #fff;
}
.tela-logo { width: 28px; height: 28px; border-radius: 8px; margin: 2px 6px 14px; }
.tela-lateral li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 2px;
    border-radius: 8px;
    color: var(--texto-medio);
    font-weight: 500;
}
.tela-lateral li i { color: var(--texto-apagado); font-size: 13px; }
.tela-lateral li.ativo { background: var(--azul-suave); color: var(--azul-escuro); }
.tela-lateral li.ativo i { color: var(--azul); }

.tela-conteudo { padding: 14px 16px; background: var(--fundo-alt); }

.tela-titulo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tela-titulo small { display: block; color: var(--texto-suave); font-size: 10.5px; }
.tela-titulo strong { font-size: 15px; letter-spacing: -.01em; }
.tela-avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--marinho);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.tela-indicadores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.ind {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: #fff;
}
.ind i {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 13px;
}
.ind small { color: var(--texto-suave); font-size: 10px; line-height: 1.2; }
.ind b { font-size: 14px; letter-spacing: -.01em; white-space: nowrap; }

.tela-paineis { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; }
.tela-cartao { padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; }
.tela-cartao-titulo { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 8px; }
.tela-cartao-titulo span { color: var(--texto-apagado); font-weight: 500; }

.grafico { display: flex; align-items: flex-end; gap: 5px; height: 112px; }
.grafico span {
    flex: 1;
    height: var(--h);
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #a9c9ff, #d6e6ff);
    transform-origin: bottom;
    animation: barra-sobe .9s cubic-bezier(.2, .8, .2, 1) both;
}
.grafico span:nth-child(2) { animation-delay: .05s; }
.grafico span:nth-child(3) { animation-delay: .1s; }
.grafico span:nth-child(4) { animation-delay: .15s; }
.grafico span:nth-child(5) { animation-delay: .2s; }
.grafico span:nth-child(6) { animation-delay: .25s; }
.grafico span:nth-child(7) { animation-delay: .3s; }
.grafico span:nth-child(8) { animation-delay: .35s; }
.grafico span:nth-child(9) { animation-delay: .4s; }
.grafico span:nth-child(10) { animation-delay: .45s; }
.grafico span.atual { background: linear-gradient(180deg, var(--azul), var(--azul-claro)); }

@keyframes barra-sobe { from { transform: scaleY(0); } }

.entradas li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #f0f2f5; }
.entradas li:first-child { border-top: 0; padding-top: 0; }
.entradas div { flex: 1; min-width: 0; }
.entradas b { display: block; font-size: 11.5px; }
.entradas small { display: block; color: var(--texto-suave); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entradas em { color: var(--texto-apagado); font-style: normal; font-size: 10px; }
.av {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 9.5px;
    font-weight: 700;
}
.av-azul { background: var(--azul-suave); color: var(--azul-escuro); }
.av-verde { background: var(--verde-suave); color: var(--verde-escuro); }
.av-roxo { background: var(--roxo-suave); color: var(--roxo); }

/* ----- celular com a conversa ----- */
.celular {
    position: absolute;
    right: -.5rem;
    bottom: -1rem;
    width: 210px;
    padding: 8px;
    border-radius: 30px;
    background: #0b1220;
    box-shadow: 0 30px 60px -20px rgba(2, 26, 61, .55), inset 0 0 0 1px rgba(255, 255, 255, .08);
    font-size: 10.5px;
    line-height: 1.4;
    animation: flutua-entra 1s .35s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes flutua-entra { from { opacity: 0; transform: translateY(40px) scale(.96); } }

.celular-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 10px;
    border-radius: 22px 22px 0 0;
    background: #0d5c4a;
    color: #fff;
}
.celular-topo small { display: block; opacity: .75; font-size: 10px; }
.celular-avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: #fff; flex-shrink: 0; }

.celular-chat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 8px 14px;
    border-radius: 0 0 22px 22px;
    background: #ece5dd;
    background-image: radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px);
    background-size: 10px 10px;
}

.balao {
    position: relative;
    max-width: 88%;
    padding: 6px 9px 16px;
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    color: #111b21;
}
.balao.recebido { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.balao.enviado { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 2px; min-width: 92px; font-weight: 600; }
.balao .hora { position: absolute; right: 8px; bottom: 3px; color: #667781; font-size: 9px; font-weight: 400; }
.balao .hora i { color: #53bdeb; }
.balao-titulo { display: block; margin-bottom: 4px; color: var(--marinho); }
.balao-titulo i { color: #f79009; }
.balao-foto {
    float: right;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 0 0 4px 6px;
    border-radius: 8px;
    background: linear-gradient(135deg, #c7d7f5, #9db6e3);
    color: #fff;
    font-size: 20px;
}

.balao:nth-child(1) { animation: balao-entra .5s 1s both; }
.balao:nth-child(2) { animation: balao-entra .5s 1.8s both; }
.balao:nth-child(3) { animation: balao-entra .5s 2.5s both; }

@keyframes balao-entra { from { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ----- cartao flutuante ----- */
.flutuante {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 10px;
    border: 1px solid var(--borda);
    border-radius: 14px;
    background: rgba(255, 255, 255, .95);
    box-shadow: var(--sombra-media);
    font-size: 12.5px;
    line-height: 1.3;
}
.flutuante b { display: block; }
.flutuante small { color: var(--texto-suave); }
.flutuante-icone {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--verde-suave);
    color: var(--verde-escuro);
    font-size: 17px;
}
.flutuante-backup {
    left: -28px;
    bottom: 22px;
    animation: flutua-entra 1s .6s cubic-bezier(.2, .8, .2, 1) both, balanca 6s 1.6s ease-in-out infinite;
}

@keyframes balanca { 50% { transform: translateY(-6px); } }

/* =====================================================================
   Fatos
   ===================================================================== */
.fatos { border-block: 1px solid var(--borda); background: #fff; }
.fatos-grade { display: grid; grid-template-columns: repeat(4, 1fr); }
.fato { padding: 1.8rem 1.5rem; border-left: 1px solid var(--borda); }
.fato:first-child { border-left: 0; }
.fato strong {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 1.6rem;
    letter-spacing: -.02em;
    color: var(--marinho);
}
.fato span { color: var(--texto-suave); font-size: .95rem; }

/* =====================================================================
   Secoes
   ===================================================================== */
.secao { padding: 6.5rem 0; }
.secao-alt { background: var(--fundo-alt); }

.secao-cabecalho {
    max-width: 46rem;
    margin: 0 auto 3.5rem;
    text-align: center;
}
.secao-cabecalho h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem); font-weight: 750; color: var(--marinho); }
.secao-cabecalho p { margin-top: 1rem; color: var(--texto-suave); font-size: 1.1rem; }
.secao-cabecalho-esquerda { text-align: left; margin: 0; }

.sobretitulo {
    display: inline-block;
    margin-bottom: .9rem;
    color: var(--azul);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lista-check { display: grid; gap: .65rem; margin-top: 1.5rem; }
.lista-check li { position: relative; padding-left: 2rem; color: var(--texto-medio); }
.lista-check li::before {
    content: "\F633";
    font-family: bootstrap-icons;
    position: absolute;
    left: 0;
    top: .1rem;
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--azul-suave);
    color: var(--azul);
    font-size: .95rem;
    line-height: 1;
}

/* ----- comparativo ----- */
.comparativo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.comparativo-coluna { padding: 2rem; border-radius: var(--raio-grande); border: 1px solid var(--borda); }
.comparativo-coluna h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; margin-bottom: 1.25rem; }
.comparativo-coluna li { position: relative; padding: .7rem 0 .7rem 1.6rem; border-top: 1px dashed var(--borda); color: var(--texto-medio); }
.comparativo-coluna li:first-child { border-top: 0; }
.comparativo-coluna li::before { position: absolute; left: 0; top: .7rem; font-family: bootstrap-icons; }
.antes { background: #fcfcfd; }
.antes h3 { color: var(--texto-suave); }
.antes h3 i { color: var(--vermelho); }
.antes li { color: var(--texto-suave); }
.antes li::before { content: "\F62A"; color: var(--texto-apagado); }
.depois {
    background: linear-gradient(160deg, #fff 0%, var(--azul-suave) 100%);
    border-color: var(--azul-borda);
    box-shadow: var(--sombra-media);
}
.depois h3 { color: var(--marinho); }
.depois h3 i { color: var(--azul); }
.depois li { border-top-color: rgba(0, 96, 241, .18); }
.depois li::before { content: "\F633"; color: var(--azul); font-size: 1.1rem; }

/* ----- recursos ----- */
.recursos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.recurso {
    padding: 1.5rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: #fff;
    box-shadow: var(--sombra);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.recurso:hover { transform: translateY(-4px); box-shadow: var(--sombra-media); border-color: var(--azul-borda); }
.recurso h3 { font-size: 1.05rem; margin: 1rem 0 .4rem; letter-spacing: -.01em; }
.recurso p { font-size: .94rem; color: var(--texto-suave); line-height: 1.55; }
.recurso-icone {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.3rem;
}

/* ----- abas por perfil ----- */
.abas-lista {
    display: flex;
    justify-content: center;
    gap: .4rem;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 2.5rem;
    padding: .35rem;
    border: 1px solid var(--borda);
    border-radius: 16px;
    background: var(--fundo-alt);
    overflow-x: auto;
}
.aba {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.2rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--texto-suave);
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, color .15s, box-shadow .15s;
}
.aba:hover { color: var(--texto); }
.aba[aria-selected="true"] { background: #fff; color: var(--azul-escuro); box-shadow: var(--sombra); }

.aba-painel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
    padding: 3rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio-grande);
    background: linear-gradient(180deg, #fff, #fafcff);
    animation: painel-entra .35s ease both;
}
.aba-painel:focus-visible { outline-offset: 6px; }
.aba-texto h3 { font-size: 1.75rem; color: var(--marinho); }
.aba-texto > p { margin-top: .9rem; color: var(--texto-suave); }

@keyframes painel-entra { from { opacity: 0; transform: translateY(10px); } }

.aba-visual {
    display: grid;
    place-items: center;
    min-height: 340px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 30% 20%, rgba(0, 96, 241, .14), transparent 55%),
        radial-gradient(circle at 80% 90%, rgba(3, 42, 93, .12), transparent 55%),
        var(--fundo-alt);
    padding: 2rem;
}

.mock {
    width: 100%;
    max-width: 360px;
    padding: 1.2rem;
    border: 1px solid var(--borda);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--sombra-elevada);
    font-size: .9rem;
}
.mock-cabecalho { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin-bottom: 1rem; color: var(--marinho); }
.mock-cabecalho i { color: var(--azul); }
.mock-rodape { margin-top: 1rem; color: var(--texto-suave); font-size: .8rem; }
.mock-botao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    margin-top: 1rem;
    padding: .65rem;
    border: 0;
    border-radius: 10px;
    background: var(--azul);
    color: #fff;
    font: inherit;
    font-weight: 600;
    pointer-events: none;
}
.mock-botao-verde { background: var(--verde-whats); }

.qr { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }
.qr rect { fill: var(--marinho); }

.scanner {
    position: relative;
    width: 170px;
    margin: 0 auto;
    padding: 14px;
    border-radius: 14px;
    background: #fff;
}
.scanner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background:
        linear-gradient(var(--azul), var(--azul)) top left / 26px 4px no-repeat,
        linear-gradient(var(--azul), var(--azul)) top left / 4px 26px no-repeat,
        linear-gradient(var(--azul), var(--azul)) top right / 26px 4px no-repeat,
        linear-gradient(var(--azul), var(--azul)) top right / 4px 26px no-repeat,
        linear-gradient(var(--azul), var(--azul)) bottom left / 26px 4px no-repeat,
        linear-gradient(var(--azul), var(--azul)) bottom left / 4px 26px no-repeat,
        linear-gradient(var(--azul), var(--azul)) bottom right / 26px 4px no-repeat,
        linear-gradient(var(--azul), var(--azul)) bottom right / 4px 26px no-repeat;
}
.scanner-linha {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 10%;
    height: 3px;
    border-radius: 3px;
    background: var(--azul);
    box-shadow: 0 0 14px 3px rgba(0, 96, 241, .55);
    animation: varre 2.4s ease-in-out infinite alternate;
}
@keyframes varre { to { top: 88%; } }

.resultado-ok {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: 1rem;
    padding: .75rem .9rem;
    border: 1px solid #a6f4c5;
    border-radius: 12px;
    background: #ecfdf3;
}
.resultado-ok > i { color: var(--verde); font-size: 1.5rem; }
.resultado-ok b { display: block; color: var(--verde-escuro); }
.resultado-ok small { color: var(--texto-medio); font-size: .8rem; }

.mock-celular { max-width: 270px; border-radius: 28px; text-align: center; padding: 1.4rem 1.3rem; }
.mock-celular-topo { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--marinho); margin-bottom: 1rem; }
.mock-celular-topo i { color: var(--azul); }
.qr-grande { width: 170px; margin: 0 auto; padding: 10px; border: 1px solid var(--borda); border-radius: 14px; }
.mock-celular-info { margin-top: .9rem; }
.mock-celular-info b { display: block; color: var(--texto); }
.mock-celular-info span { color: var(--texto-suave); font-size: .85rem; }

.barra-voto {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: .65rem .85rem;
    margin-bottom: .55rem;
    border-radius: 10px;
    background: var(--fundo-alt);
    overflow: hidden;
    font-size: .88rem;
}
.barra-voto span, .barra-voto b { position: relative; z-index: 1; }
.barra-voto i {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--p);
    background: linear-gradient(90deg, #cfe0ff, #a9c9ff);
    border-radius: 10px;
    transform-origin: left;
    animation: enche 1s cubic-bezier(.2, .8, .2, 1) both;
}
.barra-voto:first-of-type i { background: linear-gradient(90deg, #8fb8ff, var(--azul-claro)); }
.barra-voto:first-of-type b, .barra-voto:first-of-type span { color: var(--marinho); font-weight: 600; }
@keyframes enche { from { transform: scaleX(0); } }

.mock-cobrancas li {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: .7rem;
    padding: .6rem 0;
    border-top: 1px solid #f0f2f5;
    font-size: .85rem;
}
.mock-cobrancas li:first-child { border-top: 0; }
.mock-cobrancas em { color: var(--texto-suave); font-style: normal; font-size: .78rem; }
.pilula { padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.pilula-verde { background: var(--verde-suave); color: var(--verde-escuro); }
.pilula-azul { background: var(--azul-suave); color: var(--azul-escuro); }
.pilula-laranja { background: var(--laranja-suave); color: var(--laranja); }

/* ----- passos ----- */
.passos { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; counter-reset: passo; }
.passos::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 16%;
    right: 16%;
    border-top: 2px dashed var(--azul-borda);
}
.passo { position: relative; text-align: center; padding: 0 1rem; }
.passo-numero {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 1.2rem;
    border-radius: 18px;
    background: var(--azul);
    color: #fff;
    font-family: var(--fonte-titulo);
    font-size: 1.4rem;
    font-weight: 800;
    box-shadow: 0 10px 24px -8px rgba(0, 96, 241, .6), 0 0 0 8px var(--fundo-alt);
}
.passo h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.passo p { color: var(--texto-suave); font-size: .97rem; }

.aviso-fluxo {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    max-width: 52rem;
    margin: 3.5rem auto 0;
    padding: 1.3rem 1.5rem;
    border: 1px solid #a6f4c5;
    border-radius: var(--raio);
    background: #fff;
    box-shadow: var(--sombra);
}
.aviso-fluxo p { color: var(--texto-medio); }
.aviso-fluxo-icone {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--verde-whats);
    color: #fff;
    font-size: 1.5rem;
}

/* ----- seguranca (escura) ----- */
.secao-escura {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(800px 400px at 15% 0%, rgba(0, 96, 241, .35), transparent 60%),
        radial-gradient(700px 400px at 100% 100%, rgba(61, 139, 255, .22), transparent 60%),
        var(--marinho-profundo);
    color: #c9d6ec;
}
.secao-escura .secao-cabecalho h2 { color: #fff; }
.secao-escura .secao-cabecalho p { color: #a9bbd8; }
.secao-escura .sobretitulo { color: #7fb0ff; }

.seguranca-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.seguranca-item {
    padding: 1.7rem;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--raio);
    background: rgba(255, 255, 255, .04);
    transition: background-color .2s, border-color .2s;
}
.seguranca-item:hover { background: rgba(255, 255, 255, .07); border-color: rgba(127, 176, 255, .35); }
.seguranca-item > i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(0, 96, 241, .22);
    color: #8fbaff;
    font-size: 1.35rem;
}
.seguranca-item h3 { margin: 1.1rem 0 .45rem; color: #fff; font-size: 1.1rem; }
.seguranca-item p { font-size: .95rem; color: #a9bbd8; }

/* ----- instalacao ----- */
.instalacao-grade { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4.5rem; }
.instalacao-texto h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem); color: var(--marinho); }
.instalacao-texto > p { margin-top: 1rem; color: var(--texto-suave); font-size: 1.08rem; }

.instalacao-visual {
    display: grid;
    place-items: center;
    padding: 3rem 2rem;
    border-radius: var(--raio-grande);
    background:
        radial-gradient(circle at 20% 10%, rgba(0, 96, 241, .16), transparent 55%),
        linear-gradient(160deg, #eef4ff, #f5f7fb);
}
.janela {
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--sombra-elevada);
    overflow: hidden;
    font-size: .92rem;
}
.janela-barra {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--borda);
    background: #f9fafb;
    font-size: .8rem;
    font-weight: 600;
    color: var(--texto-medio);
}
.janela-barra img { border-radius: 4px; }
.janela-corpo { padding: 1.4rem 1.4rem 1.2rem; }
.etapas li { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; color: var(--texto-medio); }
.etapas .feita i { color: var(--verde); font-size: 1.1rem; }
.etapas .andamento { color: var(--azul-escuro); font-weight: 600; }
.girando {
    width: 1.1rem;
    height: 1.1rem;
    border: 2.5px solid var(--azul-suave);
    border-top-color: var(--azul);
    border-radius: 50%;
    animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
.progresso { height: 8px; margin-top: 1.1rem; border-radius: 99px; background: var(--fundo-alt); overflow: hidden; }
.progresso span {
    display: block;
    width: 88%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--azul), var(--azul-claro));
}
.janela-rodape { margin-top: .8rem; color: var(--texto-suave); font-size: .82rem; }

/* ----- precos ----- */
.precos-controles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    max-width: 860px;
    margin: 0 auto 2.5rem;
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: #fff;
    box-shadow: var(--sombra);
}
.calculadora { flex: 1; }
.calculadora label { font-weight: 600; color: var(--texto); }
.calculadora-linha { display: flex; align-items: center; gap: 1rem; margin-top: .6rem; }
.calculadora output {
    min-width: 4.2rem;
    padding: .35rem .6rem;
    border-radius: 10px;
    background: var(--azul-suave);
    color: var(--azul-escuro);
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.calculadora-resumo { margin-top: .5rem; color: var(--texto-suave); font-size: .9rem; min-height: 1.4em; }
.calculadora-resumo b { color: var(--marinho); }

input[type="range"] {
    flex: 1;
    width: 100%;
    height: 8px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--azul) var(--progresso, 10%), var(--borda) var(--progresso, 10%));
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--azul);
    box-shadow: 0 2px 8px rgba(0, 96, 241, .45);
}
input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--azul);
    box-shadow: 0 2px 8px rgba(0, 96, 241, .45);
}

.ciclo { display: flex; padding: .3rem; border-radius: 14px; background: var(--fundo-alt); border: 1px solid var(--borda); flex-shrink: 0; }
.ciclo-opcao {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem 1rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--texto-suave);
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
}
.ciclo-opcao[aria-pressed="true"] { background: #fff; color: var(--texto); box-shadow: var(--sombra); }
.economia { padding: .1rem .45rem; border-radius: 99px; background: var(--verde-suave); color: var(--verde-escuro); font-size: .75rem; }

.planos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; align-items: stretch; }
.plano {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.8rem 1.5rem;
    border: 1px solid var(--borda);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--sombra);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.plano h3 { font-size: 1.2rem; }
.plano-limite { margin-top: .3rem; color: var(--texto-suave); font-size: .92rem; }
.plano-preco {
    display: flex;
    align-items: baseline;
    gap: .2rem;
    margin-top: 1.3rem;
    color: var(--marinho);
    font-family: var(--fonte-titulo);
    font-variant-numeric: tabular-nums;
}
.plano-preco .moeda { font-size: 1.1rem; font-weight: 700; }
.plano-preco [data-preco] { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.plano-preco .periodo { color: var(--texto-suave); font-size: .95rem; font-family: var(--fonte); }
.plano-preco-texto { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.6; }
.plano-detalhe { margin-top: .5rem; min-height: 2.8em; color: var(--texto-suave); font-size: .86rem; }
.plano-botao { margin-top: 1.2rem; }
.plano-ideal { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--borda); color: var(--texto-medio); font-size: .9rem; }

.plano-fita {
    position: absolute;
    top: -12px;
    left: 1.5rem;
    padding: .2rem .7rem;
    border-radius: 99px;
    background: var(--marinho);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.plano.recomendado {
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(0, 96, 241, .15), var(--sombra-media);
    transform: translateY(-6px);
}
.plano.recomendado .plano-botao { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: 0 8px 20px -6px rgba(0, 96, 241, .55); }
.plano.recomendado .plano-botao:hover { background: var(--azul-escuro); }
.plano.recomendado::after {
    content: "Indicado para você";
    position: absolute;
    top: -12px;
    right: 1.2rem;
    padding: .2rem .7rem;
    border-radius: 99px;
    background: var(--azul);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.plano-medida { background: linear-gradient(170deg, #fff, var(--fundo-alt)); }

.incluso {
    margin-top: 2.5rem;
    padding: 1.8rem 2rem;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--borda);
}
.incluso h3 { font-size: 1.05rem; margin-bottom: 1rem; }
.incluso ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem 1.5rem; }
.incluso li { display: flex; gap: .5rem; color: var(--texto-medio); font-size: .95rem; }
.incluso li i { color: var(--verde); font-size: 1.15rem; line-height: 1.3; }
.incluso-nota { margin-top: 1.2rem; color: var(--texto-suave); font-size: .9rem; }

/* ----- duvidas ----- */
.duvidas-grade { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; align-items: start; }
.duvidas-grade .secao-cabecalho { position: sticky; top: calc(var(--altura-topo) + 2rem); }

.pergunta { border-bottom: 1px solid var(--borda); }
.pergunta:first-child { border-top: 1px solid var(--borda); }
.pergunta summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    list-style: none;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
    content: "\F64D";
    font-family: bootstrap-icons;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--fundo-alt);
    color: var(--azul);
    transition: transform .2s, background-color .2s;
}
.pergunta[open] summary::after { transform: rotate(45deg); background: var(--azul-suave); }
.pergunta summary:hover { color: var(--azul-escuro); }
.pergunta p { padding: 0 3rem 1.4rem 0; color: var(--texto-suave); }

/* ----- demonstracao ----- */
.secao-cta { padding-top: 2rem; }
.cta-cartao {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    padding: 3.5rem;
    border-radius: 32px;
    overflow: hidden;
    background:
        radial-gradient(600px 400px at 0% 0%, rgba(61, 139, 255, .45), transparent 60%),
        radial-gradient(500px 400px at 100% 100%, rgba(0, 96, 241, .35), transparent 60%),
        var(--marinho);
    color: #c9d6ec;
}
.cta-texto h2 { color: #fff; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem); }
.cta-texto > p { margin-top: 1rem; font-size: 1.08rem; color: #b8c8e2; }
.sobretitulo-claro { color: #8fbaff; }
.cta-lista { display: grid; gap: .8rem; margin: 1.8rem 0 2rem; }
.cta-lista li { display: flex; align-items: center; gap: .75rem; color: #e3ebf8; }
.cta-lista i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    color: #8fbaff;
    font-size: 1.1rem;
}

.formulario {
    padding: 2rem;
    border-radius: 22px;
    background: #fff;
    color: var(--texto);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .4);
}
.formulario h3 { font-size: 1.3rem; margin-bottom: 1.2rem; color: var(--marinho); }
.campo { display: grid; gap: .35rem; margin-bottom: .95rem; min-width: 0; }
.campo-linha { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.campo label { font-size: .88rem; font-weight: 600; color: var(--texto-medio); }
.opcional { color: var(--texto-apagado); font-weight: 400; }
.campo input, .campo select, .campo textarea {
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--borda-forte);
    border-radius: 10px;
    background: #fff;
    color: var(--texto);
    font: inherit;
    font-size: .97rem;
    transition: border-color .15s, box-shadow .15s;
}
.campo textarea { resize: vertical; min-height: 84px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 4px rgba(0, 96, 241, .15);
}
.campo [aria-invalid="true"] { border-color: var(--vermelho); box-shadow: 0 0 0 4px rgba(217, 45, 32, .1); }

.form-aviso { margin-top: .8rem; font-size: .9rem; font-weight: 600; min-height: 1.3em; }
.form-aviso.erro { color: var(--vermelho); }
.form-aviso.ok { color: var(--verde-escuro); }
.form-privacidade { margin-top: .3rem; color: var(--texto-suave); font-size: .8rem; }

/* =====================================================================
   Rodape
   ===================================================================== */
.rodape { padding: 4.5rem 0 2rem; border-top: 1px solid var(--borda); background: #fff; }
.rodape-grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; }
.rodape-marca p { margin-top: 1rem; max-width: 22rem; color: var(--texto-suave); font-size: .95rem; }
.rodape nav { display: grid; align-content: start; gap: .55rem; }
.rodape h3 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-apagado); margin-bottom: .4rem; }
.rodape nav a { color: var(--texto-medio); font-size: .95rem; }
.rodape nav a:hover { color: var(--azul); }
.rodape-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--borda);
    color: var(--texto-apagado);
    font-size: .88rem;
}
.rodape-base a { color: var(--texto-suave); }
.rodape-credito strong { color: var(--texto-medio); font-weight: 600; }

.whatsapp-flutuante {
    position: fixed;
    right: 1.4rem;
    bottom: 1.4rem;
    z-index: 900;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--verde-whats);
    color: #fff;
    font-size: 1.7rem;
    box-shadow: 0 12px 28px -8px rgba(31, 170, 83, .7);
    transition: transform .2s;
}
.whatsapp-flutuante:hover { color: #fff; transform: scale(1.07); }

/* =====================================================================
   Animacao ao rolar (so com JS)
   ===================================================================== */
.js .revelar {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1);
    transition-delay: var(--atraso, 0s);
}
.js .revelar.visivel { opacity: 1; transform: none; }

/* =====================================================================
   Pagina de texto (privacidade)
   ===================================================================== */
.pagina-texto { padding: 4rem 0 5rem; }
.pagina-texto .container { max-width: 760px; }
.pagina-texto h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); color: var(--marinho); margin-bottom: .6rem; }
.pagina-texto h2 { font-size: 1.3rem; margin: 2.2rem 0 .6rem; color: var(--marinho); }
.pagina-texto p, .pagina-texto li { color: var(--texto-medio); }
.pagina-texto p + p { margin-top: .8rem; }
.pagina-texto ul { list-style: disc; padding-left: 1.4rem; display: grid; gap: .4rem; }
.pagina-texto .atualizado { color: var(--texto-suave); font-size: .92rem; }
.voltar { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 2rem; font-weight: 600; }

/* =====================================================================
   Responsivo
   ===================================================================== */
@media (max-width: 1100px) {
    .recursos { grid-template-columns: repeat(3, 1fr); }
    .planos { grid-template-columns: repeat(2, 1fr); row-gap: 1.8rem; }
    .hero-grade { gap: 2.5rem; }
}

@media (max-width: 960px) {
    .menu {
        position: fixed;
        top: var(--altura-topo);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: .2rem;
        padding: 1rem 1.25rem 1.5rem;
        background: #fff;
        border-bottom: 1px solid var(--borda);
        box-shadow: 0 20px 30px -20px rgba(16, 24, 40, .25);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s, transform .2s, visibility .2s;
    }
    .menu a { padding: .8rem .9rem; font-size: 1.05rem; }
    .menu .menu-cta { display: flex; margin-top: .6rem; color: #fff; }
    .menu .menu-cta:hover { background: var(--azul-escuro); color: #fff; }
    .menu-aberto .menu { opacity: 1; transform: none; visibility: visible; }
    .menu-aberto .topo { background: #fff; }
    .menu-botao { display: grid; }
    .topo-acoes { margin-left: auto; }
    .topo-cta { display: none; }

    .hero { padding-bottom: 4.5rem; }
    .hero-grade { grid-template-columns: 1fr; }
    .hero-texto { text-align: center; }
    .hero-sub { margin-inline: auto; }
    .hero-acoes, .hero-garantias { justify-content: center; }
    .hero-visual { max-width: 680px; margin: 0 auto; width: 100%; }
    .tela { transform: none; }

    .fatos-grade { grid-template-columns: repeat(2, 1fr); }
    .fato:nth-child(3) { border-left: 0; }
    .fato:nth-child(n+3) { border-top: 1px solid var(--borda); }

    .comparativo { grid-template-columns: 1fr; }
    .aba-painel { grid-template-columns: 1fr; gap: 2rem; padding: 2rem; }
    .seguranca-grade { grid-template-columns: repeat(2, 1fr); }
    .instalacao-grade { grid-template-columns: 1fr; gap: 2.5rem; }
    .duvidas-grade { grid-template-columns: 1fr; gap: 2rem; }
    .duvidas-grade .secao-cabecalho { position: static; }
    .cta-cartao { grid-template-columns: 1fr; padding: 2.5rem; gap: 2.5rem; }
    .rodape-grade { grid-template-columns: 1fr 1fr; }
    .rodape-marca { grid-column: 1 / -1; }
    .precos-controles { flex-direction: column; align-items: stretch; }
    .ciclo { align-self: center; }
    .incluso ul { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .secao { padding: 4.5rem 0; }
    .secao-cabecalho { margin-bottom: 2.5rem; }
    .recursos { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
    .recurso { padding: 1.2rem; }
    .passos { grid-template-columns: 1fr; gap: 2rem; }
    .passos::before { display: none; }
    .aviso-fluxo { flex-direction: column; text-align: center; }
    .tela-corpo { grid-template-columns: 1fr; min-height: 0; }
    .tela-lateral { display: none; }
    .hero-visual { padding: 0 0 7rem; }
    .celular { width: 210px; right: -4px; }
    .flutuante-backup { left: 0; bottom: 1rem; }
}

@media (max-width: 560px) {
    .container { width: min(1200px, 100% - 2rem); }
    .marca img { width: 148px; }
    .hero { padding-top: calc(var(--altura-topo) + 2.5rem); }
    .hero-acoes .botao { width: 100%; }
    .tela-paineis { grid-template-columns: 1fr; }
    .tela-paineis .tela-cartao:first-child { display: none; }
    .tela-indicadores { grid-template-columns: 1fr 1fr; }
    .tela-indicadores .ind:last-child { grid-column: span 2; }
    .recursos { grid-template-columns: 1fr; }
    .seguranca-grade { grid-template-columns: 1fr; }
    .planos { grid-template-columns: 1fr; }
    .incluso ul { grid-template-columns: 1fr; }
    .campo-linha { grid-template-columns: 1fr; gap: 0; }
    .cta-cartao { padding: 1.6rem 1.1rem; border-radius: 24px; }
    .formulario { padding: 1.4rem; }
    .aba-painel { padding: 1.3rem; }
    .aba-visual { padding: 1.2rem; min-height: 0; }
    .abas-lista { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .aba { justify-content: center; padding: .6rem .9rem; }
    .flutuante-backup { display: none; }
    .fato { padding: 1.3rem 1rem; }
    .fato strong { font-size: 1.3rem; }
    .pergunta p { padding-right: 0; }
    .rodape-grade { grid-template-columns: 1fr; gap: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .revelar { opacity: 1; transform: none; }
}