/* Estilo Linhas (discadora-automatica.com). So vale no site publico e nas telas de entrar/criar conta. Fundo anil leva
   sempre letra branca (regra do Alexandre). */
.estilo-linhas {
	--anil: #1A2B8F;
	--anil-fundo: #13206E;
	--anil-claro: #E6EBFA;
	--sinal: #FF6B1A;
	--sinal-forte: #E85600;
	--tinta: #0E1530;
	--tinta-suave: #4A5578;
	--papel: #FFFFFF;
	--gelo: #F1F4FB;
	--nevoa: #F1F4FB;
	--linha: #D3DBEF;
	--acento: #FF6B1A;
	--acento-forte: #E85600;
	--sobre-acento: #0E1530;
	--acento-claro: #FFE1CF;
	--escuro: #1A2B8F;
	--sobre-escuro: #FFFFFF;
	--fonte-titulo: "Archivo", system-ui, sans-serif;
	--fonte-texto: "Atkinson Hyperlegible", system-ui, sans-serif;
	--raio-botao: 6px;
}
html:has(.estilo-linhas) { overflow-x: clip; }
.estilo-linhas.site-publico { background: var(--papel); color: var(--tinta); font-family: var(--fonte-texto); font-size: 1.0625rem; overflow-x: clip; }
.estilo-linhas h1, .estilo-linhas h2, .estilo-linhas h3 { font-family: var(--fonte-titulo); font-stretch: 118%; letter-spacing: -.01em; }
.estilo-linhas :focus-visible { outline: 3px solid var(--sinal); outline-offset: 3px; }
.dl-largura { width: min(100% - 2rem, 76rem); margin-inline: auto; }

/* botoes */
.dl-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.375rem; border-radius: 6px; border: 2px solid transparent; font: 700 1rem/1 var(--fonte-texto); text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.dl-botao-sinal { background: var(--sinal); color: var(--tinta); }
.dl-botao-sinal:hover { background: #FF8A47; }
.dl-botao-linha { border-color: rgb(255 255 255 / .7); color: #FFFFFF; }
.dl-botao-linha:hover { background: #FFFFFF; color: var(--anil); }

/* marca e topo (faixa anil, letra branca) */
.dl-marca { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; color: inherit; font: 800 1.125rem/1 var(--fonte-titulo); font-stretch: 118%; white-space: nowrap; }
.dl-marca svg { width: 2.25rem; height: 2.25rem; flex: none; }
.dl-marca-fundo { fill: #FFFFFF; }
.dl-marca-traco { stroke: var(--anil); }
.dl-marca-ponto { fill: var(--sinal); }
.estilo-linhas .dl-topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem max(1rem, (100% - 76rem) / 2); background: var(--anil); color: #FFFFFF; border-bottom: 1px solid rgb(255 255 255 / .14); backdrop-filter: none; }
.estilo-linhas .dl-menu { display: flex; align-items: center; gap: 1.75rem; }
.estilo-linhas .dl-menu a:not(.dl-botao) { color: #FFFFFF; font-weight: 700; text-decoration: none; white-space: nowrap; opacity: .86; }
.estilo-linhas .dl-menu a:not(.dl-botao):hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.estilo-linhas .dl-menu .dl-botao { min-height: 2.625rem; }
@media (width < 60rem) {
	.estilo-linhas .dl-topo .menu-abrir { display: inline-grid; background: rgb(255 255 255 / .12); color: #FFFFFF; }
	.estilo-linhas .dl-menu { background: var(--anil-fundo); gap: 0; }
	.estilo-linhas .dl-menu .menu-fechar { background: rgb(255 255 255 / .12); color: #FFFFFF; }
	.estilo-linhas .dl-menu a:not(.dl-botao) { opacity: 1; border-bottom: 1px solid rgb(255 255 255 / .16); color: #FFFFFF; }
	.estilo-linhas .dl-menu .dl-botao { margin-top: 1.25rem; width: 100%; min-height: 3.25rem; }
}

/* hero: o painel de linhas */
.dl-hero { background: var(--anil); color: #FFFFFF; padding: clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem, 7vw, 6rem); }
.dl-hero-grade { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.dl-hero h1 { font-size: clamp(2.375rem, 1.2rem + 4.2vw, 4.5rem); line-height: 1; font-weight: 800; max-width: 13ch; color: #FFFFFF; }
.dl-hero-texto p { margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.55; max-width: 40ch; color: #FFFFFF; }
.dl-acoes { display: flex; gap: .75rem; margin-top: 2.25rem; }
.dl-painel { margin: 0; padding: 1.25rem; border-radius: 12px; background: var(--anil-fundo); border: 1px solid rgb(255 255 255 / .14); }
.dl-painel ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.dl-linha { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .875rem 1rem; border-radius: 8px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); color: #FFFFFF; }
.dl-numero { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.dl-estado { display: grid; justify-items: end; }
.dl-estado > span { grid-area: 1 / 1; padding: .3125rem .75rem; border-radius: 999px; font-size: .875rem; font-weight: 700; white-space: nowrap; }
.dl-chamando { border: 1px solid rgb(255 255 255 / .45); color: #FFFFFF; opacity: 0; }
.dl-resultado { background: rgb(255 255 255 / .12); color: #FFFFFF; }
.dl-fim-caixa .dl-numero, .dl-fim-nao .dl-numero { opacity: .55; }
.dl-fim-caixa .dl-numero { text-decoration: line-through; text-decoration-thickness: 2px; }
.dl-fim-gente { background: rgb(255 107 26 / .14); border-color: var(--sinal); }
.dl-fim-gente .dl-resultado { background: var(--sinal); color: var(--tinta); }
.dl-painel figcaption { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .9375rem; color: #FFFFFF; opacity: .86; }
.dl-painel figcaption svg { width: 1.125rem; height: 1.125rem; color: var(--sinal); flex: none; }
@media (prefers-reduced-motion: no-preference) {
	.dl-chamando { animation: dl-chama 1.6s ease both; animation-delay: calc(var(--i) * .35s); }
	.dl-resultado { animation: dl-resolve .4s ease both; animation-delay: calc(var(--i) * .35s + 1.4s); }
	.dl-fim-caixa .dl-numero, .dl-fim-nao .dl-numero { animation: dl-apaga .4s ease both; animation-delay: calc(var(--i) * .35s + 1.4s); }
	@keyframes dl-chama { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
	@keyframes dl-resolve { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
	@keyframes dl-apaga { from { opacity: 1; text-decoration-color: transparent; } to { opacity: .55; } }
}

/* secoes */
.dl-secao { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.dl-secao-gelo { background: var(--gelo); }
.dl-secao h2, .dl-final h2, .dl-preco h2 { font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3rem); line-height: 1.05; font-weight: 800; max-width: 20ch; }
.dl-dupla { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }

/* trilho dos quatro passos (sequencia real) */
.dl-trilho { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; position: relative; }
.dl-trilho::before { content: ""; position: absolute; left: 1.75rem; right: calc((100% - 6rem) / 4 - 1.75rem); top: 1.75rem; height: 2px; background: repeating-linear-gradient(90deg, var(--anil) 0 10px, transparent 10px 18px); }
.dl-trilho li { position: relative; min-width: 0; }
.dl-trilho-marca { position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--anil); color: #FFFFFF; }
.dl-trilho li:last-child .dl-trilho-marca { background: var(--sinal); color: var(--tinta); }
.dl-trilho-marca svg { width: 1.5rem; height: 1.5rem; }
.dl-trilho b { display: block; margin-top: 1.25rem; font: 800 1.25rem/1.2 var(--fonte-titulo); font-stretch: 112%; }
.dl-trilho p { margin-top: .5rem; color: var(--tinta-suave); line-height: 1.55; }

/* controles da campanha */
.dl-controles { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.dl-controles div { padding-top: 1.125rem; border-top: 2px solid var(--anil); min-width: 0; }
.dl-controles dt { display: flex; align-items: center; gap: .625rem; font-weight: 700; font-size: 1.0625rem; }
.dl-controles dt svg { width: 1.375rem; height: 1.375rem; color: var(--anil); flex: none; }
.dl-controles dd { margin: .375rem 0 0; color: var(--tinta-suave); line-height: 1.5; }

/* relatorios */
.dl-relatorios { list-style: none; margin: 0; padding: 0; }
.dl-relatorios li { display: grid; grid-template-columns: 1.75rem 10.5rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: 1.125rem 0; border-bottom: 1px solid var(--linha); }
.dl-relatorios li:first-child { border-top: 1px solid var(--linha); }
.dl-relatorios svg { width: 1.5rem; height: 1.5rem; color: var(--anil); }
.dl-relatorios b { font: 800 1.1875rem/1.2 var(--fonte-titulo); font-stretch: 112%; }
.dl-relatorios span { color: var(--tinta-suave); }

/* preco (faixa anil, letra branca) */
.dl-preco { background: var(--anil); color: #FFFFFF; padding: clamp(3.5rem, 7vw, 6rem) 0; }
.dl-preco h2, .dl-preco h3 { color: #FFFFFF; }
.dl-preco-grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.dl-preco-livre p { color: #FFFFFF; }
.dl-valor { margin-top: 1.5rem; font: 800 clamp(3.5rem, 2rem + 6vw, 6rem)/1 var(--fonte-titulo); font-stretch: 125%; letter-spacing: -.02em; white-space: nowrap; }
.dl-valor span { font-size: .35em; margin-right: .25rem; vertical-align: .9em; }
.dl-preco-extra { margin: .5rem 0 2rem; opacity: .86; }
.dl-planos h3 { font-size: 1.5rem; font-weight: 800; }
.dl-planos > p { margin-top: .375rem; opacity: .86; }
.dl-planos ul { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; }
.dl-planos li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.125rem 1.25rem; border-radius: 8px; border: 1px solid rgb(255 255 255 / .22); background: rgb(255 255 255 / .05); }
.dl-planos li.dl-plano-destaque { border-color: var(--sinal); background: rgb(255 107 26 / .14); }
.dl-plano-nome, .dl-plano-valor { display: grid; min-width: 0; }
.dl-plano-nome b { font: 800 1.125rem/1.2 var(--fonte-titulo); font-stretch: 112%; white-space: nowrap; }
.dl-plano-nome small, .dl-plano-valor small { opacity: .8; font-size: .875rem; white-space: nowrap; }
.dl-plano-valor { text-align: right; }
.dl-plano-valor b { font: 800 1.375rem/1.1 var(--fonte-titulo); white-space: nowrap; }

/* duvidas */
.dl-duvidas { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; align-items: start; }
.dl-duvidas details { border-bottom: 1px solid var(--linha); }
.dl-duvidas summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.125rem 0; font-weight: 700; cursor: pointer; list-style: none; }
.dl-duvidas summary::-webkit-details-marker { display: none; }
.dl-duvidas summary::after { content: ""; flex: none; width: .625rem; height: .625rem; border-right: 2px solid var(--anil); border-bottom: 2px solid var(--anil); rotate: 45deg; translate: 0 -.2rem; transition: rotate .15s ease; }
.dl-duvidas details[open] summary::after { rotate: 225deg; translate: 0 .15rem; }
.dl-duvidas p { padding: 0 0 1.25rem; color: var(--tinta-suave); line-height: 1.65; }

/* chamada final */
.dl-final { padding: clamp(3rem, 6vw, 4.5rem) 0; background: var(--gelo); border-top: 1px solid var(--linha); }
.dl-final-grade { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

/* rodape */
.estilo-linhas .dl-rodape { background: var(--anil-fundo); color: #FFFFFF; padding: 0; }
.dl-rodape-grade { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding: 2.5rem 0; }
.dl-rodape nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem 1.5rem; max-width: 40rem; }
.dl-rodape nav a { color: #FFFFFF; opacity: .86; text-decoration: none; white-space: nowrap; }
.dl-rodape nav a:hover { opacity: 1; text-decoration: underline; }
.dl-rodape-final { padding: 1.25rem 0 1.75rem; border-top: 1px solid rgb(255 255 255 / .14); color: #FFFFFF; opacity: .8; font-size: .875rem; }

/* blog e paginas internas */
.estilo-linhas .pagina { width: min(100% - 2rem, 76rem); margin-inline: auto; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.estilo-linhas .pagina-topo h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); font-weight: 800; }
.estilo-linhas .pagina-topo p { color: var(--tinta-suave); max-width: 52ch; }
.estilo-linhas .posts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.25rem; }
.estilo-linhas .posts a { border: 1px solid var(--linha); border-top: 4px solid var(--anil); border-radius: 8px; padding: 1.5rem; }
.estilo-linhas .posts a:hover { border-color: var(--anil); }
.estilo-linhas .post-categoria { background: var(--anil); color: #FFFFFF; border-radius: 4px; }
.estilo-linhas .posts strong { font-family: var(--fonte-titulo); font-stretch: 112%; font-weight: 800; }
.estilo-linhas .artigo h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.125rem); font-weight: 800; line-height: 1.05; }
.estilo-linhas .artigo-conteudo { font-size: 1.125rem; line-height: 1.7; }
.estilo-linhas .artigo-conteudo h2 { font-weight: 800; }
.estilo-linhas .artigo-conteudo a { text-decoration-color: var(--sinal); }
.estilo-linhas .artigo-chamada { background: var(--anil); color: #FFFFFF; border-radius: 12px; }
.estilo-linhas .migalhas a { color: var(--anil); }
.estilo-linhas .botao-acento { background: var(--sinal); color: var(--tinta); border-radius: 6px; }
.estilo-linhas .botao-acento:hover { background: #FF8A47; }
.estilo-linhas .campo input:focus, .estilo-linhas .campo select:focus, .estilo-linhas .campo textarea:focus { border-color: var(--anil); box-shadow: 0 0 0 4px var(--anil-claro); }

/* entrar e criar conta: lado anil com letra branca */
.acesso.estilo-linhas { font-family: var(--fonte-texto); }
.acesso.estilo-linhas .acesso-lado { background: var(--anil); color: #FFFFFF; }
.acesso.estilo-linhas .acesso-lado h1 { font-family: var(--fonte-titulo); font-stretch: 118%; color: #FFFFFF; }
.acesso.estilo-linhas .acesso-lado p { color: #FFFFFF; opacity: .86; }
.acesso.estilo-linhas .acesso-lista li::before { border-radius: 2px; background: var(--sinal); }
.acesso.estilo-linhas .marca-clara { color: #FFFFFF; font-family: var(--fonte-titulo); }
.acesso.estilo-linhas .marca-quadrado { background: url("favicon.svg") center / contain no-repeat; border-radius: 8px; }
.acesso.estilo-linhas .acesso-form h2 { font-family: var(--fonte-titulo); font-stretch: 112%; }
.acesso.estilo-linhas .botao-acento { background: var(--sinal); color: var(--tinta); border-radius: 6px; }
.acesso.estilo-linhas .campo input { border-radius: 6px; }
.acesso.estilo-linhas .campo input:focus { border-color: var(--anil); }
.acesso.estilo-linhas .acesso-rodape a { color: var(--anil); }

/* telas menores */
@media (width < 60rem) {
	.dl-hero-grade, .dl-dupla, .dl-preco-grade { grid-template-columns: 1fr; }
	.dl-hero-grade > *, .dl-dupla > *, .dl-preco-grade > * { min-width: 0; }
	.dl-trilho { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
	.dl-trilho::before { display: none; }
	.dl-duvidas { grid-template-columns: 1fr; }
	.dl-rodape-grade { flex-direction: column; }
	.dl-rodape nav { justify-content: flex-start; }
}
@media (width < 40rem) {
	.dl-acoes { flex-direction: column; }
	.dl-acoes .dl-botao { width: 100%; }
	.dl-linha { padding: .75rem; }
	.dl-numero { font-size: .9375rem; }
	.dl-trilho { grid-template-columns: 1fr; }
	.dl-controles { grid-template-columns: 1fr; }
	.dl-relatorios li { grid-template-columns: 1.75rem minmax(0, 1fr); }
	.dl-relatorios span { grid-column: 2; }
	.dl-final-grade { flex-direction: column; align-items: flex-start; }
	.dl-planos li { padding: 1rem; }
}