/* Estilo Retorno (quero-clientes.com). So vale no site publico e nas telas de entrar/criar conta. Fundo vinho e
   verde-agua levam sempre letra branca (regra do Alexandre). */
.estilo-retorno {
	--vinho: #4A1630;
	--vinho-fundo: #3A1025;
	--agua: #0E7C86;
	--agua-forte: #0A646C;
	--agua-clara: #DDF3F4;
	--tinta: #1C1218;
	--tinta-suave: #5B4B55;
	--papel: #FFFFFF;
	--nevoa: #F6F2F4;
	--linha: #E6DCE1;
	--acento: #0E7C86;
	--acento-forte: #0A646C;
	--sobre-acento: #FFFFFF;
	--acento-claro: #DDF3F4;
	--escuro: #4A1630;
	--sobre-escuro: #FFFFFF;
	--fonte-titulo: "Schibsted Grotesk", system-ui, sans-serif;
	--fonte-texto: "Source Sans 3", system-ui, sans-serif;
	--raio-botao: 999px;
}
html:has(.estilo-retorno) { overflow-x: clip; }
.estilo-retorno.site-publico { background: var(--papel); color: var(--tinta); font-family: var(--fonte-texto); font-size: 1.0625rem; overflow-x: clip; }
.estilo-retorno h1, .estilo-retorno h2, .estilo-retorno h3 { font-family: var(--fonte-titulo); letter-spacing: -.02em; }
.estilo-retorno :focus-visible { outline: 3px solid var(--agua); outline-offset: 3px; }
.qc-largura { width: min(100% - 2rem, 74rem); margin-inline: auto; }

/* botoes */
.qc-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.5rem; border-radius: 999px; 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, border-color .15s ease; }
.qc-botao-agua { background: var(--agua); color: #FFFFFF; }
.qc-botao-agua:hover { background: var(--agua-forte); }
.qc-botao-linha { border-color: var(--vinho); color: var(--vinho); }
.qc-botao-linha:hover { background: var(--vinho); color: #FFFFFF; }

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

/* hero: branco, titulo vinho e a agenda de clientes parados (cartao vinho, letra branca) */
.qc-hero { padding: clamp(3rem, 7vw, 6rem) 0; background: var(--papel); }
.qc-hero-grade { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.qc-hero h1 { font-size: clamp(2.25rem, 1.2rem + 4vw, 4.25rem); line-height: 1.02; font-weight: 800; color: var(--vinho); max-width: 14ch; }
.qc-hero-texto > p:not(.qc-hero-nota) { margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.55; max-width: 40ch; color: var(--tinta-suave); }
.qc-acoes { display: flex; gap: .75rem; margin-top: 2.25rem; }
.qc-hero-nota { margin-top: 1rem; font-size: .9375rem; color: var(--tinta-suave); }
.qc-agenda { margin: 0; padding: 1.25rem; border-radius: 18px; background: var(--vinho); color: #FFFFFF; }
.qc-agenda figcaption { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; font-weight: 700; color: #FFFFFF; }
.qc-agenda figcaption svg { width: 1.125rem; height: 1.125rem; flex: none; }
.qc-agenda ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.qc-linha { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .875rem; border-radius: 12px; background: rgb(255 255 255 / .07); }
.qc-cliente { display: grid; min-width: 0; }
.qc-cliente b { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.qc-cliente small { font-size: .8125rem; opacity: .75; white-space: nowrap; }
.qc-estado { display: grid; justify-items: end; }
.qc-estado > span { grid-area: 1 / 1; padding: .3125rem .75rem; border-radius: 999px; font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.qc-ligando { border: 1px solid rgb(255 255 255 / .5); color: #FFFFFF; opacity: 0; }
.qc-resposta { background: rgb(255 255 255 / .14); color: #FFFFFF; }
.qc-fim-volta { background: rgb(14 124 134 / .35); }
.qc-fim-volta .qc-resposta { background: var(--agua); color: #FFFFFF; }
.qc-fim-caixa .qc-cliente, .qc-fim-nao .qc-cliente { opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
	.qc-ligando { animation: qc-liga 1.6s ease both; animation-delay: calc(var(--i) * .35s); }
	.qc-resposta { animation: qc-responde .4s ease both; animation-delay: calc(var(--i) * .35s + 1.4s); }
	@keyframes qc-liga { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
	@keyframes qc-responde { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
}

/* secoes */
.qc-secao { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.qc-secao-clara { background: var(--nevoa); }
.qc-secao h2, .qc-final h2, .qc-preco h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1.08; font-weight: 800; max-width: 22ch; color: var(--vinho); }
.qc-dupla { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }

/* quatro passos (sequencia real) */
.qc-passos { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.qc-passos li { min-width: 0; }
.qc-passo-icone { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 14px; background: var(--vinho); color: #FFFFFF; }
.qc-passos li:last-child .qc-passo-icone { background: var(--agua); }
.qc-passo-icone svg { width: 1.5rem; height: 1.5rem; }
.qc-passos b { display: block; margin-top: 1.125rem; font: 800 1.1875rem/1.2 var(--fonte-titulo); }
.qc-passos p { margin-top: .5rem; color: var(--tinta-suave); line-height: 1.55; }

/* recados de exemplo */
.qc-usos { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.qc-usos article { padding: 1.5rem; border-radius: 18px; background: var(--papel); border: 1px solid var(--linha); min-width: 0; }
.qc-usos h3 { font-size: 1.125rem; font-weight: 800; color: var(--vinho); }
.qc-recado { margin-top: .75rem; padding: 1rem 1.125rem; border-radius: 14px 14px 14px 4px; background: var(--agua-clara); color: var(--tinta); line-height: 1.55; }

/* o que vem no painel */
.qc-extras { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.qc-extras div { padding-top: 1.125rem; border-top: 2px solid var(--linha); min-width: 0; }
.qc-extras dt { display: flex; align-items: center; gap: .625rem; font-weight: 700; font-size: 1.0625rem; }
.qc-extras dt svg { width: 1.375rem; height: 1.375rem; color: var(--agua); flex: none; }
.qc-extras dd { margin: .375rem 0 0; color: var(--tinta-suave); line-height: 1.5; }

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

/* duvidas */
.qc-duvidas { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; align-items: start; }
.qc-duvidas details { border-bottom: 1px solid var(--linha); }
.qc-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; }
.qc-duvidas summary::-webkit-details-marker { display: none; }
.qc-duvidas summary::after { content: ""; flex: none; width: .625rem; height: .625rem; border-right: 2px solid var(--agua); border-bottom: 2px solid var(--agua); rotate: 45deg; translate: 0 -.2rem; transition: rotate .15s ease; }
.qc-duvidas details[open] summary::after { rotate: 225deg; translate: 0 .15rem; }
.qc-duvidas p { padding: 0 0 1.25rem; color: var(--tinta-suave); line-height: 1.65; }

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

/* rodape */
.estilo-retorno .qc-rodape { background: var(--vinho-fundo); color: #FFFFFF; padding: 0; }
.qc-rodape-grade { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding: 2.5rem 0; }
.qc-rodape nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem 1.5rem; max-width: 40rem; }
.qc-rodape nav a { color: #FFFFFF; opacity: .86; text-decoration: none; white-space: nowrap; }
.qc-rodape nav a:hover { opacity: 1; text-decoration: underline; }
.qc-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-retorno .pagina { width: min(100% - 2rem, 74rem); margin-inline: auto; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.estilo-retorno .pagina-topo h1 { font-size: clamp(2.125rem, 1.4rem + 2.8vw, 3.5rem); font-weight: 800; color: var(--vinho); }
.estilo-retorno .pagina-topo p { color: var(--tinta-suave); max-width: 52ch; }
.estilo-retorno .posts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.25rem; }
.estilo-retorno .posts a { border: 1px solid var(--linha); border-radius: 18px; padding: 1.5rem; }
.estilo-retorno .posts a:hover { border-color: var(--vinho); }
.estilo-retorno .post-categoria { background: var(--vinho); color: #FFFFFF; border-radius: 999px; }
.estilo-retorno .posts strong { font-family: var(--fonte-titulo); font-weight: 800; }
.estilo-retorno .artigo h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); font-weight: 800; line-height: 1.06; color: var(--vinho); }
.estilo-retorno .artigo-conteudo { font-size: 1.125rem; line-height: 1.7; }
.estilo-retorno .artigo-conteudo h2 { font-weight: 800; color: var(--vinho); }
.estilo-retorno .artigo-conteudo a { text-decoration-color: var(--agua); }
.estilo-retorno .artigo-chamada { background: var(--vinho); color: #FFFFFF; border-radius: 18px; }
.estilo-retorno .migalhas a { color: var(--vinho); }
.estilo-retorno .botao-acento { background: var(--agua); color: #FFFFFF; border-radius: 999px; }
.estilo-retorno .botao-acento:hover { background: var(--agua-forte); }
.estilo-retorno .campo input:focus, .estilo-retorno .campo select:focus, .estilo-retorno .campo textarea:focus { border-color: var(--agua); box-shadow: 0 0 0 4px var(--agua-clara); }

/* entrar e criar conta: lado vinho com letra branca */
.acesso.estilo-retorno { font-family: var(--fonte-texto); }
.acesso.estilo-retorno .acesso-lado { background: var(--vinho); color: #FFFFFF; }
.acesso.estilo-retorno .acesso-lado h1 { font-family: var(--fonte-titulo); color: #FFFFFF; }
.acesso.estilo-retorno .acesso-lado p { color: #FFFFFF; opacity: .86; }
.acesso.estilo-retorno .acesso-lista li::before { border-radius: 50%; background: var(--agua); }
.acesso.estilo-retorno .marca-clara { color: #FFFFFF; font-family: var(--fonte-titulo); }
.acesso.estilo-retorno .marca-quadrado { background: url("favicon.svg") center / contain no-repeat; border-radius: 10px; }
.acesso.estilo-retorno .acesso-form h2 { font-family: var(--fonte-titulo); }
.acesso.estilo-retorno .botao-acento { background: var(--agua); color: #FFFFFF; border-radius: 999px; }
.acesso.estilo-retorno .campo input:focus { border-color: var(--agua); }
.acesso.estilo-retorno .acesso-rodape a { color: var(--vinho); }

/* telas menores */
@media (width < 60rem) {
	.qc-hero-grade, .qc-dupla, .qc-preco-grade { grid-template-columns: 1fr; }
	.qc-hero-grade > *, .qc-dupla > *, .qc-preco-grade > * { min-width: 0; }
	.qc-passos { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
	.qc-duvidas { grid-template-columns: 1fr; }
	.qc-rodape-grade { flex-direction: column; }
	.qc-rodape nav { justify-content: flex-start; }
}
@media (width < 40rem) {
	.qc-acoes { flex-direction: column; }
	.qc-acoes .qc-botao { width: 100%; }
	.qc-linha { padding: .625rem .75rem; }
	.qc-passos, .qc-usos, .qc-extras { grid-template-columns: 1fr; }
	.qc-final-grade { flex-direction: column; align-items: flex-start; }
	.qc-planos li { padding: 1rem; }
}