/* ─── Reset ─── */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --marinho:     #14274a;   /* azul-marinho do logo */
    --marinho-esc: #0f1d38;
    --azul:        #1f6fe0;   /* azul vibrante do logo */
    --azul-esc:    #1a5fc4;
    --texto:       #20262f;
    --texto-suave: #545d6b;
    --cinza:       #f3f4f6;
    --cinza-2:     #e7e9ee;
    --borda:       #d9dde4;
    --branco:      #ffffff;
}
html { scroll-behavior: smooth; }
body {
    font-family: "Segoe UI", system-ui, Arial, sans-serif;
    color: var(--texto);
    line-height: 1.6;
    background: var(--branco);
}
img { max-width: 100%; display: block; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ─── Botões ─── */
.btn {
    display: inline-block;
    padding: 14px 30px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    font-size: 1rem;
    transition: background .15s, color .15s;
}
.btn-primary { background: var(--azul); color: #fff; }
.btn-primary:hover { background: var(--azul-esc); }
.btn-light { background: #fff; color: var(--marinho); }
.btn-light:hover { background: var(--cinza); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost:hover { background: #fff; color: var(--marinho); }
.btn-block { display: block; width: 100%; text-align: center; border: none; font-size: 1.05rem; }

/* ─── Topbar ─── */
.topbar { background: #fff; border-bottom: 1px solid var(--borda); }
.nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 24px; max-width: 1140px; margin: 0 auto;
}
.nav-logo img { height: 46px; }
.nav-right { display: flex; align-items: center; gap: 30px; }
.nav-right a.link { color: var(--texto); text-decoration: none; font-weight: 500; }
.nav-right a.link:hover { color: var(--azul); }
.nav-phone { color: var(--marinho); font-weight: 700; text-decoration: none; }
.nav-right .btn { padding: 10px 22px; }

/* ─── Hero: foto de fundo + texto sobreposto ─── */
.hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    /* A foto fica em assets/hero.jpg. A camada escura garante leitura do texto. */
    background:
        linear-gradient(90deg, rgba(15,29,56,.86) 0%, rgba(15,29,56,.62) 55%, rgba(15,29,56,.30) 100%),
        url("hero.jpg") center / cover no-repeat;
    color: #fff;
}
.hero-inner { max-width: 1140px; margin: 0 auto; padding: 70px 24px; width: 100%; }
.hero h1 {
    font-size: 3rem; line-height: 1.1; font-weight: 800;
    letter-spacing: -.5px; max-width: 720px; margin-bottom: 22px;
}
.hero p { font-size: 1.25rem; max-width: 560px; margin-bottom: 34px; color: #e6eaf2; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* faixa de credibilidade sob o hero */
.faixa {
    background: var(--marinho);
    color: #fff;
}
.faixa-inner {
    max-width: 1140px; margin: 0 auto; padding: 22px 24px;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px;
}
.faixa-item { display: flex; align-items: baseline; gap: 10px; }
.faixa-item b { font-size: 1.4rem; }
.faixa-item span { color: #b9c4d8; font-size: .95rem; }

/* ─── Diferenciais ─── */
.section { padding: 80px 0; }
.section-head { max-width: 640px; margin: 0 auto 50px; text-align: center; }
.section-head .kicker {
    color: var(--azul); font-weight: 700; font-size: .82rem;
    letter-spacing: 1.5px; text-transform: uppercase; display: block; margin-bottom: 10px;
}
.section-head h2 { font-size: 2.05rem; color: var(--marinho); letter-spacing: -.5px; }
.section-head p { color: var(--texto-suave); margin-top: 12px; font-size: 1.05rem; }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }
.card {
    padding: 30px;
    border: 1px solid var(--borda);
    background: #fff;
}
.card .num {
    font-size: .85rem; font-weight: 700; color: var(--azul);
    border-bottom: 2px solid var(--azul); padding-bottom: 4px; display: inline-block; margin-bottom: 16px;
}
.card h3 { color: var(--marinho); font-size: 1.2rem; margin-bottom: 8px; }
.card p { color: var(--texto-suave); }

/* ─── CTA / cotação ─── */
.cotacao-wrap { background: var(--cinza); padding: 80px 0; border-top: 1px solid var(--borda); }
.cotacao { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.cotacao-card {
    background: #fff; border: 1px solid var(--borda); padding: 42px;
}
form label { display: block; margin-bottom: 18px; font-weight: 600; font-size: .9rem; color: var(--marinho); }
form input, form textarea {
    display: block; width: 100%; margin-top: 7px; padding: 13px 14px;
    border: 1px solid var(--borda); font-size: 1rem; font-weight: 400;
    font-family: inherit; color: var(--texto); background: #fff;
    transition: border-color .15s;
}
form input::placeholder, form textarea::placeholder { color: #98a1b0; }
form input:focus, form textarea:focus { outline: none; border-color: var(--azul); }
.linha { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Honeypot */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Alertas */
.alerta { padding: 14px 18px; margin-bottom: 24px; font-weight: 600; border-left: 4px solid; }
.alerta-ok   { background: #eaf6ee; color: #1c7a3e; border-color: #1c7a3e; }
.alerta-erro { background: #fbeaea; color: #c12a22; border-color: #c12a22; }
.form-feedback { text-align: center; margin-top: 16px; font-weight: 600; min-height: 1.2em; }
.form-feedback.ok { color: #1c7a3e; }
.form-feedback.erro { color: #c12a22; }

/* ─── Rodapé ─── */
.rodape { background: var(--marinho-esc); color: #b9c4d8; padding: 56px 0 0; }
.rodape-grid {
    max-width: 1140px; margin: 0 auto; padding: 0 24px;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px;
}
.rodape img { height: 40px; margin-bottom: 14px; }
.rodape h4 { color: #fff; font-size: 1rem; margin-bottom: 12px; }
.rodape a { color: #b9c4d8; text-decoration: none; }
.rodape a:hover { color: #fff; }
.rodape-col p { margin: 6px 0; }
.copy {
    margin-top: 44px; border-top: 1px solid rgba(255,255,255,.12);
    padding: 22px 24px; text-align: center; font-size: .85rem; color: #8995ac;
}

/* ─── Responsivo ─── */
@media (max-width: 760px) {
    .hero { min-height: 480px; background:
        linear-gradient(90deg, rgba(15,29,56,.88), rgba(15,29,56,.66)),
        url("hero.jpg") center / cover no-repeat; }
    .hero h1 { font-size: 2.1rem; }
    .hero p { font-size: 1.1rem; }
    .nav-right .link, .nav-phone { display: none; }
    .faixa-inner { justify-content: flex-start; gap: 24px; }
}
@media (max-width: 480px) {
    .linha { grid-template-columns: 1fr; }
    .cotacao-card { padding: 26px 20px; }
    .section { padding: 56px 0; }
}