/* Layout institucional da Ideal: cabeçalho, rodapé, topo das páginas e blocos de conteúdo.
   Cores vêm de ideal-tokens.css. O logo só aparece sobre fundo branco. */

/* ---- Botão principal (turquesa escuro: branco sobre #08AAA4 não atinge 4,5:1) ---- */
.btn-cotar {
    background: var(--ideal-turquesa-escuro);
    border-color: var(--ideal-turquesa-escuro);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    padding: .6rem 1.4rem;
    box-shadow: 0 8px 20px rgba(6, 127, 122, .25);
}
.btn-cotar:hover, .btn-cotar:focus { background: var(--ideal-petroleo); border-color: var(--ideal-petroleo); color: #fff; }

/* ---- Cabeçalho ---- */
.lay-header { position: sticky; top: 0; z-index: 1030; }
.lay-nav a, .lay-menu-mobile a:not(.btn) {
    color: var(--ideal-petroleo);
    font-weight: 600;
    text-decoration: none;
    position: relative;
    padding: .4rem 0;
}
.lay-nav a:hover { color: var(--ideal-turquesa-escuro); }
.lay-nav a.ativo::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 3px;
    border-radius: 2px;
    background: var(--ideal-turquesa);
}
.lay-whats {
    display: flex; align-items: center; gap: .55rem;
    color: var(--ideal-petroleo); text-decoration: none; font-size: .82rem; font-weight: 600; line-height: 1.2;
}
.lay-whats .bi { font-size: 1.9rem; color: var(--ideal-turquesa-escuro); }
.lay-toggler { font-size: 1.8rem; color: var(--ideal-petroleo); padding: .1rem .5rem; }
.lay-menu-mobile { display: flex; flex-direction: column; gap: .25rem; padding: .5rem 0 1rem; border-top: 1px solid #E6EEF4; }
.lay-menu-mobile a:not(.btn) { padding: .65rem 0; font-size: 1.05rem; }
.lay-menu-mobile a.ativo { color: var(--ideal-turquesa-escuro); }

/* ---- Rodapé ---- */
.lay-footer { background: var(--ideal-petroleo-escuro); color: #fff; }
.lay-footer .bi { color: #fff; }
.lay-footer-logo { display: inline-flex; background: #fff; border-radius: 14px; padding: .4rem .8rem; }
.lay-footer-logo img { height: 54px; width: auto; }
.lay-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; }
.lay-footer-links a { color: #fff; text-decoration: none; font-size: .9rem; }
.lay-footer-links a:hover { text-decoration: underline; }
.lay-footer-aviso { border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 1rem; color: #C9D8E3; }

/* ---- Topo das páginas institucionais ---- */
.lay-hero { background: linear-gradient(120deg, #fff 0%, #F2FBFB 55%, #E3F6F5 100%); padding: 3rem 0 3.5rem; }
.lay-chamada {
    display: flex; align-items: center; gap: .6rem;
    margin-bottom: 1rem;
    font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ideal-turquesa-escuro);
}
.lay-chamada::before { content: ""; width: 28px; height: 2px; background: var(--ideal-turquesa-escuro); }
.lay-titulo {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 800; line-height: 1.08; letter-spacing: -0.03em;
    color: var(--ideal-petroleo);
}
.lay-titulo span { color: var(--ideal-turquesa-escuro); }
.lay-texto { font-size: 1.1rem; color: #566069; max-width: 560px; }

.lay-foto { position: relative; padding-bottom: 1.6rem; }
.lay-foto img {
    display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
    border-radius: 28px; box-shadow: 0 20px 50px rgba(var(--ideal-petroleo-rgb), .18);
}
.lay-selo {
    position: absolute; left: -1rem; bottom: 0;
    display: inline-flex; align-items: center; gap: .6rem;
    background: #fff; border-radius: 16px; padding: .8rem 1.1rem;
    font-weight: 700; font-size: .95rem; color: var(--ideal-petroleo);
    box-shadow: 0 12px 30px rgba(var(--ideal-petroleo-rgb), .15);
}
.lay-selo .bi {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--ideal-turquesa-claro); color: var(--ideal-turquesa-escuro);
}

/* ---- Blocos de conteúdo ---- */
.lay-secao { padding: 3.5rem 0; background: #fff; }
.lay-h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--ideal-petroleo); }
.lay-h2 span { color: var(--ideal-turquesa-escuro); }
.lay-sub { color: #566069; }
.lay-etiqueta {
    display: inline-block; background: var(--ideal-turquesa-claro); color: var(--ideal-turquesa-escuro);
    border-radius: 999px; padding: .4rem 1rem; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.lay-card {
    height: 100%; background: #fff; border: 1px solid #DCEBEE; border-radius: 22px; padding: 1.5rem;
    display: flex; flex-direction: column;
}
.lay-card h3 { font-size: 1.15rem; font-weight: 800; color: var(--ideal-petroleo); }
.lay-card p { color: #566069; font-size: .92rem; }
.lay-card-logo { height: 48px; display: flex; align-items: center; margin-bottom: 1rem; }
.lay-card-logo img { max-height: 44px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
.lay-link { margin-top: auto; font-weight: 700; font-size: .9rem; color: var(--ideal-turquesa-escuro); text-decoration: none; }
.lay-link:hover { text-decoration: underline; }

.lay-aviso-box {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--ideal-turquesa-claro); border-radius: 22px; padding: 1.5rem 1.75rem;
}
.lay-aviso-box strong { color: var(--ideal-petroleo); }
.lay-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--ideal-petroleo); color: #fff; border-radius: 26px; padding: 2rem 2.25rem;
}
.lay-cta h2 { font-size: 1.4rem; font-weight: 800; margin: 0; }
.lay-cta p { margin: .25rem 0 0; color: #D6E4EE; }

/* ---- Como funciona ---- */
.lay-faixa-passos {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    background: var(--ideal-turquesa-claro); border-radius: 28px; padding: 2rem 2.5rem; margin-bottom: 1.25rem;
}
.lay-passo-icone {
    width: 74px; height: 74px; border-radius: 20px; background: #fff; color: var(--ideal-turquesa-escuro);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem;
    box-shadow: 0 10px 24px rgba(var(--ideal-petroleo-rgb), .1);
}
.lay-seta { color: var(--ideal-turquesa); font-size: 1.4rem; }
.lay-passo-num { font-size: .75rem; font-weight: 800; letter-spacing: .12em; color: var(--ideal-turquesa-escuro); }

/* ---- Dúvidas ---- */
.lay-busca { position: relative; }
.lay-busca .bi { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #566069; }
.lay-busca input { padding-left: 2.6rem; border-radius: 16px; min-height: 52px; border-color: #CFE6E8; }
.lay-faq-item { border: 1px solid #DCEBEE; border-radius: 18px; margin-top: .75rem; background: #fff; overflow: hidden; }
.lay-faq-item.aberto { background: #F7FCFC; border-color: #BFE3E4; }
.lay-faq-item button {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    border: 0; background: transparent; text-align: left; padding: 1.1rem 1.25rem;
    font-weight: 700; color: var(--ideal-petroleo);
}
.lay-faq-item button .bi { color: var(--ideal-turquesa-escuro); font-size: 1.2rem; flex-shrink: 0; }
.lay-faq-resp { padding: 0 1.25rem 1.2rem; color: #566069; font-size: .95rem; }
.lay-lateral { background: var(--ideal-turquesa-claro); border-radius: 26px; padding: 1.75rem; }
.lay-lateral .lay-icone {
    width: 62px; height: 62px; border-radius: 18px; background: #fff; color: var(--ideal-petroleo);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 1rem;
}

/* ---- Contato ---- */
.lay-formulario { background: #F2FBFB; border: 1px solid #DCEBEE; border-radius: 26px; padding: 1.75rem; }
.lay-formulario .form-control, .lay-formulario .form-select { border-radius: 12px; min-height: 48px; border-color: #CFE6E8; font-size: 1rem; }
.lay-cartao-contato { background: #fff; border: 1px solid #DCEBEE; border-radius: 22px; padding: 1.4rem; height: 100%; }
.lay-cartao-contato .bi { font-size: 1.5rem; color: var(--ideal-turquesa-escuro); }
.lay-cartao-contato h3 { font-size: 1.05rem; font-weight: 800; color: var(--ideal-petroleo); margin: .6rem 0 .3rem; }
.lay-cartao-contato p { font-size: .88rem; color: #566069; margin: 0; }

/* ---- Home: topo com a foto e as vantagens (o cotador não muda) ---- */
/* Fundo em degradê. Para usar a foto do cliente: salvar em /images/layout/hero-home.jpg (mín. 1920 px de largura)
   e acrescentar url("/images/layout/hero-home.jpg") center / cover no-repeat depois do degradê. */
.home-hero { background: linear-gradient(110deg, #fff 0%, #F2FBFB 45%, #DFF3F4 100%); }
.lay-home-titulo { font-size: clamp(2rem, 5vw, 3.6rem); }
.lay-home-titulo span { display: block; color: var(--ideal-turquesa-escuro); }
.lay-beneficios { list-style: none; padding: 0; margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: 1rem 0; }
.lay-beneficios li { display: flex; align-items: center; gap: .6rem; padding: 0 1.25rem; font-weight: 600; font-size: .92rem; color: var(--ideal-petroleo); line-height: 1.25; }
.lay-beneficios li:first-child { padding-left: 0; }
.lay-beneficios li + li { border-left: 1px solid rgba(var(--ideal-petroleo-rgb), .25); }
.lay-beneficios .bi { font-size: 1.9rem; color: var(--ideal-petroleo); }

@media (max-width: 991.98px) {
    .lay-beneficios { gap: .9rem 0; }
    .lay-beneficios li { padding: 0 .75rem; font-size: .8rem; flex-direction: column; text-align: center; flex: 1 1 33%; }
    .lay-beneficios li:first-child { padding-left: .75rem; }
    .lay-beneficios .bi { font-size: 1.6rem; }

    .lay-hero { padding: 2rem 0 2.5rem; }
    .lay-selo { left: .75rem; font-size: .85rem; }
    .lay-faixa-passos { flex-direction: column; padding: 1.5rem; }
    .lay-seta { transform: rotate(90deg); }
    .lay-cta { padding: 1.5rem; }
    .lay-secao { padding: 2.25rem 0; }
}

/* ---- Lista de planos: filtro lateral ---- */
.plan-filtro-grupo { border: 0; padding: 0; margin: 0 0 1rem; }
.plan-filtro-grupo legend { float: none; width: auto; font-size: .85rem; font-weight: 800; color: var(--ideal-petroleo); margin-bottom: .45rem; }
.plan-filtro-grupo .form-check-label { font-size: .9rem; }
.plan-filtro-grupo .form-check-input:checked { background-color: var(--ideal-turquesa-escuro); border-color: var(--ideal-turquesa-escuro); }
@media (min-width: 992px) {
    .plan-filtros { position: sticky; top: 110px; }
}

/* ---- Faixa de seguradoras em carrossel contínuo ---- */
.lay-logos { background: #fff; padding: 1.5rem 0; border-bottom: 1px solid #E6EEF4; }
.lay-logos-faixa {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.lay-logos-trilho { display: flex; width: max-content; animation: lay-rolar 36s linear infinite; }
.lay-logos-faixa:hover .lay-logos-trilho { animation-play-state: paused; }
.lay-logos-grupo { display: flex; align-items: center; gap: 4rem; padding-right: 4rem; }
.lay-logo-item { height: 44px; width: auto; max-width: 150px; object-fit: contain; flex-shrink: 0; }
@keyframes lay-rolar { to { transform: translateX(-50%); } }
@media (max-width: 575.98px) {
    .lay-logos-grupo { gap: 2.5rem; padding-right: 2.5rem; }
    .lay-logo-item { height: 36px; max-width: 120px; }
    .lay-logos-trilho { animation-duration: 28s; }
}
@media (prefers-reduced-motion: reduce) {
    .lay-logos-trilho { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
    .lay-logos-grupo { flex-wrap: wrap; justify-content: center; padding-right: 0; }
    .lay-logos-grupo[aria-hidden="true"] { display: none; }
}

/* ---- Página Agências de viagem ---- */
.btn-outline-petroleo { color: var(--ideal-petroleo); border: 2px solid var(--ideal-petroleo); border-radius: 999px; font-weight: 700; padding: .6rem 1.4rem; background: transparent; }
.btn-outline-petroleo:hover { background: var(--ideal-petroleo); color: #fff; }
.lay-secao-clara { background: linear-gradient(120deg, #F7FCFC 0%, #E8F6F6 100%); }
.lay-lista { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: .85rem; }
.lay-lista li { display: flex; gap: .75rem; align-items: flex-start; color: #3A4F63; }
.lay-lista .bi { color: var(--ideal-turquesa-escuro); font-size: 1.25rem; flex-shrink: 0; margin-top: .1rem; }
.lay-cta .btn-outline-light { border-radius: 999px; font-weight: 700; padding: .6rem 1.4rem; }
.lay-card .lay-passo-icone { width: 58px; height: 58px; font-size: 1.5rem; background: var(--ideal-turquesa-claro); box-shadow: none; }

/* ---- Logo do site: imagem recortada e grande, para o "Seguro Viagem" ficar legível; encolhe ao rolar a página ---- */
.lay-header .logo-ideal { height: 92px; width: auto; transition: height .2s ease; }
.lay-header.lay-compacto .logo-ideal { height: 60px; }
@media (max-width: 991.98px) {
    .lay-header .logo-ideal { height: 66px; }
    .lay-header.lay-compacto .logo-ideal { height: 48px; }
}