/* ====================== 01. IDENTIDADE E BASE ====================== */
/* Cores reutilizáveis, tipografia, dimensões e comportamentos globais. */

/* :root concentra as variáveis visuais reutilizadas em todo o site. */
:root {
    --navy: #2f3f7f; /* Azul principal da identidade SegLivre. */
    --blue: #5572e5; /* Azul de destaque para ações e detalhes. */
    --orange: #ff8d28; /* Laranja usado nos botões e destaques. */
    --white: #f6f6f6; /* Branco suave usado em superfícies e textos claros. */
    --black: #121212; /* Cor escura para texto sobre os botões laranja. */
    --gray: #383838; /* Cor principal dos parágrafos. */
    --line: #dfe4f1; /* Cor das bordas e divisórias. */
    --soft: #f0f3fc; /* Fundo azul muito claro das seções secundárias. */
    --radius: 22px; /* Raio de borda compartilhado entre componentes. */
}

/* * — aparência e disposição deste elemento. */
* {
    box-sizing: border-box; /* Inclui bordas e espaçamento interno na largura e altura declaradas. */
}

/* html — aparência e disposição deste elemento. */
html {
    scroll-behavior: smooth; /* Define como a página se desloca ao navegar por âncoras. */
    scroll-padding-top: 96px; /* Reserva espaço para o cabeçalho ao navegar até uma seção. */
}

/* body — aparência e disposição deste elemento. */
body {
    margin: 0; /* Define o espaço externo; auto centraliza quando há largura disponível. */
    font-family: Inter,Arial,sans-serif; /* Escolhe a fonte principal e as alternativas disponíveis. */
    color: var(--gray); /* Define a cor do texto ou do ícone. */
    background: #fff; /* Define a cor ou o degradê de fundo. */
    line-height: 1.65; /* Define o espaço vertical ocupado por cada linha. */
}

/* a — aparência e disposição deste elemento. */
a {
    color: inherit; /* Define a cor do texto ou do ícone. */
    text-decoration: none; /* Controla sublinhado e outras decorações do texto. */
}

/* img — aparência e disposição deste elemento. */
img {
    display: block; /* Escolhe o modo de exibição ou oculta o elemento. */
    max-width: 100%; /* Limita a largura para manter o conteúdo legível. */
}

/* h1, h2, h3, p — aparência e disposição deste elemento. */
h1, h2, h3, p {
    margin: 0; /* Define o espaço externo; auto centraliza quando há largura disponível. */
}

/* h1, h2, h3 — aparência e disposição deste elemento. */
h1, h2, h3 {
    line-height: 1.14; /* Define o espaço vertical ocupado por cada linha. */
    letter-spacing: -.04em; /* Ajusta o espaçamento entre letras. */
    color: var(--navy); /* Define a cor do texto ou do ícone. */
}

/* h1 — aparência e disposição deste elemento. */
h1 {
    font-size: clamp(39px,4.4vw,63px); /* Define o tamanho do texto. */
    font-weight: 800; /* Define a espessura do texto. */
}

/* h2 — aparência e disposição deste elemento. */
h2 {
    font-size: clamp(30px,3vw,43px); /* Define o tamanho do texto. */
    font-weight: 700; /* Define a espessura do texto. */
}

/* h3 — aparência e disposição deste elemento. */
h3 {
    font-size: 24px; /* Define o tamanho do texto. */
}

/* p — aparência e disposição deste elemento. */
p {
    margin-top: 16px; /* Define o espaço externo acima. */
}

/* [hidden] — estado interativo / visibilidade. */
[hidden] {
    display: none !important; /* Escolhe o modo de exibição ou oculta o elemento. */
}

/* ====================== 02. COMPONENTES COMPARTILHADOS ====================== */
/* Contêineres, títulos de seção, botões e atalhos de teclado. */

/* button — aparência e disposição deste elemento. */
button {
    font: inherit; /* Herda ou define a tipografia do elemento. */
    cursor: pointer; /* Define o cursor para indicar a interação disponível. */
}

/* .wrap — aparência e disposição deste elemento. */
.wrap {
    width: calc(100% - 80px); /* Define a largura; porcentagens acompanham o contêiner. */
    max-width: 1200px; /* Limita a largura para manter o conteúdo legível. */
    margin: auto; /* Define o espaço externo; auto centraliza quando há largura disponível. */
}

/* .section — aparência e disposição deste elemento. */
.section {
    padding: 92px 0; /* Define o espaço interno do elemento. */
}

/* .eyebrow — aparência e disposição deste elemento. */
.eyebrow {
    font-size: 11px; /* Define o tamanho do texto. */
    letter-spacing: .12em; /* Ajusta o espaçamento entre letras. */
    font-weight: 700; /* Define a espessura do texto. */
    margin: 0 0 20px; /* Define o espaço externo; auto centraliza quando há largura disponível. */
    color: var(--navy); /* Define a cor do texto ou do ícone. */
}

/* .button — aparência e disposição deste elemento. */
.button {
    display: inline-flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
    justify-content: center; /* Distribui ou alinha os itens no eixo principal. */
    gap: 15px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    min-height: 52px; /* Reserva uma altura mínima. */
    padding: 17px 24px; /* Define o espaço interno do elemento. */
    border-radius: 0 28px 28px 28px; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
    border: 0; /* Define espessura, tipo e cor da borda. */
    background: var(--orange); /* Define a cor ou o degradê de fundo. */
    color: var(--black); /* Define a cor do texto ou do ícone. */
    font-size: 13px; /* Define o tamanho do texto. */
    font-weight: 700; /* Define a espessura do texto. */
    line-height: 1.4; /* Define o espaço vertical ocupado por cada linha. */
    transition: transform .18s,box-shadow .18s; /* Suaviza mudanças de propriedades entre os estados do componente. */
}

/* .button:hover — estado interativo / visibilidade. */
.button:hover {
    transform: translateY(-2px); /* Aplica deslocamento ou rotação sem reorganizar o fluxo da página. */
    box-shadow: 0 7px 25px #0002; /* Adiciona uma sombra ao elemento. */
    color: var(--black); /* Define a cor do texto ou do ícone. */
}

/* .mini — aparência e disposição deste elemento. */
.mini {
    font-size: 11px; /* Define o tamanho do texto. */
    min-height: 45px; /* Reserva uma altura mínima. */
    padding: 13px 20px; /* Define o espaço interno do elemento. */
}

/* .section-heading — aparência e disposição deste elemento. */
.section-heading {
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    justify-content: space-between; /* Distribui ou alinha os itens no eixo principal. */
    gap: 60px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    align-items: end; /* Alinha os itens no eixo transversal ou dentro das células. */
    margin-bottom: 35px; /* Define o espaço externo abaixo. */
}

/* .section-heading>p — aparência e disposição deste elemento. */
.section-heading>p {
    max-width: 355px; /* Limita a largura para manter o conteúdo legível. */
    font-size: 14px; /* Define o tamanho do texto. */
    margin: 0; /* Define o espaço externo; auto centraliza quando há largura disponível. */
}

/* .skip — aparência e disposição deste elemento. */
.skip {
    position: fixed; /* Define a referência usada para posicionar o elemento. */
    top: -100px; /* Define o deslocamento a partir do topo. */
    left: 20px; /* Define o deslocamento a partir da esquerda. */
    background: var(--orange); /* Define a cor ou o degradê de fundo. */
    z-index: 30; /* Define a ordem de sobreposição dos elementos posicionados. */
    padding: 12px; /* Define o espaço interno do elemento. */
}

/* .skip:focus — estado interativo / visibilidade. */
.skip:focus {
    top: 8px; /* Define o deslocamento a partir do topo. */
}

/* :focus-visible — estado interativo / visibilidade. */
:focus-visible {
    outline: 3px solid var(--orange); /* Define o contorno que indica foco pelo teclado. */
    outline-offset: 4px; /* Afasta o contorno de foco da borda do elemento. */
}

/* button:disabled — estado interativo / visibilidade. */
button:disabled {
    cursor: not-allowed; /* Define o cursor para indicar a interação disponível. */
    opacity: .65; /* Define a transparência, de 0 a 1. */
}

/* ====================== 03. CABEÇALHO E NAVEGAÇÃO ====================== */
/* Cabeçalho fixado no topo e links do menu. */

/* header — aparência e disposição deste elemento. */
header {
    position: sticky; /* Define a referência usada para posicionar o elemento. */
    top: 0; /* Define o deslocamento a partir do topo. */
    z-index: 20; /* Define a ordem de sobreposição dos elementos posicionados. */
    border-bottom: 1px solid var(--line); /* Define a borda inferior. */
    background: #fffffffa; /* Define a cor ou o degradê de fundo. */
    backdrop-filter: blur(12px); /* Aplica um efeito ao conteúdo por trás do elemento. */
}

/* .header — aparência e disposição deste elemento. */
.header {
    min-height: 86px; /* Reserva uma altura mínima. */
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
    justify-content: space-between; /* Distribui ou alinha os itens no eixo principal. */
    gap: 25px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
}

/* .logo — aparência e disposição deste elemento. */
.logo {
    width: 148px; /* Define a largura; porcentagens acompanham o contêiner. */
    height: 50px; /* Define a altura do elemento. */
    object-fit: contain; /* Encaixa a imagem: contain preserva tudo; cover preenche o espaço com possível corte. */
}

/* nav — aparência e disposição deste elemento. */
nav {
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
    gap: 25px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    font-size: 12px; /* Define o tamanho do texto. */
    font-weight: 600; /* Define a espessura do texto. */
}

/* nav>a:hover — estado interativo / visibilidade. */
nav>a:hover {
    color: var(--blue); /* Define a cor do texto ou do ícone. */
}

/* .menu — aparência e disposição deste elemento. */
.menu {
    display: none; /* Escolhe o modo de exibição ou oculta o elemento. */
}

/* ====================== 04. APRESENTAÇÃO E LIV NO TOPO ====================== */
/* Primeira seção, chamada principal e apresentação da mascote. */

/* .hero — aparência e disposição deste elemento. */
.hero {
    background: var(--navy); /* Define a cor ou o degradê de fundo. */
    color: var(--white); /* Define a cor do texto ou do ícone. */
    position: relative; /* Define a referência usada para posicionar o elemento. */
    overflow: hidden; /* Controla conteúdo que ultrapassa os limites do elemento. */
}

/* .hero:before — estado interativo / visibilidade. */
.hero:before {
    pointer-events: none; /* O círculo é apenas decorativo: deixa cliques e toques chegarem aos links abaixo. */
    content: ''; /* Cria o conteúdo de um pseudo-elemento decorativo. */
    position: absolute; /* Define a referência usada para posicionar o elemento. */
    width: 560px; /* Define a largura; porcentagens acompanham o contêiner. */
    height: 560px; /* Define a altura do elemento. */
    right: -350px; /* Define o deslocamento a partir da direita. */
    top: 120px; /* Define o deslocamento a partir do topo. */
    border: 90px solid #5572e522; /* Define espessura, tipo e cor da borda. */
    border-radius: 50%; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
}

/* .hero-grid — aparência e disposição deste elemento. */
.hero-grid {
    display: grid; /* Escolhe o modo de exibição ou oculta o elemento. */
    grid-template-columns: 1.06fr 1fr; /* Define a quantidade e a proporção das colunas. */
    gap: 65px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    padding: 64px 0 74px; /* Define o espaço interno do elemento. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
}

/* .hero h1 — aparência e disposição deste elemento. */
.hero h1 {
    color: #fff; /* Define a cor do texto ou do ícone. */
}

/* .hero h1 em — aparência e disposição deste elemento. */
.hero h1 em {
    font-style: normal; /* Controla itálico ou texto normal. */
    color: #fff; /* Define a cor do texto ou do ícone. */
}

/* .hero .eyebrow — aparência e disposição deste elemento. */
.hero .eyebrow {
    color: var(--orange); /* Define a cor do texto ou do ícone. */
    margin-bottom: 25px; /* Define o espaço externo abaixo. */
}

/* .lead — aparência e disposição deste elemento. */
.lead {
    font-size: 17px; /* Define o tamanho do texto. */
    max-width: 470px; /* Limita a largura para manter o conteúdo legível. */
    margin: 25px 0 30px; /* Define o espaço externo; auto centraliza quando há largura disponível. */
}

/* .hero-actions — aparência e disposição deste elemento. */
.hero-actions {
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    flex-wrap: wrap; /* Permite quebrar os itens flexíveis em mais de uma linha. */
    gap: 18px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
}

/* .secondary — aparência e disposição deste elemento. */
.secondary {
    font-size: 12px; /* Define o tamanho do texto. */
    font-weight: 600; /* Define a espessura do texto. */
    border-bottom: 1px solid #ffffff60; /* Define a borda inferior. */
    padding: 10px 0; /* Define o espaço interno do elemento. */
}

/* .hero-benefits — aparência e disposição deste elemento. */
.hero-benefits {
    border-top: 1px solid #ffffff30; /* Define a borda superior. */
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    flex-wrap: wrap; /* Permite quebrar os itens flexíveis em mais de uma linha. */
    gap: 16px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    margin-top: 34px; /* Define o espaço externo acima. */
    padding-top: 23px; /* Define o espaço interno acima. */
    font-size: 10px; /* Define o tamanho do texto. */
}

/* .hero-benefits span:before — estado interativo / visibilidade. */
.hero-benefits span:before {
    content: '✓'; /* Cria o conteúdo de um pseudo-elemento decorativo. */
    color: var(--orange); /* Define a cor do texto ou do ícone. */
    padding-right: 7px; /* Define o espaço interno à direita. */
}

/* .hero-photo — aparência e disposição deste elemento. */
.hero-photo {
    position: relative; /* Define a referência usada para posicionar o elemento. */
    height: 510px; /* Define a altura do elemento. */
    margin-right: 22px; /* Define o espaço externo à direita. */
}

/* .hero-photo>img — aparência e disposição deste elemento. */
.hero-photo>img {
    width: 100%; /* Define a largura; porcentagens acompanham o contêiner. */
    height: 100%; /* Define a altura do elemento. */
    object-fit: cover; /* Encaixa a imagem: contain preserva tudo; cover preenche o espaço com possível corte. */
    object-position: center; /* Define o ponto de alinhamento da imagem dentro do espaço reservado. */
    border-radius: 100px 20px 20px 20px; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
}

/* .photo-caption — aparência e disposição deste elemento. */
.photo-caption {
    position: absolute; /* Define a referência usada para posicionar o elemento. */
    bottom: 25px; /* Define o deslocamento a partir da parte inferior. */
    left: -28px; /* Define o deslocamento a partir da esquerda. */
    border-radius: var(--radius); /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
    background: var(--white); /* Define a cor ou o degradê de fundo. */
    color: var(--navy); /* Define a cor do texto ou do ícone. */
    padding: 22px; /* Define o espaço interno do elemento. */
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    gap: 15px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
    box-shadow: 0 14px 40px #0002; /* Adiciona uma sombra ao elemento. */
    line-height: 1.5; /* Define o espaço vertical ocupado por cada linha. */
    font-size: 13px; /* Define o tamanho do texto. */
}

/* .photo-caption span:not(.caption-icon) — estado interativo / visibilidade. */
.photo-caption span:not(.caption-icon) {
    display: block; /* Escolhe o modo de exibição ou oculta o elemento. */
    font-size: 10px; /* Define o tamanho do texto. */
    margin-top: 7px; /* Define o espaço externo acima. */
}

/* .caption-icon — aparência e disposição deste elemento. */
.caption-icon {
    font-size: 30px; /* Define o tamanho do texto. */
    color: var(--blue); /* Define a cor do texto ou do ícone. */
}

/* .vertical-label — aparência e disposição deste elemento. */
.vertical-label {
    position: absolute; /* Define a referência usada para posicionar o elemento. */
    right: -35px; /* Define o deslocamento a partir da direita. */
    top: 65px; /* Define o deslocamento a partir do topo. */
    writing-mode: vertical-rl; /* Define a direção em que as linhas de texto são apresentadas. */
    font-size: 9px; /* Define o tamanho do texto. */
    letter-spacing: .2em; /* Ajusta o espaçamento entre letras. */
    color: #ffffffa0; /* Define a cor do texto ou do ícone. */
}

/* ====================== 05. DIFERENCIAIS ====================== */
/* Cartões de atendimento, comparação, transparência e acompanhamento. */

/* .trust — aparência e disposição deste elemento. */
.trust {
    background: var(--soft); /* Define a cor ou o degradê de fundo. */
}

/* .trust .section-heading — aparência e disposição deste elemento. */
.trust .section-heading {
    margin-bottom: 36px; /* Define o espaço externo abaixo. */
}

/* .trust-grid — aparência e disposição deste elemento. */
.trust-grid {
    display: grid; /* Escolhe o modo de exibição ou oculta o elemento. */
    grid-template-columns: repeat(4,1fr); /* Define a quantidade e a proporção das colunas. */
    gap: 18px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
}

/* .trust-card — aparência e disposição deste elemento. */
.trust-card {
    background: #fff; /* Define a cor ou o degradê de fundo. */
    border: 1px solid var(--line); /* Define espessura, tipo e cor da borda. */
    border-radius: var(--radius); /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
    padding: 24px; /* Define o espaço interno do elemento. */
    box-shadow: 0 8px 24px rgba(47,63,127,.06); /* Adiciona uma sombra ao elemento. */
}

/* .trust-card h3 — aparência e disposição deste elemento. */
.trust-card h3 {
    font-size: 18px; /* Define o tamanho do texto. */
    margin-top: 16px; /* Define o espaço externo acima. */
}

/* .trust-card p — aparência e disposição deste elemento. */
.trust-card p {
    margin-top: 8px; /* Define o espaço externo acima. */
    font-size: 14px; /* Define o tamanho do texto. */
}

/* .trust-icon — aparência e disposição deste elemento. */
.trust-icon {
    display: inline-flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
    justify-content: center; /* Distribui ou alinha os itens no eixo principal. */
    width: 46px; /* Define a largura; porcentagens acompanham o contêiner. */
    height: 46px; /* Define a altura do elemento. */
    border-radius: 14px; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
    background: #eef1fb; /* Define a cor ou o degradê de fundo. */
    color: var(--blue); /* Define a cor do texto ou do ícone. */
    font-size: 22px; /* Define o tamanho do texto. */
    font-weight: 700; /* Define a espessura do texto. */
}

/* ====================== 06. OPERADORAS E LOGOS ====================== */
/* Cartões brancos, lista completa e controles do carrossel. */

/* .partners — aparência e disposição deste elemento. */
.partners {
    padding-top: 45px; /* Define o espaço interno acima. */
    padding-bottom: 50px; /* Define o espaço interno abaixo. */
    border-bottom: 1px solid var(--line); /* Define a borda inferior. */
}

/* .partners-heading — aparência e disposição deste elemento. */
.partners-heading {
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    gap: 30px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    align-items: end; /* Alinha os itens no eixo transversal ou dentro das células. */
    justify-content: space-between; /* Distribui ou alinha os itens no eixo principal. */
    margin-bottom: 25px; /* Define o espaço externo abaixo. */
}

/* .partners-heading h2 — aparência e disposição deste elemento. */
.partners-heading h2 {
    font-size: 27px; /* Define o tamanho do texto. */
    letter-spacing: -.035em; /* Ajusta o espaçamento entre letras. */
}

/* .partners .eyebrow — aparência e disposição deste elemento. */
.partners .eyebrow {
    font-size: 9px; /* Define o tamanho do texto. */
    margin-bottom: 10px; /* Define o espaço externo abaixo. */
}

/* #partners-pause — aparência e disposição deste elemento. */
#partners-pause {
    min-width: 68px; /* Impede uma largura menor que o valor indicado. */
}

/* .logo-window — aparência e disposição deste elemento. */
.logo-window {
    overflow: hidden; /* Controla conteúdo que ultrapassa os limites do elemento. */
    width: 100%; /* Define a largura; porcentagens acompanham o contêiner. */
    padding: 5px 0; /* Define o espaço interno do elemento. */
    position: relative; /* Define a referência usada para posicionar o elemento. */
    mask-image: linear-gradient(to right,transparent,black 3%,black 97%,transparent); /* Suaviza as bordas visíveis do carrossel com uma máscara. */
}

/* .logo-track — aparência e disposição deste elemento. */
.logo-track {
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    width: max-content; /* Define a largura; porcentagens acompanham o contêiner. */
}

/* .brand-group — aparência e disposição deste elemento. */
.brand-group {
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    gap: 14px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    padding-right: 14px; /* Define o espaço interno à direita. */
}

/* .brand-card — aparência e disposição deste elemento. */
.brand-card {
    width: 166px; /* Define a largura; porcentagens acompanham o contêiner. */
    height: 112px; /* Define a altura do elemento. */
    background: #fff; /* Define a cor ou o degradê de fundo. */
    border: 2px solid var(--line); /* Define espessura, tipo e cor da borda. */
    border-radius: 30px; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
    justify-content: center; /* Distribui ou alinha os itens no eixo principal. */
    flex-direction: column; /* Escolhe se os itens flexíveis ficam em linha ou em coluna. */
    gap: 4px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    padding: 12px 16px; /* Define o espaço interno do elemento. */
    flex-shrink: 0; /* Controla se o item pode encolher quando falta espaço. */
}

/* .brand-card img — aparência e disposição deste elemento. */
.brand-card img {
    width: 120px; /* Define a largura; porcentagens acompanham o contêiner. */
    height: 62px; /* Define a altura do elemento. */
    object-fit: contain; /* Encaixa a imagem: contain preserva tudo; cover preenche o espaço com possível corte. */
}

/* .brand-card span — aparência e disposição deste elemento. */
.brand-card span {
    font-size: 9px; /* Define o tamanho do texto. */
    color: #65708c; /* Define a cor do texto ou do ícone. */
    text-align: center; /* Alinha o texto dentro do elemento. */
    line-height: 1.2; /* Define o espaço vertical ocupado por cada linha. */
}

/* .brand-card.image-missing span — aparência e disposição deste elemento. */
.brand-card.image-missing span {
    font-size: 13px; /* Define o tamanho do texto. */
    font-weight: 700; /* Define a espessura do texto. */
}

/* .partners-foot — aparência e disposição deste elemento. */
.partners-foot {
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
    justify-content: space-between; /* Distribui ou alinha os itens no eixo principal. */
    gap: 20px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    margin-top: 13px; /* Define o espaço externo acima. */
}

/* .partners-foot p — aparência e disposição deste elemento. */
.partners-foot p {
    font-size: 10px; /* Define o tamanho do texto. */
    color: #5e6576; /* Define a cor do texto ou do ícone. */
    margin: 0; /* Define o espaço externo; auto centraliza quando há largura disponível. */
}

/* .plain-button — aparência e disposição deste elemento. */
.plain-button {
    border: 0; /* Define espessura, tipo e cor da borda. */
    background: none; /* Define a cor ou o degradê de fundo. */
    color: var(--navy); /* Define a cor do texto ou do ícone. */
    font-size: 11px; /* Define o tamanho do texto. */
    font-weight: 600; /* Define a espessura do texto. */
    padding: 10px 0; /* Define o espaço interno do elemento. */
    white-space: nowrap; /* Controla quebra de linha e preservação de espaços. */
}

/* .brand-list — aparência e disposição deste elemento. */
.brand-list {
    display: grid; /* Escolhe o modo de exibição ou oculta o elemento. */
    grid-template-columns: repeat(6,1fr); /* Define a quantidade e a proporção das colunas. */
    gap: 14px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    padding-top: 20px; /* Define o espaço interno acima. */
}

/* .brand-list .brand-card — aparência e disposição deste elemento. */
.brand-list .brand-card {
    width: 100%; /* Define a largura; porcentagens acompanham o contêiner. */
}

/* .brand-list[hidden] — estado interativo / visibilidade. */
.brand-list[hidden] {
    display: none; /* Escolhe o modo de exibição ou oculta o elemento. */
}

/* .logo-canvas — aparência e disposição deste elemento. */
.logo-canvas {
    width: 120px; /* Define a largura; porcentagens acompanham o contêiner. */
    height: 62px; /* Define a altura do elemento. */
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
    justify-content: center; /* Distribui ou alinha os itens no eixo principal. */
    flex-shrink: 0; /* Controla se o item pode encolher quando falta espaço. */
    background: #fff; /* Define a cor ou o degradê de fundo. */
}

/* .logo-canvas img — aparência e disposição deste elemento. */
.logo-canvas img {
    max-width: 100%; /* Limita a largura para manter o conteúdo legível. */
    max-height: 100%; /* Limita a altura sem distorcer a imagem. */
    object-fit: contain; /* Encaixa a imagem: contain preserva tudo; cover preenche o espaço com possível corte. */
    object-position: center; /* Define o ponto de alinhamento da imagem dentro do espaço reservado. */
}

/* .brand-card img[hidden] — estado interativo / visibilidade. */
.brand-card img[hidden] {
    display: none; /* Escolhe o modo de exibição ou oculta o elemento. */
}

/* .brand-card.image-missing .logo-canvas — aparência e disposição deste elemento. */
.brand-card.image-missing .logo-canvas {
    display: none; /* Escolhe o modo de exibição ou oculta o elemento. */
}

/* ====================== 07. MODALIDADES DE PLANOS ====================== */
/* Cartões expansíveis e seus estados aberto / fechado. */

/* .product-cards — aparência e disposição deste elemento. */
.product-cards {
    display: grid; /* Escolhe o modo de exibição ou oculta o elemento. */
    grid-template-columns: repeat(3,1fr); /* Define a quantidade e a proporção das colunas. */
    gap: 20px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    align-items: start; /* Alinha os itens no eixo transversal ou dentro das células. */
}

/* .product-card — aparência e disposição deste elemento. */
.product-card {
    height: 100%; /* Define a altura do elemento. */
    border: 1px solid var(--line); /* Define espessura, tipo e cor da borda. */
    border-radius: var(--radius); /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
    overflow: hidden; /* Controla conteúdo que ultrapassa os limites do elemento. */
    background: var(--white); /* Define a cor ou o degradê de fundo. */
    transition: background-color .22s,border-color .22s,box-shadow .22s; /* Suaviza mudanças de propriedades entre os estados do componente. */
}

/* .product-card:hover — estado interativo / visibilidade. */
.product-card:hover {
    box-shadow: 0 8px 28px #2f3f7f12; /* Adiciona uma sombra ao elemento. */
}

/* .product-card summary — aparência e disposição deste elemento. */
.product-card summary {
    padding: 30px; /* Define o espaço interno do elemento. */
    list-style: none; /* Controla os marcadores nativos de listas e resumos. */
    cursor: pointer; /* Define o cursor para indicar a interação disponível. */
}

/* .product-card summary::-webkit-details-marker — estado interativo / visibilidade. */
.product-card summary::-webkit-details-marker {
    display: none; /* Escolhe o modo de exibição ou oculta o elemento. */
}

/* .card-icon — aparência e disposição deste elemento. */
.card-icon {
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    width: 50px; /* Define a largura; porcentagens acompanham o contêiner. */
    height: 50px; /* Define a altura do elemento. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
    justify-content: center; /* Distribui ou alinha os itens no eixo principal. */
    border-radius: 14px; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
    background: #e7ebfc; /* Define a cor ou o degradê de fundo. */
    color: var(--navy); /* Define a cor do texto ou do ícone. */
    font-size: 32px; /* Define o tamanho do texto. */
    margin-bottom: 28px; /* Define o espaço externo abaixo. */
    line-height: 1; /* Define o espaço vertical ocupado por cada linha. */
}

/* .tag — aparência e disposição deste elemento. */
.tag {
    font-size: 9px; /* Define o tamanho do texto. */
    font-weight: 700; /* Define a espessura do texto. */
    letter-spacing: .1em; /* Ajusta o espaçamento entre letras. */
    margin: 0 0 12px; /* Define o espaço externo; auto centraliza quando há largura disponível. */
    display: block; /* Escolhe o modo de exibição ou oculta o elemento. */
}

/* .product-card .product-title — aparência e disposição deste elemento. */
.product-card .product-title {
    display: block; /* Faz o título visual ocupar sua própria linha. */
    font-weight: 700; /* Mantém o peso visual dos títulos de nível três. */
    line-height: 1.14; /* Preserva a altura das linhas do título. */
    letter-spacing: -.04em; /* Mantém o espaçamento da tipografia dos títulos. */
    color: var(--navy); /* Usa a cor principal da identidade. */
    font-size: 24px; /* Define o tamanho do texto. */
    max-width: 250px; /* Limita a largura para manter o conteúdo legível. */
}

/* .product-card .product-description — aparência e disposição deste elemento. */
.product-card .product-description {
    display: block; /* Separa a descrição do título dentro do resumo expansível. */
    font-size: 13px; /* Define o tamanho do texto. */
    margin: 17px 0 25px; /* Define o espaço externo; auto centraliza quando há largura disponível. */
}

/* .card-toggle — aparência e disposição deste elemento. */
.card-toggle {
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    justify-content: space-between; /* Distribui ou alinha os itens no eixo principal. */
    gap: 15px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    font-size: 11px; /* Define o tamanho do texto. */
    font-weight: 600; /* Define a espessura do texto. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
}

/* .card-toggle b — aparência e disposição deste elemento. */
.card-toggle b {
    font-size: 22px; /* Define o tamanho do texto. */
    font-weight: 400; /* Define a espessura do texto. */
}

/* .product-card[open] .card-toggle b — estado interativo / visibilidade. */
.product-card[open] .card-toggle b {
    transform: rotate(45deg); /* Aplica deslocamento ou rotação sem reorganizar o fluxo da página. */
}

/* .card-content — aparência e disposição deste elemento. */
.card-content {
    padding: 0 30px 28px; /* Define o espaço interno do elemento. */
    font-size: 12px; /* Define o tamanho do texto. */
    line-height: 1.7; /* Define o espaço vertical ocupado por cada linha. */
}

/* .card-content p — aparência e disposição deste elemento. */
.card-content p {
    border-top: 1px solid var(--line); /* Define a borda superior. */
    padding-top: 20px; /* Define o espaço interno acima. */
    margin: 0; /* Define o espaço externo; auto centraliza quando há largura disponível. */
}

/* .card-content a — aparência e disposição deste elemento. */
.card-content a {
    font-weight: 600; /* Define a espessura do texto. */
    display: inline-block; /* Escolhe o modo de exibição ou oculta o elemento. */
    margin-top: 18px; /* Define o espaço externo acima. */
    font-size: 11px; /* Define o tamanho do texto. */
}

/* .product-card[open] — estado interativo / visibilidade. */
.product-card[open] {
    background: var(--navy); /* Define a cor ou o degradê de fundo. */
    color: var(--white); /* Define a cor do texto ou do ícone. */
    border-color: var(--navy); /* Altera a cor das bordas. */
    box-shadow: 0 16px 32px #2f3f7f20; /* Adiciona uma sombra ao elemento. */
}

/* .product-card[open] .product-title — estado interativo / visibilidade. */
.product-card[open] .product-title {
    color: #fff; /* Define a cor do texto ou do ícone. */
}

/* .product-card[open] .card-icon — estado interativo / visibilidade. */
.product-card[open] .card-icon {
    background: #ffffff12; /* Define a cor ou o degradê de fundo. */
    color: var(--orange); /* Define a cor do texto ou do ícone. */
}

/* .product-card[open] .tag — estado interativo / visibilidade. */
.product-card[open] .tag {
    color: var(--orange); /* Define a cor do texto ou do ícone. */
}

/* .product-card[open] .card-content p — estado interativo / visibilidade. */
.product-card[open] .card-content p {
    border-color: #ffffff30; /* Altera a cor das bordas. */
}

/* .section-note — aparência e disposição deste elemento. */
.section-note {
    font-size: 10px; /* Define o tamanho do texto. */
    color: #5e6576; /* Define a cor do texto ou do ícone. */
    margin-top: 22px; /* Define o espaço externo acima. */
}

/* .product-card .card-toggle b — aparência e disposição deste elemento. */
.product-card .card-toggle b {
    transition: transform .2s; /* Suaviza mudanças de propriedades entre os estados do componente. */
}

/* ====================== 08. DICA DA LIV ====================== */
/* Imagem, conteúdo e ações da seção de orientação. */

/* .liv-guide — aparência e disposição deste elemento. */
.liv-guide {
    background: linear-gradient(115deg,#f0f3fc 0%,#fff 85%); /* Define a cor ou o degradê de fundo. */
    padding: 74px 0; /* Define o espaço interno do elemento. */
}

/* .liv-guide-grid — aparência e disposição deste elemento. */
.liv-guide-grid {
    display: grid; /* Escolhe o modo de exibição ou oculta o elemento. */
    grid-template-columns: 320px minmax(0,1fr); /* Define a quantidade e a proporção das colunas. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
    gap: clamp(35px,7vw,105px); /* Define o espaço entre os itens de uma grade ou linha flexível. */
}

/* .liv-guide-visual — aparência e disposição deste elemento. */
.liv-guide-visual {
    position: relative; /* Define a referência usada para posicionar o elemento. */
    justify-self: center; /* Alinha apenas este item em sua célula. */
    padding: 18px; /* Define o espaço interno do elemento. */
    background: var(--navy); /* Define a cor ou o degradê de fundo. */
    border-radius: 34px 34px 96px 34px; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
    transform: rotate(-3deg); /* Aplica deslocamento ou rotação sem reorganizar o fluxo da página. */
    box-shadow: 20px 25px 0 #dfe7ff; /* Adiciona uma sombra ao elemento. */
}

/* .liv-guide-visual img — aparência e disposição deste elemento. */
.liv-guide-visual img {
    display: block; /* Escolhe o modo de exibição ou oculta o elemento. */
    width: 225px; /* Define a largura; porcentagens acompanham o contêiner. */
    height: 245px; /* Define a altura do elemento. */
    object-fit: cover; /* Encaixa a imagem: contain preserva tudo; cover preenche o espaço com possível corte. */
    border-radius: 22px 22px 74px 22px; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
}

/* .liv-spark — aparência e disposição deste elemento. */
.liv-spark {
    position: absolute; /* Define a referência usada para posicionar o elemento. */
    right: -20px; /* Define o deslocamento a partir da direita. */
    top: -32px; /* Define o deslocamento a partir do topo. */
    font-size: 60px; /* Define o tamanho do texto. */
    color: var(--orange); /* Define a cor do texto ou do ícone. */
}

/* .liv-guide-copy h2 — aparência e disposição deste elemento. */
.liv-guide-copy h2 {
    max-width: 640px; /* Limita a largura para manter o conteúdo legível. */
}

/* .liv-guide-copy h2 em — aparência e disposição deste elemento. */
.liv-guide-copy h2 em {
    font-style: normal; /* Controla itálico ou texto normal. */
    color: var(--blue); /* Define a cor do texto ou do ícone. */
}

/* .liv-guide-copy>p:not(.eyebrow) — estado interativo / visibilidade. */
.liv-guide-copy>p:not(.eyebrow) {
    font-size: 14px; /* Define o tamanho do texto. */
    max-width: 660px; /* Limita a largura para manter o conteúdo legível. */
}

/* .liv-guide-copy ul — aparência e disposição deste elemento. */
.liv-guide-copy ul {
    list-style: none; /* Controla os marcadores nativos de listas e resumos. */
    padding: 0; /* Define o espaço interno do elemento. */
    margin: 24px 0; /* Define o espaço externo; auto centraliza quando há largura disponível. */
    display: grid; /* Escolhe o modo de exibição ou oculta o elemento. */
    gap: 9px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
}

/* .liv-guide-copy li — aparência e disposição deste elemento. */
.liv-guide-copy li {
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    gap: 15px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    align-items: baseline; /* Alinha os itens no eixo transversal ou dentro das células. */
    font-size: 13px; /* Define o tamanho do texto. */
    font-weight: 600; /* Define a espessura do texto. */
    color: var(--navy); /* Define a cor do texto ou do ícone. */
}

/* .liv-guide-copy li span — aparência e disposição deste elemento. */
.liv-guide-copy li span {
    color: var(--blue); /* Define a cor do texto ou do ícone. */
    font-weight: 800; /* Define a espessura do texto. */
    font-size: 11px; /* Define o tamanho do texto. */
}

/* .liv-guide-actions — aparência e disposição deste elemento. */
.liv-guide-actions {
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
    flex-wrap: wrap; /* Permite quebrar os itens flexíveis em mais de uma linha. */
    gap: 23px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    margin-top: 25px; /* Define o espaço externo acima. */
}

/* .liv-text-link — aparência e disposição deste elemento. */
.liv-text-link {
    font-size: 12px; /* Define o tamanho do texto. */
    font-weight: 700; /* Define a espessura do texto. */
    color: var(--navy); /* Define a cor do texto ou do ícone. */
    border-bottom: 1px solid var(--line); /* Define a borda inferior. */
}

/* ====================== 09. COMPARAÇÃO POR ABAS ====================== */
/* Botões, painéis e recomendações de comparação. */

/* .compare — aparência e disposição deste elemento. */
.compare {
    background: var(--soft); /* Define a cor ou o degradê de fundo. */
}

/* .compare-grid — aparência e disposição deste elemento. */
.compare-grid {
    display: grid; /* Escolhe o modo de exibição ou oculta o elemento. */
    grid-template-columns: 1fr 1fr; /* Define a quantidade e a proporção das colunas. */
    gap: 90px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
}

/* .compare-intro>p:not(.eyebrow) — estado interativo / visibilidade. */
.compare-intro>p:not(.eyebrow) {
    font-size: 14px; /* Define o tamanho do texto. */
    max-width: 420px; /* Limita a largura para manter o conteúdo legível. */
    margin-bottom: 27px; /* Define o espaço externo abaixo. */
}

/* .comparison-tabs — aparência e disposição deste elemento. */
.comparison-tabs {
    display: grid; /* Escolhe o modo de exibição ou oculta o elemento. */
    gap: 8px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    max-width: 450px; /* Limita a largura para manter o conteúdo legível. */
}

/* .comparison-tabs button — aparência e disposição deste elemento. */
.comparison-tabs button {
    border: 1px solid #d4dbee; /* Define espessura, tipo e cor da borda. */
    background: transparent; /* Define a cor ou o degradê de fundo. */
    border-radius: 12px; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
    padding: 17px 21px; /* Define o espaço interno do elemento. */
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    justify-content: space-between; /* Distribui ou alinha os itens no eixo principal. */
    gap: 15px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    text-align: left; /* Alinha o texto dentro do elemento. */
    color: var(--navy); /* Define a cor do texto ou do ícone. */
    font-size: 13px; /* Define o tamanho do texto. */
    font-weight: 600; /* Define a espessura do texto. */
}

/* .comparison-tabs button[aria-selected=true] — estado interativo / visibilidade. */
.comparison-tabs button[aria-selected=true] {
    background: var(--navy); /* Define a cor ou o degradê de fundo. */
    color: #fff; /* Define a cor do texto ou do ícone. */
    border-color: var(--navy); /* Altera a cor das bordas. */
}

/* .compare-panels — aparência e disposição deste elemento. */
.compare-panels {
    min-width: 0; /* Impede uma largura menor que o valor indicado. */
}

/* .compare-panels article — aparência e disposição deste elemento. */
.compare-panels article {
    background: #fff; /* Define a cor ou o degradê de fundo. */
    border-radius: 26px; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
    padding: 35px; /* Define o espaço interno do elemento. */
    min-height: 560px; /* Reserva uma altura mínima. */
    box-shadow: 0 12px 40px #2f3f7f08; /* Adiciona uma sombra ao elemento. */
}

/* .compare-panels article[hidden] — estado interativo / visibilidade. */
.compare-panels article[hidden] {
    display: none; /* Escolhe o modo de exibição ou oculta o elemento. */
}

/* .panel-top — aparência e disposição deste elemento. */
.panel-top {
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    justify-content: space-between; /* Distribui ou alinha os itens no eixo principal. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
    margin-bottom: 27px; /* Define o espaço externo abaixo. */
}

/* .panel-top>span:first-child — estado interativo / visibilidade. */
.panel-top>span:first-child {
    font-size: 10px; /* Define o tamanho do texto. */
    color: #6e7796; /* Define a cor do texto ou do ícone. */
    letter-spacing: .15em; /* Ajusta o espaçamento entre letras. */
}

/* .panel-symbol — aparência e disposição deste elemento. */
.panel-symbol {
    font-size: 38px; /* Define o tamanho do texto. */
    line-height: 1; /* Define o espaço vertical ocupado por cada linha. */
    color: var(--blue); /* Define a cor do texto ou do ícone. */
}

/* .compare-panels .tag — aparência e disposição deste elemento. */
.compare-panels .tag {
    color: var(--blue); /* Define a cor do texto ou do ícone. */
}

/* .compare-panels h3 — aparência e disposição deste elemento. */
.compare-panels h3 {
    font-size: 33px; /* Define o tamanho do texto. */
}

/* .compare-panels article>p:not(.tag) — estado interativo / visibilidade. */
.compare-panels article>p:not(.tag) {
    font-size: 13px; /* Define o tamanho do texto. */
}

/* .compare-panels ul — aparência e disposição deste elemento. */
.compare-panels ul {
    list-style: none; /* Controla os marcadores nativos de listas e resumos. */
    padding: 0; /* Define o espaço interno do elemento. */
    margin: 22px 0; /* Define o espaço externo; auto centraliza quando há largura disponível. */
    font-size: 12px; /* Define o tamanho do texto. */
}

/* .compare-panels li — aparência e disposição deste elemento. */
.compare-panels li {
    padding: 7px 0 7px 20px; /* Define o espaço interno do elemento. */
    position: relative; /* Define a referência usada para posicionar o elemento. */
}

/* .compare-panels li:before — estado interativo / visibilidade. */
.compare-panels li:before {
    content: '✓'; /* Cria o conteúdo de um pseudo-elemento decorativo. */
    position: absolute; /* Define a referência usada para posicionar o elemento. */
    left: 0; /* Define o deslocamento a partir da esquerda. */
    color: var(--blue); /* Define a cor do texto ou do ícone. */
}

/* .takeaway — aparência e disposição deste elemento. */
.takeaway {
    background: var(--soft); /* Define a cor ou o degradê de fundo. */
    padding: 18px 20px; /* Define o espaço interno do elemento. */
    border-radius: 14px; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
    font-size: 11px; /* Define o tamanho do texto. */
}

/* .takeaway strong — aparência e disposição deste elemento. */
.takeaway strong {
    color: var(--navy); /* Define a cor do texto ou do ícone. */
}

/* .takeaway p — aparência e disposição deste elemento. */
.takeaway p {
    margin-top: 7px; /* Define o espaço externo acima. */
}

/* ====================== 10. ETAPAS DA CONTRATAÇÃO ====================== */
/* Lista ordenada com as três etapas do atendimento. */

/* .steps — aparência e disposição deste elemento. */
.steps {
    display: grid; /* Escolhe o modo de exibição ou oculta o elemento. */
    grid-template-columns: repeat(3,1fr); /* Define a quantidade e a proporção das colunas. */
    gap: 45px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    padding: 0; /* Define o espaço interno do elemento. */
    margin: 42px 0 0; /* Define o espaço externo; auto centraliza quando há largura disponível. */
    list-style: none; /* Controla os marcadores nativos de listas e resumos. */
}

/* .steps li — aparência e disposição deste elemento. */
.steps li {
    border-top: 1px solid var(--line); /* Define a borda superior. */
    padding-top: 23px; /* Define o espaço interno acima. */
}

/* .step-number — aparência e disposição deste elemento. */
.step-number {
    display: block; /* Escolhe o modo de exibição ou oculta o elemento. */
    color: var(--blue); /* Define a cor do texto ou do ícone. */
    font-size: 12px; /* Define o tamanho do texto. */
    margin-bottom: 20px; /* Define o espaço externo abaixo. */
    letter-spacing: .1em; /* Ajusta o espaçamento entre letras. */
}

/* .steps h3 — aparência e disposição deste elemento. */
.steps h3 {
    font-size: 21px; /* Define o tamanho do texto. */
}

/* .steps p — aparência e disposição deste elemento. */
.steps p {
    font-size: 13px; /* Define o tamanho do texto. */
}

/* ====================== 11. SEGURO AUTO ====================== */
/* Oferta complementar, preservando o destaque principal em PME. */

/* .auto-insurance — aparência e disposição deste elemento. */
.auto-insurance {
    background: var(--soft); /* Define a cor ou o degradê de fundo. */
    border-top: 1px solid var(--line); /* Define a borda superior. */
    border-bottom: 1px solid var(--line); /* Define a borda inferior. */
    padding: 54px 0; /* Define o espaço interno do elemento. */
}

/* .auto-insurance-grid — aparência e disposição deste elemento. */
.auto-insurance-grid {
    display: grid; /* Escolhe o modo de exibição ou oculta o elemento. */
    grid-template-columns: 1.1fr 1fr; /* Define a quantidade e a proporção das colunas. */
    gap: 64px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
}

/* .auto-insurance-copy h2 — aparência e disposição deste elemento. */
.auto-insurance-copy h2 {
    font-size: clamp(25px,2.5vw,32px); /* Define o tamanho do texto. */
    max-width: 430px; /* Limita a largura para manter o conteúdo legível. */
}

/* .auto-insurance-copy>p:not(.eyebrow) — estado interativo / visibilidade. */
.auto-insurance-copy>p:not(.eyebrow) {
    font-size: 14px; /* Define o tamanho do texto. */
    max-width: 490px; /* Limita a largura para manter o conteúdo legível. */
}

/* .auto-insurance-copy .button — aparência e disposição deste elemento. */
.auto-insurance-copy .button {
    margin-top: 22px; /* Define o espaço externo acima. */
    font-size: 13px; /* Define o tamanho do texto. */
}

/* .auto-insurance-partners h3 — aparência e disposição deste elemento. */
.auto-insurance-partners h3 {
    font-size: 15px; /* Define o tamanho do texto. */
    margin-bottom: 18px; /* Define o espaço externo abaixo. */
}

/* .auto-insurance-brands — aparência e disposição deste elemento. */
.auto-insurance-brands {
    display: grid; /* Escolhe o modo de exibição ou oculta o elemento. */
    grid-template-columns: repeat(3,minmax(0,1fr)); /* Define a quantidade e a proporção das colunas. */
    gap: 10px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    list-style: none; /* Controla os marcadores nativos de listas e resumos. */
    padding: 0; /* Define o espaço interno do elemento. */
    margin: 0; /* Define o espaço externo; auto centraliza quando há largura disponível. */
}

/* .auto-insurance-brands li — aparência e disposição deste elemento. */
.auto-insurance-brands li {
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
    justify-content: center; /* Distribui ou alinha os itens no eixo principal. */
    min-height: 52px; /* Reserva uma altura mínima. */
    padding: 10px; /* Define o espaço interno do elemento. */
    background: #fff; /* Define a cor ou o degradê de fundo. */
    border: 1px solid var(--line); /* Define espessura, tipo e cor da borda. */
    border-radius: 12px; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
    color: var(--navy); /* Define a cor do texto ou do ícone. */
    font-size: 13px; /* Define o tamanho do texto. */
    font-weight: 600; /* Define a espessura do texto. */
    text-align: center; /* Alinha o texto dentro do elemento. */
}

/* .auto-insurance-partners>p — aparência e disposição deste elemento. */
.auto-insurance-partners>p {
    font-size: 11px; /* Define o tamanho do texto. */
    margin-top: 15px; /* Define o espaço externo acima. */
    color: #65708c; /* Define a cor do texto ou do ícone. */
}

#mais{
    background-color: var(--navy);
    color: var(--soft);
}

/* ====================== 12. DÚVIDAS FREQUENTES ====================== */
/* Perguntas expansíveis e links para as fontes. */

/* .faq — aparência e disposição deste elemento. */
.faq {
    background: var(--white); /* Define a cor ou o degradê de fundo. */
}

/* .faq-grid — aparência e disposição deste elemento. */
.faq-grid {
    display: grid; /* Escolhe o modo de exibição ou oculta o elemento. */
    grid-template-columns: .72fr 1.28fr; /* Define a quantidade e a proporção das colunas. */
    gap: 100px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
}

/* .faq-intro — aparência e disposição deste elemento. */
.faq-intro {
    position: relative; /* Define a referência usada para posicionar o elemento. */
}

/* .faq-intro>p:not(.eyebrow) — estado interativo / visibilidade. */
.faq-intro>p:not(.eyebrow) {
    font-size: 14px; /* Define o tamanho do texto. */
    max-width: 280px; /* Limita a largura para manter o conteúdo legível. */
}

/* .faq-decoration — aparência e disposição deste elemento. */
.faq-decoration {
    display: block; /* Escolhe o modo de exibição ou oculta o elemento. */
    font-size: 190px; /* Define o tamanho do texto. */
    line-height: 1; /* Define o espaço vertical ocupado por cada linha. */
    font-weight: 800; /* Define a espessura do texto. */
    color: #e3e7f4; /* Define a cor do texto ou do ícone. */
    margin-top: 40px; /* Define o espaço externo acima. */
}

/* .faq-items details — aparência e disposição deste elemento. */
.faq-items details {
    border-bottom: 1px solid #d8dce6; /* Define a borda inferior. */
    padding: 20px 0; /* Define o espaço interno do elemento. */
}

/* .faq-items details:first-child — estado interativo / visibilidade. */
.faq-items details:first-child {
    padding-top: 0; /* Define o espaço interno acima. */
}

/* .faq-items summary — aparência e disposição deste elemento. */
.faq-items summary {
    font-size: 14px; /* Define o tamanho do texto. */
    color: var(--navy); /* Define a cor do texto ou do ícone. */
    font-weight: 600; /* Define a espessura do texto. */
    cursor: pointer; /* Define o cursor para indicar a interação disponível. */
    list-style: none; /* Controla os marcadores nativos de listas e resumos. */
    position: relative; /* Define a referência usada para posicionar o elemento. */
    padding-right: 25px; /* Define o espaço interno à direita. */
}

/* .faq-items summary::-webkit-details-marker — estado interativo / visibilidade. */
.faq-items summary::-webkit-details-marker {
    display: none; /* Escolhe o modo de exibição ou oculta o elemento. */
}

/* .faq-items summary:after — estado interativo / visibilidade. */
.faq-items summary:after {
    content: '+'; /* Cria o conteúdo de um pseudo-elemento decorativo. */
    position: absolute; /* Define a referência usada para posicionar o elemento. */
    right: 0; /* Define o deslocamento a partir da direita. */
    top: -4px; /* Define o deslocamento a partir do topo. */
    font-weight: 400; /* Define a espessura do texto. */
    font-size: 23px; /* Define o tamanho do texto. */
}

/* .faq-items details[open] summary:after — estado interativo / visibilidade. */
.faq-items details[open] summary:after {
    content: '−'; /* Cria o conteúdo de um pseudo-elemento decorativo. */
}

/* .faq-items p — aparência e disposição deste elemento. */
.faq-items p {
    font-size: 13px; /* Define o tamanho do texto. */
    margin-top: 15px; /* Define o espaço externo acima. */
}

/* .source — aparência e disposição deste elemento. */
.source {
    font-size: 10px; /* Define o tamanho do texto. */
    color: var(--navy); /* Define a cor do texto ou do ícone. */
    text-decoration: underline; /* Controla sublinhado e outras decorações do texto. */
    display: inline-block; /* Escolhe o modo de exibição ou oculta o elemento. */
    margin-top: 12px; /* Define o espaço externo acima. */
}

/* ====================== 13. CHAMADA FINAL PME ====================== */
/* Faixa que conduz ao formulário principal. */

/* .closing — aparência e disposição deste elemento. */
.closing {
    background: var(--navy); /* Define a cor ou o degradê de fundo. */
    color: var(--white); /* Define a cor do texto ou do ícone. */
    padding: 63px 0; /* Define o espaço interno do elemento. */
}

/* .closing-grid — aparência e disposição deste elemento. */
.closing-grid {
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    justify-content: space-between; /* Distribui ou alinha os itens no eixo principal. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
    gap: 60px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
}

/* .closing .eyebrow — aparência e disposição deste elemento. */
.closing .eyebrow {
    color: var(--orange); /* Define a cor do texto ou do ícone. */
    font-size: 10px; /* Define o tamanho do texto. */
}

/* .closing h2 — aparência e disposição deste elemento. */
.closing h2 {
    color: #fff; /* Define a cor do texto ou do ícone. */
    font-size: 36px; /* Define o tamanho do texto. */
}

/* .closing p:not(.eyebrow) — estado interativo / visibilidade. */
.closing p:not(.eyebrow) {
    font-size: 13px; /* Define o tamanho do texto. */
    max-width: 490px; /* Limita a largura para manter o conteúdo legível. */
}

/* .closing .button — aparência e disposição deste elemento. */
.closing .button {
    flex-shrink: 0; /* Controla se o item pode encolher quando falta espaço. */
}

/* ====================== 14. CONTATO E FORMULÁRIO ====================== */
/* Campos, mensagens de erro, estados de foco e botão de envio. */

/* .contact — aparência e disposição deste elemento. */
.contact {
    position: relative; /* Define a referência usada para posicionar o elemento. */
    overflow: hidden; /* Controla conteúdo que ultrapassa os limites do elemento. */
    background: linear-gradient(135deg,#f2f5ff 0%,#fafbff 55%,#eef2fb 100%); /* Define a cor ou o degradê de fundo. */
}

/* .contact:before — estado interativo / visibilidade. */
.contact:before {
    pointer-events: none; /* A decoração do formulário também não deve interceptar cliques ou toques. */
    content: ''; /* Cria o conteúdo de um pseudo-elemento decorativo. */
    position: absolute; /* Define a referência usada para posicionar o elemento. */
    width: 420px; /* Define a largura; porcentagens acompanham o contêiner. */
    height: 420px; /* Define a altura do elemento. */
    left: -180px; /* Define o deslocamento a partir da esquerda. */
    bottom: -200px; /* Define o deslocamento a partir da parte inferior. */
    border: 80px solid #5572e512; /* Define espessura, tipo e cor da borda. */
    border-radius: 50%; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
}

/* .contact-grid — aparência e disposição deste elemento. */
.contact-grid {
    display: grid; /* Escolhe o modo de exibição ou oculta o elemento. */
    grid-template-columns: .9fr 1.1fr; /* Define a quantidade e a proporção das colunas. */
    position: relative; /* Define a referência usada para posicionar o elemento. */
    z-index: 1; /* Define a ordem de sobreposição dos elementos posicionados. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
    gap: clamp(28px,5vw,72px); /* Define o espaço entre os itens de uma grade ou linha flexível. */
}

/* .contact-copy h2 — aparência e disposição deste elemento. */
.contact-copy h2 {
    margin-bottom: 8px; /* Define o espaço externo abaixo. */
    font-size: clamp(28px,3vw,40px); /* Define o tamanho do texto. */
    line-height: 1.15; /* Define o espaço vertical ocupado por cada linha. */
    letter-spacing: -.035em; /* Ajusta o espaçamento entre letras. */
}

/* .contact-benefits — aparência e disposição deste elemento. */
.contact-benefits {
    list-style: none; /* Controla os marcadores nativos de listas e resumos. */
    padding: 0; /* Define o espaço interno do elemento. */
    display: grid; /* Escolhe o modo de exibição ou oculta o elemento. */
    gap: 14px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    margin: 28px 0; /* Define o espaço externo; auto centraliza quando há largura disponível. */
}

/* .contact-benefits li — aparência e disposição deste elemento. */
.contact-benefits li {
    position: relative; /* Define a referência usada para posicionar o elemento. */
    padding-left: 32px; /* Define o espaço interno à esquerda. */
    font-size: 14px; /* Define o tamanho do texto. */
}

/* .contact-benefits li:before — estado interativo / visibilidade. */
.contact-benefits li:before {
    position: absolute; /* Define a referência usada para posicionar o elemento. */
    left: 0; /* Define o deslocamento a partir da esquerda. */
    border-radius: 50%; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
    content: '✓'; /* Cria o conteúdo de um pseudo-elemento decorativo. */
    top: 1px; /* Define o deslocamento a partir do topo. */
    width: 22px; /* Define a largura; porcentagens acompanham o contêiner. */
    height: 22px; /* Define a altura do elemento. */
    display: grid; /* Escolhe o modo de exibição ou oculta o elemento. */
    place-items: center; /* Define de uma vez o alinhamento horizontal e vertical na grade. */
    background: #e2e8fc; /* Define a cor ou o degradê de fundo. */
    color: var(--navy); /* Define a cor do texto ou do ícone. */
    font-size: 12px; /* Define o tamanho do texto. */
    font-weight: 700; /* Define a espessura do texto. */
}

/* .contact-note — aparência e disposição deste elemento. */
.contact-note {
    margin-top: 18px; /* Define o espaço externo acima. */
    font-size: 12px; /* Define o tamanho do texto. */
    color: #6a7390; /* Define a cor do texto ou do ícone. */
    line-height: 1.7; /* Define o espaço vertical ocupado por cada linha. */
    max-width: 390px; /* Limita a largura para manter o conteúdo legível. */
}

/* .contact-form — aparência e disposição deste elemento. */
.contact-form {
    display: grid; /* Escolhe o modo de exibição ou oculta o elemento. */
    grid-template-columns: 1fr 1fr; /* Define a quantidade e a proporção das colunas. */
    background: #fff; /* Define a cor ou o degradê de fundo. */
    padding: clamp(22px,3vw,38px); /* Define o espaço interno do elemento. */
    border: 1px solid #dfe5f3; /* Define espessura, tipo e cor da borda. */
    border-radius: 28px; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
    box-shadow: 0 24px 64px #2f3f7f10; /* Adiciona uma sombra ao elemento. */
    gap: 16px 18px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
}

/* .form-group — aparência e disposição deste elemento. */
.form-group {
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    flex-direction: column; /* Escolhe se os itens flexíveis ficam em linha ou em coluna. */
    gap: 8px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
}

/* .form-group label — aparência e disposição deste elemento. */
.form-group label {
    font-size: 13px; /* Define o tamanho do texto. */
    font-weight: 600; /* Define a espessura do texto. */
    color: var(--navy); /* Define a cor do texto ou do ícone. */
}

/* .form-group input, .form-group select, .form-group textarea — aparência e disposição deste elemento. */
.form-group input, .form-group select, .form-group textarea {
    width: 100%; /* Define a largura; porcentagens acompanham o contêiner. */
    min-height: 48px; /* Reserva uma altura mínima. */
    padding: 12px 14px; /* Define o espaço interno do elemento. */
    border: 1px solid var(--line); /* Define espessura, tipo e cor da borda. */
    border-radius: 14px; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
    background: #fff; /* Define a cor ou o degradê de fundo. */
    color: var(--gray); /* Define a cor do texto ou do ícone. */
    font: inherit; /* Herda ou define a tipografia do elemento. */
    transition: border-color .18s,box-shadow .18s; /* Suaviza mudanças de propriedades entre os estados do componente. */
}

/* .form-group textarea — aparência e disposição deste elemento. */
.form-group textarea {
    min-height: 110px; /* Reserva uma altura mínima. */
    resize: vertical; /* Define se o visitante pode redimensionar o campo. */
}

/* .form-group input:focus, .form-group select:focus, .form-group textarea:focus — estado interativo / visibilidade. */
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; /* Define o contorno que indica foco pelo teclado. */
    border-color: var(--blue); /* Altera a cor das bordas. */
    box-shadow: 0 0 0 4px rgba(85,114,229,.12); /* Adiciona uma sombra ao elemento. */
}

/* .form-group-full — aparência e disposição deste elemento. */
.form-group-full {
    grid-column: 1/-1; /* Define quais colunas da grade o item ocupa. */
}

/* .form-actions — aparência e disposição deste elemento. */
.form-actions {
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    flex-direction: column; /* Escolhe se os itens flexíveis ficam em linha ou em coluna. */
    align-items: flex-start; /* Alinha os itens no eixo transversal ou dentro das células. */
    gap: 10px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    grid-column: 1/-1; /* Define quais colunas da grade o item ocupa. */
}

/* .submit — aparência e disposição deste elemento. */
.submit {
    width: 100%; /* Define a largura; porcentagens acompanham o contêiner. */
}

/* .field-error — aparência e disposição deste elemento. */
.field-error {
    min-height: 18px; /* Reserva uma altura mínima. */
    margin: 0; /* Define o espaço externo; auto centraliza quando há largura disponível. */
    font-size: 12px; /* Define o tamanho do texto. */
    color: #b42318; /* Define a cor do texto ou do ícone. */
}

/* .form-status — aparência e disposição deste elemento. */
.form-status {
    margin: 0; /* Define o espaço externo; auto centraliza quando há largura disponível. */
    font-size: 13px; /* Define o tamanho do texto. */
    color: var(--navy); /* Define a cor do texto ou do ícone. */
}

/* .form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea — aparência e disposição deste elemento. */
.form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea {
    border-color: #b42318; /* Altera a cor das bordas. */
}

/* .contact-form .form-group-full, .contact-form .form-actions — aparência e disposição deste elemento. */
.contact-form .form-group-full, .contact-form .form-actions {
    grid-column: 1/-1; /* Define quais colunas da grade o item ocupa. */
}

/* .contact-copy — aparência e disposição deste elemento. */
.contact-copy {
    max-width: 450px; /* Limita a largura para manter o conteúdo legível. */
}

/* .contact-copy>p:not(.eyebrow):not(.contact-note) — estado interativo / visibilidade. */
.contact-copy>p:not(.eyebrow):not(.contact-note) {
    font-size: 15px; /* Define o tamanho do texto. */
    line-height: 1.8; /* Define o espaço vertical ocupado por cada linha. */
}

/* .form-heading — aparência e disposição deste elemento. */
.form-heading {
    grid-column: 1/-1; /* Define quais colunas da grade o item ocupa. */
    padding-bottom: 20px; /* Define o espaço interno abaixo. */
    margin-bottom: 4px; /* Define o espaço externo abaixo. */
    border-bottom: 1px solid var(--line); /* Define a borda inferior. */
}

/* .form-heading .tag — aparência e disposição deste elemento. */
.form-heading .tag {
    color: var(--blue); /* Define a cor do texto ou do ícone. */
    margin-bottom: 9px; /* Define o espaço externo abaixo. */
}

/* .form-heading h3 — aparência e disposição deste elemento. */
.form-heading h3 {
    font-size: 24px; /* Define o tamanho do texto. */
    letter-spacing: -.025em; /* Ajusta o espaçamento entre letras. */
    margin: 0; /* Define o espaço externo; auto centraliza quando há largura disponível. */
    color: var(--navy); /* Define a cor do texto ou do ícone. */
}

/* .form-heading p — aparência e disposição deste elemento. */
.form-heading p {
    font-size: 12px; /* Define o tamanho do texto. */
    line-height: 1.6; /* Define o espaço vertical ocupado por cada linha. */
    margin: 8px 0 0; /* Define o espaço externo; auto centraliza quando há largura disponível. */
    color: #6a7390; /* Define a cor do texto ou do ícone. */
}

/* .contact-form .form-group — aparência e disposição deste elemento. */
.contact-form .form-group {
    min-width: 0; /* Impede uma largura menor que o valor indicado. */
}

/* .contact-form label — aparência e disposição deste elemento. */
.contact-form label {
    font-size: 12px; /* Define o tamanho do texto. */
}

/* .contact-form label span — aparência e disposição deste elemento. */
.contact-form label span {
    color: var(--blue); /* Define a cor do texto ou do ícone. */
}

/* .contact-form input, .contact-form select, .contact-form textarea — aparência e disposição deste elemento. */
.contact-form input, .contact-form select, .contact-form textarea {
    background: #f8faff; /* Define a cor ou o degradê de fundo. */
    border-color: #dce3f1; /* Altera a cor das bordas. */
    border-radius: 12px; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
    font-size: 14px; /* Define o tamanho do texto. */
    min-height: 50px; /* Reserva uma altura mínima. */
}

/* .contact-form input:hover, .contact-form select:hover, .contact-form textarea:hover — estado interativo / visibilidade. */
.contact-form input:hover, .contact-form select:hover, .contact-form textarea:hover {
    border-color: #a8b6db; /* Altera a cor das bordas. */
}

/* .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus — estado interativo / visibilidade. */
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
    background: #fff; /* Define a cor ou o degradê de fundo. */
}

/* .contact-form ::placeholder — estado interativo / visibilidade. */
.contact-form ::placeholder {
    color: #7c869f; /* Define a cor do texto ou do ícone. */
    opacity: 1; /* Define a transparência, de 0 a 1. */
}

/* .contact-form .field-error — aparência e disposição deste elemento. */
.contact-form .field-error {
    font-size: 11px; /* Define o tamanho do texto. */
    min-height: 15px; /* Reserva uma altura mínima. */
}

/* .contact-form .form-actions — aparência e disposição deste elemento. */
.contact-form .form-actions {
    margin-top: 4px; /* Define o espaço externo acima. */
    align-items: stretch; /* Alinha os itens no eixo transversal ou dentro das células. */
}

/* .contact-form .submit — aparência e disposição deste elemento. */
.contact-form .submit {
    border-radius: 13px; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
    min-height: 54px; /* Reserva uma altura mínima. */
    box-shadow: 0 8px 20px #2f3f7f14; /* Adiciona uma sombra ao elemento. */
}

/* .form-reassurance — aparência e disposição deste elemento. */
.form-reassurance {
    margin: 2px 0 0; /* Define o espaço externo; auto centraliza quando há largura disponível. */
    text-align: center; /* Alinha o texto dentro do elemento. */
    font-size: 11px; /* Define o tamanho do texto. */
    color: #6a7390; /* Define a cor do texto ou do ícone. */
    line-height: 1.6; /* Define o espaço vertical ocupado por cada linha. */
}

/* .contact-form textarea — aparência e disposição deste elemento. */
.contact-form textarea {
    min-height: 110px; /* Reserva uma altura mínima. */
}

/* ====================== 15. RODAPÉ ====================== */
/* Logo, telefone, informação complementar e crédito. */

/* footer — aparência e disposição deste elemento. */
footer {
    background-color: var(--navy); /* Define a cor de fundo. */
}

/* .footer-main — aparência e disposição deste elemento. */
.footer-main {
    display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    justify-content: space-between; /* Distribui ou alinha os itens no eixo principal. */
    align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
    gap: 25px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    padding: 35px 0 25px; /* Define o espaço interno do elemento. */
}

/* .footer-main p, .footer-main>a — aparência e disposição deste elemento. */
.footer-main p, .footer-main>a {
    font-size: 12px; /* Define o tamanho do texto. */
    color: var(--soft); /* Define a cor do texto ou do ícone. */
    margin: 0; /* Define o espaço externo; auto centraliza quando há largura disponível. */
}

/* .footer-main>a — aparência e disposição deste elemento. */
.footer-main>a {
    font-weight: 600; /* Define a espessura do texto. */
}

/* #webnario — aparência e disposição deste elemento. */
#webnario {
    font-size: 12px; /* Define o tamanho do texto. */
    color: #DDC700; /* Define a cor do texto ou do ícone. */
    font-weight: bold; /* Define a espessura do texto. */
}

/* .footer-bottom — aparência e disposição deste elemento. */
.footer-bottom {
    padding: 0 0 28px; /* Define o espaço interno do elemento. */
    color: var(--soft); /* Define a cor do texto ou do ícone. */
    font-size: 10px; /* Define o tamanho do texto. */
    border-top: 1px solid var(--line); /* Define a borda superior. */
}

/* .footer-bottom p — aparência e disposição deste elemento. */
.footer-bottom p {
    margin-top: 12px; /* Define o espaço externo acima. */
}

/* .footer-bottom a — aparência e disposição deste elemento. */
.footer-bottom a {
    text-decoration: underline; /* Controla sublinhado e outras decorações do texto. */
}

/* ====================== RESPONSIVIDADE — ATÉ 1050 PX ====================== */
@media(max-width:1050px) {

    /* nav — aparência e disposição deste elemento. */
    nav {
        gap: 17px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
        font-size: 11px; /* Define o tamanho do texto. */
    }

    /* .hero-grid — aparência e disposição deste elemento. */
    .hero-grid {
        gap: 35px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    }

    /* .hero-photo — aparência e disposição deste elemento. */
    .hero-photo {
        height: 480px; /* Define a altura do elemento. */
    }

    /* .compare-grid, .faq-grid — aparência e disposição deste elemento. */
    .compare-grid, .faq-grid {
        gap: 45px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    }

    /* .product-card summary — aparência e disposição deste elemento. */
    .product-card summary {

        padding: 25px; /* Define o espaço interno do elemento. */
    }

    /* .card-content — aparência e disposição deste elemento. */
    .card-content {
        padding: 0 25px 25px; /* Define o espaço interno do elemento. */
    }

    /* .brand-list — aparência e disposição deste elemento. */
    .brand-list {
        grid-template-columns: repeat(4,1fr); /* Define a quantidade e a proporção das colunas. */
    }

    /* .hero-actions — aparência e disposição deste elemento. */
    .hero-actions {
        gap: 12px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    }

    /* .steps — aparência e disposição deste elemento. */
    .steps {
        gap: 25px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    }

    /* .trust-grid — aparência e disposição deste elemento. */
    .trust-grid {
        grid-template-columns: repeat(2,1fr); /* Define a quantidade e a proporção das colunas. */
    }

    /* .contact-grid — aparência e disposição deste elemento. */
    .contact-grid {
        gap: 32px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    }

}

/* ====================== RESPONSIVIDADE — ATÉ 800 PX ====================== */
@media(max-width:800px) {
    /* Mantém o título das operadoras largo; os controles ficam abaixo. */
    .partners-heading {
        display: block; /* Coloca os controles abaixo do título no celular. */
    }

    /* .wrap — aparência e disposição deste elemento. */
    .wrap {
        width: calc(100% - 40px); /* Define a largura; porcentagens acompanham o contêiner. */
    }

    /* .header — aparência e disposição deste elemento. */
    .header {
        min-height: 74px; /* Reserva uma altura mínima. */
    }

    /* .logo — aparência e disposição deste elemento. */
    .logo {
        width: 125px; /* Define a largura; porcentagens acompanham o contêiner. */
        height: 43px; /* Define a altura do elemento. */
    }

    /* .menu — aparência e disposição deste elemento. */
    .menu {
        display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
        gap: 10px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
        align-items: center; /* Alinha os itens no eixo transversal ou dentro das células. */
        padding: 9px 13px; /* Define o espaço interno do elemento. */
        color: var(--navy); /* Define a cor do texto ou do ícone. */
        border: none; /* Define espessura, tipo e cor da borda. */
        background: #fff; /* Define a cor ou o degradê de fundo. */
        border-radius: 12px; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
        font-size: 20px; /* Define o tamanho do texto. */
        font-weight: bold; /* Define a espessura do texto. */
    }

    /* nav — aparência e disposição deste elemento. */
    nav {
        display: none; /* Escolhe o modo de exibição ou oculta o elemento. */
        position: absolute; /* Define a referência usada para posicionar o elemento. */
        top: 74px; /* Define o deslocamento a partir do topo. */
        left: 0; /* Define o deslocamento a partir da esquerda. */
        right: 0; /* Define o deslocamento a partir da direita. */
        background: #fff; /* Define a cor ou o degradê de fundo. */
        padding: 20px; /* Define o espaço interno do elemento. */
        border-bottom: 1px solid var(--line); /* Define a borda inferior. */
        flex-direction: column; /* Escolhe se os itens flexíveis ficam em linha ou em coluna. */
        align-items: stretch; /* Alinha os itens no eixo transversal ou dentro das células. */
        font-size: 13px; /* Define o tamanho do texto. */
    }

    /* nav.open — aparência e disposição deste elemento. */
    nav.open {
        display: flex; /* Escolhe o modo de exibição ou oculta o elemento. */
    }

    /* nav>a — aparência e disposição deste elemento. */
    nav>a {
        padding: 8px; /* Define o espaço interno do elemento. */
    }

    /* .hero-grid — aparência e disposição deste elemento. */
    .hero-grid {
        grid-template-columns: 1fr; /* Define a quantidade e a proporção das colunas. */
        padding: 45px 0 50px; /* Define o espaço interno do elemento. */
        gap: 32px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    }

    /* .hero-copy — aparência e disposição deste elemento. */
    .hero-copy {
        max-width: 620px; /* Limita a largura para manter o conteúdo legível. */
    }

    /* h1 — aparência e disposição deste elemento. */
    h1 {
        font-size: clamp(38px,7.5vw,55px); /* Define o tamanho do texto. */
    }

    /* .hero .eyebrow — aparência e disposição deste elemento. */
    .hero .eyebrow {
        font-size: 9px; /* Define o tamanho do texto. */
        letter-spacing: .08em; /* Ajusta o espaçamento entre letras. */
    }

    /* .lead — aparência e disposição deste elemento. */
    .lead {
        font-size: 15px; /* Define o tamanho do texto. */
        max-width: 550px; /* Limita a largura para manter o conteúdo legível. */
        margin-top: 22px; /* Define o espaço externo acima. */
        margin-bottom: 26px; /* Define o espaço externo abaixo. */
    }

    /* .hero-benefits — aparência e disposição deste elemento. */
    .hero-benefits {
        margin-top: 24px; /* Define o espaço externo acima. */
        padding-top: 20px; /* Define o espaço interno acima. */
        gap: 13px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    }

    /* .hero-photo — aparência e disposição deste elemento. */
    .hero-photo {
        height: 310px; /* Define a altura do elemento. */
        margin-right: 16px; /* Define o espaço externo à direita. */
    }

    /* .hero-photo>img — aparência e disposição deste elemento. */
    .hero-photo>img {
        border-radius: 55px 18px 18px 18px; /* Arredonda os cantos, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. */
        object-position: center 45%; /* Define o ponto de alinhamento da imagem dentro do espaço reservado. */
    }

    /* .photo-caption — aparência e disposição deste elemento. */
    .photo-caption {
        left: 12px; /* Define o deslocamento a partir da esquerda. */
        bottom: 15px; /* Define o deslocamento a partir da parte inferior. */
        padding: 15px; /* Define o espaço interno do elemento. */
        font-size: 11px; /* Define o tamanho do texto. */
        max-width: 280px; /* Limita a largura para manter o conteúdo legível. */
        gap: 12px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    }

    /* .caption-icon — aparência e disposição deste elemento. */
    .caption-icon {
        font-size: 25px; /* Define o tamanho do texto. */
    }

    /* .vertical-label — aparência e disposição deste elemento. */
    .vertical-label {
        right: -23px; /* Define o deslocamento a partir da direita. */
        top: 35px; /* Define o deslocamento a partir do topo. */
        font-size: 8px; /* Define o tamanho do texto. */
    }

    /* .section — aparência e disposição deste elemento. */
    .section {
        padding: 55px 0; /* Define o espaço interno do elemento. */
    }

    /* .partners — aparência e disposição deste elemento. */
    .partners {
        padding: 30px 0 35px; /* Define o espaço interno do elemento. */
    }

    /* .partners-heading — aparência e disposição deste elemento. */
    .partners-heading {
        align-items: start; /* Alinha os itens no eixo transversal ou dentro das células. */
        gap: 15px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    }

    /* .partners-heading h2 — aparência e disposição deste elemento. */
    .partners-heading h2 {
        font-size: 22px; /* Define o tamanho do texto. */
    }

    /* .partners .eyebrow — aparência e disposição deste elemento. */
    .partners .eyebrow {
        font-size: 8px; /* Define o tamanho do texto. */
        max-width: 180px; /* Limita a largura para manter o conteúdo legível. */
    }

    /* #partners-pause — aparência e disposição deste elemento. */
    #partners-pause {
        min-width: 55px; /* Impede uma largura menor que o valor indicado. */
    }

    /* .brand-card — aparência e disposição deste elemento. */
    .brand-card {
        width: 150px; /* Define a largura; porcentagens acompanham o contêiner. */
        height: 105px; /* Define a altura do elemento. */
    }

    /* .brand-list — aparência e disposição deste elemento. */
    .brand-list {
        grid-template-columns: repeat(2,1fr); /* Define a quantidade e a proporção das colunas. */
    }

    /* .partners-foot — aparência e disposição deste elemento. */
    .partners-foot {
        display: block; /* Escolhe o modo de exibição ou oculta o elemento. */
    }

    /* .partners-foot p — aparência e disposição deste elemento. */
    .partners-foot p {
        font-size: 9px; /* Define o tamanho do texto. */
    }

    /* .partners-foot button — aparência e disposição deste elemento. */
    .partners-foot button {
        font-size: 10px; /* Define o tamanho do texto. */
    }

    /* .section-heading — aparência e disposição deste elemento. */
    .section-heading {
        display: block; /* Escolhe o modo de exibição ou oculta o elemento. */
        margin-bottom: 27px; /* Define o espaço externo abaixo. */
    }

    /* .section-heading>p — aparência e disposição deste elemento. */
    .section-heading>p {
        margin-top: 18px; /* Define o espaço externo acima. */
        max-width: 550px; /* Limita a largura para manter o conteúdo legível. */
        font-size: 13px; /* Define o tamanho do texto. */
    }

    /* .product-cards — aparência e disposição deste elemento. */
    .product-cards {
        grid-template-columns: 1fr; /* Define a quantidade e a proporção das colunas. */
        gap: 15px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    }

    /* .product-card .product-title — aparência e disposição deste elemento. */
    .product-card .product-title {
        max-width: none; /* Limita a largura para manter o conteúdo legível. */
        font-size: 25px; /* Define o tamanho do texto. */
    }

    /* .product-card summary — aparência e disposição deste elemento. */
    .product-card summary {
        padding: 25px; /* Define o espaço interno do elemento. */
    }

    /* .card-icon — aparência e disposição deste elemento. */
    .card-icon {
        margin-bottom: 20px; /* Define o espaço externo abaixo. */
    }

    /* .product-card .product-description — aparência e disposição deste elemento. */
    .product-card .product-description {
        max-width: 500px; /* Limita a largura para manter o conteúdo legível. */
        margin-bottom: 20px; /* Define o espaço externo abaixo. */
    }

    /* .compare-grid — aparência e disposição deste elemento. */
    .compare-grid {
        grid-template-columns: 1fr; /* Define a quantidade e a proporção das colunas. */
        gap: 25px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    }

    /* .compare-intro>p:not(.eyebrow) — estado interativo / visibilidade. */
    .compare-intro>p:not(.eyebrow) {
        max-width: 550px; /* Limita a largura para manter o conteúdo legível. */
    }

    /* .comparison-tabs — aparência e disposição deste elemento. */
    .comparison-tabs {
        max-width: none; /* Limita a largura para manter o conteúdo legível. */
        grid-template-columns: repeat(2,1fr); /* Define a quantidade e a proporção das colunas. */
        gap: 8px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    }

    /* .comparison-tabs button — aparência e disposição deste elemento. */
    .comparison-tabs button {
        padding: 15px 13px; /* Define o espaço interno do elemento. */
        font-size: 11px; /* Define o tamanho do texto. */
    }

    /* .compare-panels article — aparência e disposição deste elemento. */
    .compare-panels article {
        min-height: 0; /* Reserva uma altura mínima. */
        padding: 28px; /* Define o espaço interno do elemento. */
    }

    /* .compare-panels h3 — aparência e disposição deste elemento. */
    .compare-panels h3 {
        font-size: 30px; /* Define o tamanho do texto. */
    }

    /* .panel-top — aparência e disposição deste elemento. */
    .panel-top {
        margin-bottom: 23px; /* Define o espaço externo abaixo. */
    }

    /* .steps — aparência e disposição deste elemento. */
    .steps {
        grid-template-columns: 1fr; /* Define a quantidade e a proporção das colunas. */
        gap: 30px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
        margin-top: 28px; /* Define o espaço externo acima. */
    }

    /* .steps li — aparência e disposição deste elemento. */
    .steps li {
        padding-top: 20px; /* Define o espaço interno acima. */
    }

    /* .step-number — aparência e disposição deste elemento. */
    .step-number {
        margin-bottom: 12px; /* Define o espaço externo abaixo. */
    }

    /* .steps p — aparência e disposição deste elemento. */
    .steps p {
        max-width: 550px; /* Limita a largura para manter o conteúdo legível. */
    }

    /* .faq-grid — aparência e disposição deste elemento. */
    .faq-grid {
        grid-template-columns: 1fr; /* Define a quantidade e a proporção das colunas. */
        gap: 28px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    }

    /* .faq-intro h2 br — aparência e disposição deste elemento. */
    .faq-intro h2 br {
        display: none; /* Escolhe o modo de exibição ou oculta o elemento. */
    }

    /* .faq-intro>p:not(.eyebrow) — estado interativo / visibilidade. */
    .faq-intro>p:not(.eyebrow) {
        max-width: 550px; /* Limita a largura para manter o conteúdo legível. */
    }

    /* .faq-decoration — aparência e disposição deste elemento. */
    .faq-decoration {
        display: none; /* Escolhe o modo de exibição ou oculta o elemento. */
    }

    /* .faq-items summary — aparência e disposição deste elemento. */
    .faq-items summary {
        font-size: 13px; /* Define o tamanho do texto. */
    }

    /* .closing — aparência e disposição deste elemento. */
    .closing {
        padding: 45px 0; /* Define o espaço interno do elemento. */
    }

    /* .closing-grid — aparência e disposição deste elemento. */
    .closing-grid {
        display: block; /* Escolhe o modo de exibição ou oculta o elemento. */
    }

    /* .closing h2 — aparência e disposição deste elemento. */
    .closing h2 {
        font-size: 31px; /* Define o tamanho do texto. */
    }

    /* .closing .button — aparência e disposição deste elemento. */
    .closing .button {
        margin-top: 24px; /* Define o espaço externo acima. */
    }

    /* .footer-main — aparência e disposição deste elemento. */
    .footer-main {
        flex-wrap: wrap; /* Permite quebrar os itens flexíveis em mais de uma linha. */
        gap: 20px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    }

    /* .footer-main p — aparência e disposição deste elemento. */
    .footer-main p {
        order: 3; /* Muda a ordem visual de um item flexível. */
        width: 100%; /* Define a largura; porcentagens acompanham o contêiner. */
    }

    /* .footer-bottom — aparência e disposição deste elemento. */
    .footer-bottom {
        font-size: 9px; /* Define o tamanho do texto. */
    }

    /* .hero-actions .button — aparência e disposição deste elemento. */
    .hero-actions .button {
        font-size: 12px; /* Define o tamanho do texto. */
        padding: 17px 20px; /* Define o espaço interno do elemento. */
    }

    /* .trust-grid — aparência e disposição deste elemento. */
    .trust-grid {
        grid-template-columns: 1fr; /* Define a quantidade e a proporção das colunas. */
    }

    /* .contact-grid — aparência e disposição deste elemento. */
    .contact-grid {
        grid-template-columns: 1fr; /* Define a quantidade e a proporção das colunas. */
        gap: 30px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    }

    /* .contact-form — aparência e disposição deste elemento. */
    .contact-form {
        padding: 22px; /* Define o espaço interno do elemento. */
        grid-template-columns: 1fr; /* Define a quantidade e a proporção das colunas. */
    }

    /* .contact-copy h2 — aparência e disposição deste elemento. */
    .contact-copy h2 {
        font-size: 26px; /* Define o tamanho do texto. */
    }

    /* .liv-guide-grid — aparência e disposição deste elemento. */
    .liv-guide-grid {
        grid-template-columns: 1fr; /* Define a quantidade e a proporção das colunas. */
        gap: 35px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    }

    /* .liv-guide-visual — aparência e disposição deste elemento. */
    .liv-guide-visual {
        justify-self: start; /* Alinha apenas este item em sua célula. */
        margin-left: 16px; /* Define o espaço externo à esquerda. */
    }

    /* .liv-guide-visual img — aparência e disposição deste elemento. */
    .liv-guide-visual img {
        width: 165px; /* Define a largura; porcentagens acompanham o contêiner. */
        height: 190px; /* Define a altura do elemento. */
    }

    /* .liv-guide — aparência e disposição deste elemento. */
    .liv-guide {
        padding: 60px 0; /* Define o espaço interno do elemento. */
    }

    /* .contact-copy — aparência e disposição deste elemento. */
    .contact-copy {
        max-width: none; /* Limita a largura para manter o conteúdo legível. */
    }

    /* .form-heading h3 — aparência e disposição deste elemento. */
    .form-heading h3 {
        font-size: 22px; /* Define o tamanho do texto. */
    }

    /* .auto-insurance — aparência e disposição deste elemento. */
    .auto-insurance {
        padding: 40px 0; /* Define o espaço interno do elemento. */
    }

    /* .auto-insurance-grid — aparência e disposição deste elemento. */
    .auto-insurance-grid {
        grid-template-columns: 1fr; /* Define a quantidade e a proporção das colunas. */
        gap: 28px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    }

}

/* ====================== RESPONSIVIDADE — ATÉ 560 PX ====================== */
@media(max-width:560px) {

    /* .contact-form — aparência e disposição deste elemento. */
    .contact-form {
        padding: 18px; /* Define o espaço interno do elemento. */
    }

    /* .submit — aparência e disposição deste elemento. */
    .submit {
        font-size: 12px; /* Define o tamanho do texto. */
    }

    /* .liv-guide-actions .button — aparência e disposição deste elemento. */
    .liv-guide-actions .button {
        width: 100%; /* Define a largura; porcentagens acompanham o contêiner. */
    }

    /* .liv-guide-copy h2 — aparência e disposição deste elemento. */
    .liv-guide-copy h2 {
        font-size: 29px; /* Define o tamanho do texto. */
    }

    /* .liv-guide-visual — aparência e disposição deste elemento. */
    .liv-guide-visual {
        margin-left: 0; /* Define o espaço externo à esquerda. */
    }

}

/* ====================== RESPONSIVIDADE — ATÉ 380 PX ====================== */
@media(max-width:380px) {

    /* .partners-heading — aparência e disposição deste elemento. */
    .partners-heading {
        display: block; /* Escolhe o modo de exibição ou oculta o elemento. */
    }

    /* .hero-actions — aparência e disposição deste elemento. */
    .hero-actions {
        display: block; /* Escolhe o modo de exibição ou oculta o elemento. */
    }

    /* .hero-actions .button — aparência e disposição deste elemento. */
    .hero-actions .button {
        width: 100%; /* Define a largura; porcentagens acompanham o contêiner. */
        font-size: 11px; /* Define o tamanho do texto. */
    }

    /* .secondary — aparência e disposição deste elemento. */
    .secondary {
        display: inline-block; /* Escolhe o modo de exibição ou oculta o elemento. */
        margin-top: 13px; /* Define o espaço externo acima. */
    }

    /* .comparison-tabs button — aparência e disposição deste elemento. */
    .comparison-tabs button {
        font-size: 10px; /* Define o tamanho do texto. */
        gap: 7px; /* Define o espaço entre os itens de uma grade ou linha flexível. */
    }

    /* .auto-insurance-brands — aparência e disposição deste elemento. */
    .auto-insurance-brands {
        grid-template-columns: repeat(2,minmax(0,1fr)); /* Define a quantidade e a proporção das colunas. */
    }

}

/* ====================== ACESSIBILIDADE — MENOS MOVIMENTO ====================== */
@media(prefers-reduced-motion:reduce) {

    /* html — aparência e disposição deste elemento. */
    html {
        scroll-behavior: auto; /* Define como a página se desloca ao navegar por âncoras. */
    }

    /* .button — aparência e disposição deste elemento. */
    .button {
        transition: none; /* Suaviza mudanças de propriedades entre os estados do componente. */
    }

    /* .button:hover — estado interativo / visibilidade. */
    .button:hover {
        transform: none; /* Aplica deslocamento ou rotação sem reorganizar o fluxo da página. */
    }

    /* .product-card, .product-card .card-toggle b — aparência e disposição deste elemento. */
    .product-card, .product-card .card-toggle b {
        transition: none; /* Suaviza mudanças de propriedades entre os estados do componente. */
    }

}

/* ====================== ORIENTAÇÃO DA COTAÇÃO ============================ */
/* O texto acompanha o tipo escolhido, sem alterar a grade dos campos. */
.form-context {
    margin: 0; /* Evita espaço externo extra abaixo da seleção. */
    color: #65708c; /* Mantém a orientação em um tom secundário legível. */
    font-size: 12px; /* Dá menos destaque que os rótulos dos campos. */
    line-height: 1.6; /* Mantém a leitura confortável quando o texto quebra. */
}