/* ===========================================================================
   seguros.css — páginas de seguro (pages/seguro-residencial.php e
   pages/seguro-comercial.php)
   ---------------------------------------------------------------------------
   As duas páginas são praticamente idênticas na estrutura (hero com foto,
   coberturas, assistência 24h, central de atendimento, chamada final,
   formulário de cotação) — só o conteúdo muda — por isso um CSS só,
   compartilhado, em vez de duplicar o arquivo inteiro pra cada uma.

   Hero com foto: mesma técnica de condominios.css/sobre.css (.pagina-hero
   padrão vira foto + véu escuro + texto branco só aqui).
   =========================================================================== */

/* ===========================================================================
   HERO COM FOTO
   =========================================================================== */
.seguro-hero {
    position: relative;
    padding: 0;
    padding-top: clamp(3rem, 7vw, 5rem);
    background-color: var(--cor-escura);
    background-size: cover;
    background-position: center;
    border-bottom: none;
    overflow: hidden;
}

.seguro-hero .pagina-hero__titulo {
    font-size: clamp(1.75rem, 1.15rem + 1.8vw, 2.5rem);
}

.seguro-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(2, 8, 40, .82) 0%, rgba(2, 8, 40, .58) 55%, rgba(2, 8, 40, .78) 100%);
}

.seguro-hero .container { position: relative; z-index: 1; }

.seguro-hero .migalhas a,
.seguro-hero .migalhas span { color: rgba(255, 255, 255, .7); }

.seguro-hero .migalhas a:hover { color: var(--cor-branco); }

.seguro-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: var(--gap-sm);
    padding: .45rem .9rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--raio-pill);
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .9);
}

.seguro-hero__pill svg { width: 13px; height: 13px; flex: none; color: var(--cor-primaria-clara); }

.seguro-hero .pagina-hero__titulo,
.seguro-hero .pagina-hero__subtitulo { color: var(--cor-branco); }

.seguro-hero .pagina-hero__subtitulo { color: rgba(255, 255, 255, .82); max-width: 56ch; }

.seguro-hero__titulo-leve {
    display: block;
    font-weight: 400;
    color: rgba(255, 255, 255, .82);
}

.seguro-hero__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin-top: var(--gap-sm);
}

/* Contorno claro sobre a foto — .btn--contorno padrão (borda/texto
   --cor-escura) some num fundo escuro; aqui vira vidro fosco. */
.seguro-hero__acoes .btn--contorno {
    border-color: rgba(255, 255, 255, .35);
    color: var(--cor-branco);
    background: rgba(255, 255, 255, .08);
}

.seguro-hero__acoes .btn--contorno:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .5);
    color: var(--cor-branco);
}

.seguro-hero__numeros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    width: fit-content;
    margin-top: var(--gap-md);
    padding: var(--gap-md) var(--gap-sm);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--raio-lg);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
}

.seguro-hero__numero {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding-inline: var(--gap-md);
}

.seguro-hero__numero-valor {
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: 1;
    color: var(--cor-branco);
}

.seguro-hero__numero-legenda {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .6);
}

.seguro-hero__numero-sep {
    width: 1px;
    height: 26px;
    background: rgba(255, 255, 255, .18);
}

@media (max-width: 575px) {
    .seguro-hero__numeros { flex-direction: column; align-items: stretch; width: 100%; gap: var(--gap-xs); padding: var(--gap-sm); }
    .seguro-hero__numero { padding-inline: 0; }
    .seguro-hero__numero-sep { display: none; }
}

/* ===========================================================================
   COBERTURAS
   =========================================================================== */
.seguro-coberturas__cabecalho {
    max-width: 640px;
    margin: 0 auto var(--gap-lg);
    text-align: center;
}

.seguro-coberturas__chapeu { justify-content: center; }

.seguro-coberturas__cabecalho .secao__titulo mark {
    background: none;
    color: var(--cor-primaria-escura);
}

.seguro-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-md);
    margin-bottom: var(--gap-md);
}

.seguro-card {
    padding: var(--gap-lg) var(--gap-md);
    text-align: center;
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-sm);
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}

.seguro-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra);
    border-color: transparent;
}

.seguro-card__icone {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--gap-sm);
    border-radius: var(--raio);
    background: color-mix(in srgb, var(--cor-primaria) 10%, transparent);
    color: var(--cor-primaria-escura);
    transition: background var(--transicao), color var(--transicao);
}

.seguro-card:hover .seguro-card__icone {
    background: var(--cor-primaria);
    color: var(--cor-primaria-tinta);
}

.seguro-card__icone svg { width: 24px; height: 24px; }

.seguro-card__titulo {
    margin: 0 0 .4rem;
    font-size: var(--fs-base);
    line-height: 1.3;
}

.seguro-card__valor {
    margin-bottom: .5rem;
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--cor-primaria-escura);
}

.seguro-card__texto {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--cor-texto-suave);
    line-height: 1.6;
}

.seguro-obs {
    text-align: center;
}

.seguro-obs p {
    margin: .25rem 0;
    font-size: var(--fs-xs);
    color: var(--cor-texto-suave);
}

.seguro-obs svg { width: 12px; height: 12px; margin-right: .25rem; color: var(--cor-primaria); vertical-align: -1px; }

@media (max-width: 991px) {
    .seguro-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .seguro-cards { grid-template-columns: 1fr; }
}

/* ===========================================================================
   ASSISTÊNCIA 24H — faixa escura em degradê
   =========================================================================== */
.seguro-assistencia {
    padding-block: var(--gap-xl);
    background: linear-gradient(135deg, var(--cor-escura), var(--cor-primaria-escura));
    text-align: center;
    color: var(--cor-branco);
}

.seguro-assistencia__chapeu {
    justify-content: center;
    color: rgba(255, 255, 255, .85);
}

.seguro-assistencia__chapeu::before { background: var(--cor-primaria-clara); }

.seguro-assistencia__titulo {
    margin: var(--gap-sm) 0 .5rem;
    color: var(--cor-branco);
}

.seguro-assistencia__titulo span { font-weight: 400; }

.seguro-assistencia__texto {
    max-width: 50ch;
    margin: 0 auto var(--gap-lg);
    color: rgba(255, 255, 255, .68);
}

.seguro-assist-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-md);
    margin-bottom: var(--gap-md);
}

.seguro-assist-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    min-width: 150px;
    padding: var(--gap-md) var(--gap-lg);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--raio-lg);
    background: rgba(255, 255, 255, .1);
    font-weight: 700;
    transition: background var(--transicao);
}

.seguro-assist-card:hover { background: rgba(255, 255, 255, .16); }

.seguro-assist-card svg { width: 26px; height: 26px; color: rgba(255, 255, 255, .8); }

.seguro-assist__obs {
    max-width: 50ch;
    margin: 0 auto;
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, .55);
}

/* ===========================================================================
   CENTRAL DE ATENDIMENTO
   =========================================================================== */
.seguro-central__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xl);
    align-items: center;
}

.seguro-central__midia {
    position: relative;
}

.seguro-central__foto {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg);
    display: block;
}

.seguro-central__cracha {
    position: absolute;
    right: -1rem;
    bottom: -1rem;
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    padding: var(--gap-sm) var(--gap-md);
    background: var(--cor-escura);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg);
    color: var(--cor-branco);
}

.seguro-central__cracha svg { width: 20px; height: 20px; color: var(--cor-primaria-clara); flex: none; }

.seguro-central__cracha strong { display: block; font-size: var(--fs-base); }

.seguro-central__cracha small { font-size: var(--fs-xs); opacity: .7; }

.seguro-central__titulo { margin: 0 0 var(--gap-sm); }

.seguro-central__titulo mark { background: none; color: var(--cor-primaria-escura); }

.seguro-central__texto {
    margin: 0 0 var(--gap-md);
    color: var(--cor-texto);
    line-height: 1.7;
}

.seguro-central__contatos {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-md);
}

.seguro-central__item {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    padding: var(--gap-sm) var(--gap-md);
    background: var(--cor-fundo-alt);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
}

.seguro-central__item svg { width: 18px; height: 18px; flex: none; color: var(--cor-primaria); }

.seguro-central__item-rotulo {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cor-texto-suave);
}

.seguro-central__item-valor {
    font-weight: 800;
    color: var(--cor-escura);
}

.seguro-central__dicas {
    padding-top: var(--gap-md);
    border-top: 1px solid var(--cor-borda);
}

.seguro-central__dicas p {
    margin: .4rem 0;
    font-size: var(--fs-sm);
    color: var(--cor-texto-suave);
    line-height: 1.6;
}

.seguro-central__dicas svg { width: 13px; height: 13px; margin-right: .3rem; color: var(--cor-primaria); vertical-align: -1px; }

@media (max-width: 991px) {
    .seguro-central__grid { grid-template-columns: 1fr; gap: var(--gap-lg); }
    .seguro-central__foto { height: 280px; }
}

/* ===========================================================================
   CHAMADA FINAL
   =========================================================================== */
.seguro-cta {
    padding-block: var(--gap-xl);
    background: linear-gradient(135deg, var(--cor-escura), var(--cor-primaria-escura));
    color: var(--cor-branco);
}

.seguro-cta__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-lg);
    flex-wrap: wrap;
}

.seguro-cta__tag {
    display: inline-flex;
    align-items: center;
    padding: .3rem .8rem;
    margin-bottom: var(--gap-sm);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--raio-pill);
    background: rgba(255, 255, 255, .1);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}

.seguro-cta__titulo {
    margin: 0 0 .5rem;
    font-size: var(--fs-2xl);
    color: var(--cor-branco);
}

.seguro-cta__texto {
    margin: 0 0 var(--gap-sm);
    max-width: 54ch;
    color: rgba(255, 255, 255, .75);
}

.seguro-cta__garantia {
    margin: 0;
    max-width: 54ch;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, .65);
}

.seguro-cta__garantia strong { color: var(--cor-branco); }

.seguro-cta__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    flex: none;
}

@media (max-width: 767px) {
    .seguro-cta__interno { flex-direction: column; align-items: flex-start; }
    .seguro-cta__acoes { width: 100%; }
    .seguro-cta__acoes .btn { flex: 1; justify-content: center; }
}

/* ===========================================================================
   FORMULÁRIO DE COTAÇÃO
   =========================================================================== */
.seguro-proposta { background: var(--cor-fundo-alt); }

.seguro-proposta__card {
    max-width: 780px;
    margin: 0 auto;
    padding: var(--gap-xl) var(--gap-lg);
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg);
}

.seguro-proposta__cabecalho {
    max-width: 60ch;
    margin: 0 auto var(--gap-lg);
    text-align: center;
}

.seguro-proposta__chapeu { justify-content: center; }

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

.seguro-form__campos .campo--largo {
    grid-column: 1 / -1;
}

/* style.css força .campo--dropdown a ocupar a linha inteira dentro de
   .form-lead (pensado pro form de 2 colunas de contato/anuncie) — aqui é
   só mais um campo da grid de 3 colunas (ao lado de Cidade), não precisa
   da linha toda pra si — senão Cidade fica sozinha numa linha e o dropdown
   sozinho na próxima, os dois "soltos" em vez de alinhados. */
.seguro-form__campos .campo--dropdown {
    grid-column: auto;
}

.seguro-proposta__selos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: var(--gap-md);
}

.seguro-proposta__selos span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pill);
    background: var(--cor-fundo-alt);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--cor-texto-suave);
}

.seguro-proposta__selos svg { width: 13px; height: 13px; color: var(--cor-primaria); }

@media (max-width: 767px) {
    .seguro-proposta__card { padding: var(--gap-lg) var(--gap-md); }
    .seguro-form__campos { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .seguro-form__campos { grid-template-columns: 1fr; }
}