/* Residência PY — identidade "bandeira minimalista"
   Vermelho, branco e azul do Paraguai em formas geométricas. A seta do logo
   (faixas dobradas para a frente) aparece como recorte diagonal em botões, cartões e divisores. */

:root {
  /* nomes mantidos para os templates continuarem funcionando */
  --papel: #ffffff;
  --papel-2: #f2f4f9;
  --cartao: #ffffff;
  --tinta: #0b1530;
  --tinta-2: #4a5470;
  --vermelho: #d52b1e;
  --vermelho-2: #ff4d3d;
  --azul: #0038a8;
  --azul-2: #4d7dff;
  --linha: rgba(11, 21, 48, .12);
  --display: "Barlow", "Bahnschrift", system-ui, sans-serif;
  --texto: "Barlow", "Bahnschrift", system-ui, sans-serif;
  --mono: "Barlow Semi Condensed", "Bahnschrift", system-ui, sans-serif;
  --raio: 2px;
  --corte: 14px; /* tamanho do recorte diagonal (a "seta") */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--texto);
  font-size: 17px;
  color: var(--tinta);
  background: var(--papel);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.wrap--estreito { width: min(760px, 100% - 32px); }

h1, h2, h3 { font-family: var(--display); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); margin-bottom: 2.4rem; max-width: 18ch; }
h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }

.etiqueta {
  font: 600 .82rem var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vermelho);
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: .7rem;
}
/* mini seta antes das etiquetas */
.etiqueta::before {
  content: ""; width: 18px; height: 14px; flex-shrink: 0;
  background: linear-gradient(var(--vermelho) 0 44%, transparent 44% 56%, var(--azul) 56%);
  clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, 50% 50%);
}
.etiqueta--clara { color: var(--vermelho-2); }

/* faixa da bandeira no topo da página */
.bandeira { display: grid; grid-template-columns: 1fr 1fr 1fr; height: 5px; }
.bandeira span:nth-child(1) { background: var(--vermelho); }
.bandeira span:nth-child(2) { background: #fff; }
.bandeira span:nth-child(3) { background: var(--azul); }

/* ---------- Botões e links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem 1.8rem 1rem 1.6rem;
  background: var(--vermelho); color: #fff;
  font: 700 1rem var(--texto); letter-spacing: .01em; text-decoration: none;
  border: 0; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% 50%, calc(100% - var(--corte)) 100%, 0 100%);
  transition: background .2s, transform .2s;
}
.btn:hover { background: var(--azul); transform: translateX(3px); }
.btn--sm { padding: .6rem 1.3rem .6rem 1.1rem; font-size: .92rem; --corte: 10px; }
.btn--contorno { background: var(--tinta); }
.btn--contorno:hover { background: var(--vermelho); }
.btn--claro { background: #fff; color: var(--tinta); }
.btn--claro:hover { background: var(--tinta); color: #fff; }
.btn--largo { width: 100%; }

.link-seta { font-weight: 700; text-decoration: none; color: var(--azul); border-bottom: 2px solid currentColor; padding-bottom: 1px; }
.link-seta:hover { color: var(--vermelho); }

/* ---------- Topo ---------- */
.topo { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); }
.topo__in { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.logo { display: inline-flex; text-decoration: none; }
.logo img { height: 44px; width: auto; }
.menu { display: flex; align-items: center; gap: 2rem; font-weight: 600; font-size: .98rem; }
.menu a:not(.btn) { text-decoration: none; }
.menu a:not(.btn):hover { color: var(--vermelho); }
/* itens numerados (01, 02, 03) com sublinhado nas cores da bandeira ao passar o mouse */
.menu__item { position: relative; display: inline-flex; flex-direction: column; font-weight: 700; padding: .35rem 0 .45rem; }
.menu__num { font: 600 .68rem/1 var(--mono); letter-spacing: .14em; color: var(--vermelho); margin-bottom: .2rem; }
.menu__item:nth-child(2) .menu__num { color: var(--azul); }
.menu__item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--vermelho) 0 33.3%, var(--linha) 33.3% 66.6%, var(--azul) 66.6%);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.menu__item:hover::after, .menu__item:focus-visible::after, .menu__item[aria-current]::after { transform: scaleX(1); }
/* "Entrar": contorno azul em forma de seta; fica azul cheio ao passar o mouse */
.menu a.menu__entrar {
  --corte: 10px; position: relative; display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.4rem .6rem 1rem; color: var(--azul); font-weight: 700; font-size: .92rem; line-height: 1.2; background: var(--azul);
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% 50%, calc(100% - var(--corte)) 100%, 0 100%);
  transition: color .2s;
}
.menu__entrar::before {  /* miolo branco: deixa só a borda de 2px aparecendo */
  content: ""; position: absolute; inset: 2px; z-index: -1; background: #fff;
  clip-path: polygon(0 0, calc(100% - var(--corte) + 1px) 0, 100% 50%, calc(100% - var(--corte) + 1px) 100%, 0 100%);
  transition: opacity .2s;
}
.menu__entrar { isolation: isolate; }
.menu a.menu__entrar:hover { color: #fff; }
.menu__entrar:hover::before { opacity: 0; }
.menu__entrar svg { fill: none; stroke: currentColor; stroke-width: 2; }
/* "Comprar o guia": selo "Acesso na hora" em cima do botão */
.menu__comprar { position: relative; display: inline-flex; }
.menu__selo {
  position: absolute; right: 1.1rem; top: -.6rem; padding: .18rem .55rem; pointer-events: none;
  background: var(--tinta); color: #fff; border-radius: 999px;
  font: 600 .62rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden;padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem); }
.hero::before { /* grade sutil de fundo */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 75% 40%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 75% 40%, #000, transparent 70%);
  opacity: .6;
}
.hero__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.2rem); letter-spacing: -.035em; }
.hero h1 .destaque { color: var(--vermelho); display: block; }
.hero__sub { font-size: 1.2rem; color: var(--tinta-2); max-width: 46ch; margin: 1.6rem 0 2.2rem; }
.hero__acoes { display: flex; gap: 1.8rem; align-items: center; flex-wrap: wrap; }
.hero__selos { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 2.2rem; font-size: .9rem; color: var(--tinta-2); }
.hero__selos li::before { content: "✓ "; color: var(--azul); font-weight: 800; }

.hero__texto > * { animation: subir .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero__texto > :nth-child(2) { animation-delay: .08s; }
.hero__texto > :nth-child(3) { animation-delay: .16s; }
.hero__texto > :nth-child(4) { animation-delay: .24s; }
.hero__texto > :nth-child(5) { animation-delay: .32s; }

/* arte do Photoshop: a seta entra deslizando como se avançasse */
.hero__arte { position: relative; }
.hero__arte img { width: 100%; height: auto; animation: avancar 1.1s .15s cubic-bezier(.2, .7, .2, 1) both; }
.hero__cartao {
  position: absolute; left: 4%; top: 18%;
  display: grid; gap: .1rem; padding: 1rem 1.3rem 1rem 1.1rem; min-width: 220px;
  background: #fff; border-left: 4px solid var(--vermelho);
  box-shadow: 0 20px 40px -18px rgba(11, 21, 48, .35);
  animation: subir .7s .9s cubic-bezier(.2, .7, .2, 1) both;
}
.hero__cartao--b { left: auto; right: 0; top: auto; bottom: 14%; border-left-color: var(--azul); animation-delay: 1.1s; }
.hero__cartao-num { font: 600 .75rem var(--mono); letter-spacing: .14em; color: var(--tinta-2); }
.hero__cartao strong { font-size: 1.05rem; }
.hero__cartao small { color: var(--tinta-2); font-size: .85rem; }

@keyframes subir { from { opacity: 0; transform: translateY(22px); } }
@keyframes avancar { from { opacity: 0; transform: translateX(-60px); } }

/* ---------- Selo (página de obrigado, 404 e carteira) ---------- */
.carimbo {
  position: relative; display: inline-grid; justify-items: center; gap: .2rem;
  padding: 1.1rem 2.2rem 1rem; color: var(--tinta); background: #fff;
  border: 2px solid var(--tinta);
  font-family: var(--mono); text-align: center;
}
.carimbo::before { /* faixa da bandeira no topo do selo */
  content: ""; position: absolute; left: -2px; right: -2px; top: -2px; height: 6px;
  background: linear-gradient(90deg, var(--vermelho) 0 33.3%, #fff 33.3% 66.6%, var(--azul) 66.6%);
}
.carimbo__topo, .carimbo__base { font-size: .72rem; letter-spacing: .18em; font-weight: 600; color: var(--tinta-2); }
.carimbo__meio { font: 800 1.8rem var(--display); letter-spacing: .04em; color: var(--vermelho); }
.carimbo--estatico { margin: 0 auto 2rem; display: grid; width: max-content; }
.carimbo--azul .carimbo__meio { color: var(--azul); }

/* ---------- Faixa de números ---------- */
.faixa { background: var(--tinta); color: #fff; position: relative; }
.faixa::after { content: ""; position: absolute; inset: auto 0 0; height: 5px; background: linear-gradient(90deg, var(--vermelho) 0 33.3%, #fff 33.3% 66.6%, var(--azul) 66.6%); }
.faixa__in { display: grid; grid-template-columns: repeat(4, 1fr); padding: 2.2rem 0 2.4rem; }
.faixa__in div { display: flex; flex-direction: column; padding-inline: 1.2rem; border-left: 1px solid rgba(255, 255, 255, .15); }
.faixa__in div:first-child { border: 0; padding-left: 0; }
.faixa strong { font: 800 2.3rem var(--display); letter-spacing: -.02em; }
.faixa span { font-size: .92rem; opacity: .7; }

/* ---------- Seções ---------- */
.secao { padding: clamp(4rem, 9vw, 7rem) 0; }
.secao--topo { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.secao--papel { background: var(--papel-2); }
.secao--escura { background: var(--tinta); color: #fff; }
.titulo-pagina { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 1.5rem; }
.cab-linha { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 2.2rem; }
.cab-linha h2, .cab-linha .titulo-pagina { margin: 0; }

/* perfis: cartões com número grande */
.perfis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.perfil { position: relative; padding: 1.8rem 1.5rem; background: var(--papel-2); overflow: hidden; transition: background .25s, color .25s; }
.perfil:hover { background: var(--tinta); color: #fff; }
.perfil:hover p { color: rgba(255, 255, 255, .75); }
.perfil__n { font: 800 3rem/1 var(--display); color: var(--vermelho); display: block; margin-bottom: 1.2rem; }
.perfil:nth-child(even) .perfil__n { color: var(--azul); }
.perfil:hover .perfil__n { color: var(--vermelho-2); }
.perfil h3 { margin-bottom: .5rem; }
.perfil p { color: var(--tinta-2); transition: color .25s; }

/* passos: seta cortando as colunas */
.passos { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.passos li { position: relative; padding: 2rem 2.6rem 2rem 1.8rem; background: rgba(255, 255, 255, .05);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 26px 50%); }
.passos li:first-child { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); }
.passos li:nth-child(2) { background: rgba(255, 255, 255, .09); }
.passos li:nth-child(3) { background: rgba(255, 255, 255, .13); }
.passos span { font: 800 3.4rem/1 var(--display); color: var(--vermelho-2); display: block; margin-bottom: .8rem; }
.passos li:nth-child(2) span { color: #fff; }
.passos li:nth-child(3) span { color: var(--azul-2); }
.passos li > * { padding-left: 1rem; }
.passos h3 { margin-bottom: .5rem; }
.passos p { opacity: .75; }

/* planos */
.planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: start; }
.plano { position: relative; background: #fff; border: 1.5px solid var(--linha); padding: 2.2rem 1.9rem; display: flex; flex-direction: column; gap: .4rem; }
.plano::before { content: ""; position: absolute; left: -1.5px; right: -1.5px; top: -1.5px; height: 5px; background: var(--tinta); }
.plano--destaque { background: var(--tinta); color: #fff; border-color: var(--tinta); transform: translateY(-16px); box-shadow: 0 30px 60px -30px rgba(11, 21, 48, .6); }
.plano--destaque::before { background: linear-gradient(90deg, var(--vermelho) 0 33.3%, #fff 33.3% 66.6%, var(--azul) 66.6%); }
.plano--destaque .plano__desc { color: rgba(255, 255, 255, .7); }
.plano--destaque ul li::before { color: var(--vermelho-2); }
.plano--destaque .btn { background: var(--vermelho); }
.plano__fita { position: absolute; top: 1.2rem; right: 1.2rem; background: var(--vermelho); color: #fff; font: 600 .72rem var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: .3rem .7rem; }
.plano__desc { color: var(--tinta-2); font-size: .97rem; }
.plano__preco { font: 800 3rem var(--display); letter-spacing: -.03em; margin: .8rem 0 .6rem; }
.plano__preco small { font: 500 1rem var(--texto); opacity: .65; margin-left: .2rem; letter-spacing: 0; }
.plano ul, .lista-check { list-style: none; display: grid; gap: .6rem; margin-bottom: 1.8rem; }
.plano ul li, .lista-check li { padding-left: 1.6rem; position: relative; }
.plano ul li::before, .lista-check li::before { content: "›"; position: absolute; left: .2rem; top: -.15rem; color: var(--vermelho); font-weight: 800; font-size: 1.3rem; }
.plano .btn { margin-top: auto; }

/* artigos */
.artigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.4rem; }
.artigo-card {
  position: relative; display: flex; flex-direction: column; gap: .7rem; text-decoration: none;
  background: #fff; padding: 1.8rem 1.6rem; border: 1.5px solid var(--linha);
  transition: border-color .2s, transform .2s;
}
.artigo-card::after { /* seta que avança no hover */
  content: ""; position: absolute; right: 1.4rem; bottom: 1.5rem; width: 16px; height: 13px;
  background: linear-gradient(var(--vermelho) 0 44%, transparent 44% 56%, var(--azul) 56%);
  clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, 50% 50%);
  transition: transform .2s;
}
.artigo-card:hover { border-color: var(--tinta); transform: translateY(-3px); }
.artigo-card:hover::after { transform: translateX(6px); }
.artigo-card p { color: var(--tinta-2); flex: 1; }
.artigo-card .link-seta { align-self: flex-start; }
.artigo-card__meta { display: flex; gap: .6rem; align-items: center; font-size: .85rem; color: var(--tinta-2); flex-wrap: wrap; }
.tag { font: 600 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; background: var(--papel-2); color: var(--azul); padding: .25rem .55rem; }
.tag--premium { background: var(--vermelho); color: #fff; }

.artigo__meta { margin: 2rem 0 1rem; }
.artigo__lead { font-size: 1.3rem; color: var(--tinta-2); margin-bottom: 2rem; }
.artigo__corpo p { font-size: 1.12rem; margin-bottom: 1.3rem; }
.artigo__corpo--bloqueado { -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.paywall { position: relative; border: 1.5px solid var(--tinta); padding: 2.2rem; text-align: center; margin: 1rem 0 2rem; background: #fff; }
.paywall::before { content: ""; position: absolute; left: -1.5px; right: -1.5px; top: -1.5px; height: 5px; background: linear-gradient(90deg, var(--vermelho) 0 33.3%, #fff 33.3% 66.6%, var(--azul) 66.6%); }
.paywall p { margin: .5rem 0 1.3rem; color: var(--tinta-2); }
.artigo__fonte { font-size: .92rem; color: var(--tinta-2); border-top: 1px solid var(--linha); padding-top: 1rem; margin-top: 2rem; }

/* faq */
details { border-bottom: 1px solid var(--linha); padding: 1.3rem 0; }
summary { font: 700 1.2rem var(--display); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--vermelho); font-size: 1.7rem; line-height: 1; transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin-top: .8rem; color: var(--tinta-2); }

/* cta final com a seta gigante ao fundo */
.cta-final { position: relative; overflow: hidden; background: var(--azul); color: #fff; padding: clamp(3.5rem, 8vw, 5.5rem) 0; }
.cta-final::before {
  content: ""; position: absolute; right: -60px; top: 50%; width: 420px; height: 420px; transform: translateY(-50%);
  background: linear-gradient(var(--vermelho) 0 44%, transparent 44% 56%, #fff 56%);
  clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, 50% 50%);
  opacity: .9;
}
.cta-final__in { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; padding-right: 260px; }
.cta-final h2 { margin: 0; max-width: 20ch; }

/* formulários */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.ficha { position: relative; background: #fff; border: 1.5px solid var(--tinta); padding: 2.2rem 2rem 2rem; display: grid; gap: 1.1rem; box-shadow: 0 30px 60px -36px rgba(11, 21, 48, .5); }
.ficha::before { content: ""; position: absolute; left: -1.5px; right: -1.5px; top: -1.5px; height: 6px; background: linear-gradient(90deg, var(--vermelho) 0 33.3%, #fff 33.3% 66.6%, var(--azul) 66.6%); }
.ficha__titulo { font: 600 .82rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); border-bottom: 1px solid var(--linha); padding-bottom: .8rem; }
.ficha label { display: grid; gap: .35rem; font-weight: 600; font-size: .93rem; }
.ficha input, .ficha select {
  font: 1rem var(--texto); color: var(--tinta);
  padding: .85rem .9rem; background: var(--papel-2);
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; outline: none;
  transition: border-color .2s, background .2s;
}
.ficha input:focus, .ficha select:focus { border-bottom-color: var(--azul); background: #eaf0ff; }
.opcional { font-weight: 400; color: var(--tinta-2); }
.erros { background: #fdecea; border-left: 4px solid var(--vermelho); padding: .8rem 1rem; color: #a3180d; font-size: .95rem; }
.nota { font-size: .88rem; color: var(--tinta-2); }
.nota a { color: var(--azul); font-weight: 600; }
.seguro { color: var(--tinta); }
.logado { background: var(--papel-2); padding: .8rem 1rem; font-size: .95rem; }
.menu__entrar { font-weight: 600; }
.menu .btn { white-space: nowrap; }

.obrigado { text-align: center; }
.obrigado p { font-size: 1.15rem; color: var(--tinta-2); margin-bottom: 2rem; }

/* painel */
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; background: #fff; font-size: .93rem; }
.tabela th, .tabela td { text-align: left; padding: .75rem .9rem; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela th { font: 600 .74rem var(--mono); letter-spacing: .12em; text-transform: uppercase; background: var(--tinta); color: #fff; }
.aviso-admin { margin-bottom: 1.5rem; }
.status { font: 600 .74rem var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: .2rem .55rem; background: var(--papel-2); }
.status--ativa { background: #dcf3e3; color: #17663a; }
.status--aguardando-pagamento { background: #fff1c9; color: #7a5a00; }
.status--pagamento-atrasado, .status--cancelada { background: #fdecea; color: var(--vermelho); }
.mini-btn { font: 700 .82rem var(--texto); padding: .4rem .8rem; border: 0; background: var(--tinta); color: #fff; cursor: pointer; }
.mini-btn--off { background: transparent; color: var(--vermelho); box-shadow: inset 0 0 0 1.5px var(--vermelho); }
.pendencias { padding: 1.4rem 1.6rem; margin-bottom: 1.5rem; background: #fff6d8; border-left: 4px solid #c99700; }
.pendencias ul { margin: .8rem 0 0 1.2rem; display: grid; gap: .4rem; }
.pendencias--ok { background: #dcf3e3; border-color: #17663a; }

/* rodapé */
.rodape { background: var(--tinta); color: #fff; padding-top: 3.5rem; }
.rodape__in { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-bottom: 2.5rem; }
.rodape__aviso { max-width: 60ch; font-size: .9rem; opacity: .65; margin-top: 1.2rem; }
.rodape__links { display: grid; gap: .5rem; align-content: start; font-weight: 600; }
.rodape__links a { text-decoration: none; opacity: .85; }
.rodape__links a:hover { color: var(--vermelho-2); opacity: 1; }
.rodape__base { border-top: 1px solid rgba(255, 255, 255, .12); padding: 1.2rem 0 1.6rem; }
.rodape__copy { font-size: .85rem; opacity: .55; }

/* botão whatsapp */
.zap {
  position: fixed; right: 20px; bottom: 20px; z-index: 30;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: 0 10px 25px -8px rgba(0, 0, 0, .4);
  transition: transform .2s;
}
.zap:hover { transform: scale(1.08); }

/* revelar ao rolar */
.revelar { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s cubic-bezier(.2, .7, .2, 1); }
.revelar.visivel { opacity: 1; transform: none; }

/* ---------- Área de membros ---------- */
.conta-grid { display: grid; grid-template-columns: 300px 1fr; gap: 3rem; align-items: start; }
.subtitulo { font-size: 1.6rem; margin: 0 0 1.2rem; }
.conta-grid > div > .subtitulo:not(:first-child) { margin-top: 2.8rem; }
.conta-lateral { position: sticky; top: 96px; display: grid; gap: 1.2rem; align-content: start; }
.conta-conteudo { min-width: 0; }

/* carteira de membro */
.cartao-membro {
  position: relative; overflow: hidden;
  background: var(--tinta); color: #fff; padding: 1.6rem 1.5rem 1.5rem;
  display: grid; gap: 1rem;
}
.cartao-membro::before { /* seta do logo como marca d'água */
  content: ""; position: absolute; right: -40px; bottom: -40px; width: 170px; height: 170px;
  background: linear-gradient(var(--vermelho-2) 0 44%, transparent 44% 56%, var(--azul-2) 56%);
  clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, 50% 50%);
  opacity: .22;
}
.cartao-membro::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--vermelho) 0 33.3%, #fff 33.3% 66.6%, var(--azul) 66.6%); }
.cartao-membro__cab { display: flex; justify-content: space-between; font: 600 .7rem var(--mono); letter-spacing: .14em; opacity: .7; }
.cartao-membro__nome { font: 800 1.35rem var(--display); letter-spacing: .01em; }
.cartao-membro dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; font-size: .93rem; }
.cartao-membro dt { opacity: .6; }
.carimbo--mini { position: absolute; right: 1rem; bottom: 1rem; padding: .25rem .6rem; border: 1.5px solid var(--vermelho-2); background: transparent; }
.carimbo--mini::before { display: none; }
.carimbo--mini .carimbo__meio { font-size: .72rem; color: var(--vermelho-2); letter-spacing: .14em; }
.cartao-membro--ativo .carimbo--mini { border-color: #6fe3a0; }
.cartao-membro--ativo .carimbo--mini .carimbo__meio { color: #6fe3a0; }
.cartao-membro__cab span { white-space: nowrap; }

.conta-nav { display: grid; border-top: 2px solid var(--tinta); }
.conta-nav a { padding: .75rem .3rem; text-decoration: none; border-bottom: 1px solid var(--linha); font-weight: 600; display: flex; justify-content: space-between; }
.conta-nav a:hover { color: var(--vermelho); }
.conta-nav a.ativo { color: var(--vermelho); box-shadow: inset 4px 0 0 var(--vermelho); padding-left: .9rem; }
.conta-nav a.trancado { color: var(--tinta-2); opacity: .7; }

.artigos--lista { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.artigo-card--bloqueado { opacity: .6; }
.atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.atalho { position: relative; display: grid; gap: .2rem; padding: 1.3rem 1.4rem; background: var(--papel-2); text-decoration: none; border-left: 4px solid var(--azul); transition: background .2s, color .2s; }
a.atalho:hover { background: var(--tinta); color: #fff; }
a.atalho:hover span { color: rgba(255, 255, 255, .7); }
.atalho span { font-size: .9rem; color: var(--tinta-2); }
.atalho--vip { border-left-color: var(--vermelho); }
.atalho--largo { max-width: 520px; }
.alerta-destaque { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; padding: 1rem 1.2rem; margin-bottom: 2rem; background: #fdecea; border-left: 4px solid var(--vermelho); text-decoration: none; }
.upgrade { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin: 2.5rem 0 1rem; padding: 1.4rem 1.6rem; background: var(--papel-2); border-left: 4px solid var(--vermelho); }
.upgrade p { color: var(--tinta-2); font-size: .95rem; }
.lista-check--centro { display: inline-grid; text-align: left; margin: 1rem 0 1.5rem; }
/* o que vem no guia, em grupos (página de venda, ficha de compra e páginas bloqueadas) */
.lista-agrupada { margin-bottom: 1.6rem; text-align: left; }
.lista-agrupada__titulo { font: 700 .72rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--vermelho); margin: 1.1rem 0 .45rem; }
.lista-agrupada__titulo:first-child { margin-top: 0; }
.lista-agrupada .lista-check { margin-bottom: 0; }
.subtitulo--menor { font-size: 1.2rem; margin-top: 1.8rem; }

.documento { background: #fff; border: 1.5px solid var(--linha); padding: clamp(1.4rem, 4vw, 2.4rem); display: grid; gap: 1.3rem; }
.documento h2 { font-size: 1.3rem; margin-bottom: .3rem; }
.documento p { color: var(--tinta-2); }
.so-imprimir { display: none; }

.perfil-troca { margin-bottom: 1.2rem; }
.perfil-troca label { display: inline-grid; gap: .3rem; font-weight: 600; font-size: .92rem; }
.perfil-troca select { font: 1rem var(--texto); padding: .55rem .7rem; border: 0; background: var(--papel-2); color: var(--tinta); }
.progresso { font: 600 .82rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--vermelho); }
.checklist { list-style: none; display: grid; }
.checklist li { border-bottom: 1px solid var(--linha); }
.checklist label { display: flex; gap: .8rem; align-items: flex-start; padding: .85rem 0; cursor: pointer; }
.checklist input { width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--azul); flex-shrink: 0; }
.checklist input:checked + span { text-decoration: line-through; color: var(--tinta-2); }
.checklist-etapa { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; font-size: 1.2rem; max-width: none; margin: 1.8rem 0 .2rem; }
.checklist-etapa:first-child { margin-top: .4rem; }
.checklist-etapa > span { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--azul); color: #fff; font-size: .95rem; }
.checklist-etapa small { font: 600 .85rem var(--texto); color: var(--tinta-2); }
.checklist-etapa + .nota { margin-bottom: .3rem; }

.lista-itens { display: grid; gap: 1rem; }
.item-linha { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; padding: 1.3rem 1.4rem; background: var(--papel-2); border-left: 4px solid var(--azul); flex-wrap: wrap; }
.item-linha p { color: var(--tinta-2); font-size: .95rem; }
.cupom code { font: 700 .92rem var(--mono); background: #fff; padding: .15rem .5rem; color: var(--vermelho); letter-spacing: .08em; }

.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.video h3 { font-size: 1.08rem; margin-top: .8rem; }
.video__quadro { aspect-ratio: 16/9; background: var(--tinta); }
.video__quadro iframe { width: 100%; height: 100%; border: 0; display: block; }
.video__quadro--vazio { position: relative; display: grid; place-items: center; color: #fff; font: 600 .82rem var(--mono); letter-spacing: .16em; text-transform: uppercase; overflow: hidden; }
.video__quadro--vazio::before {
  content: ""; position: absolute; width: 120px; height: 120px; right: -20px; bottom: -20px; opacity: .35;
  background: linear-gradient(var(--vermelho-2) 0 44%, transparent 44% 56%, var(--azul-2) 56%);
  clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, 50% 50%);
}

.alertas { list-style: none; display: grid; gap: 1.2rem; border-left: 2px solid var(--linha); padding-left: 1.4rem; }
.alertas li { position: relative; }
.alertas li::before { content: ""; position: absolute; left: calc(-1.4rem - 7px); top: .35rem; width: 12px; height: 12px; background: var(--vermelho); clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%); }
.alertas time { font: 600 .78rem var(--mono); color: var(--azul); letter-spacing: .1em; }
.alertas h3 { font-size: 1.15rem; margin: .2rem 0; }
.alertas p { color: var(--tinta-2); }

.call { position: relative; display: flex; gap: 1.4rem; align-items: center; padding: 1.5rem; background: var(--tinta); color: #fff; max-width: 580px; }
.call::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--vermelho) 0 33.3%, #fff 33.3% 66.6%, var(--azul) 66.6%); }
.call__data { display: grid; place-items: center; min-width: 84px; padding: .6rem; background: var(--vermelho); }
.call__data span { font: 800 2.3rem/1 var(--display); }
.call__data small { font: 600 .72rem var(--mono); letter-spacing: .08em; }
.call__info { display: grid; gap: .4rem; justify-items: start; }
.call .nota { color: rgba(255, 255, 255, .7); }

/* calculadora do prazo da permanente (página Passo a passo) */
.calculadora { position: relative; background: var(--papel-2); padding: 1.8rem 1.6rem 1.6rem; margin-bottom: 2.5rem; max-width: 640px; }
.calculadora::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--vermelho) 0 33.3%, #fff 33.3% 66.6%, var(--azul) 66.6%); }
.calculadora__campo { display: grid; gap: .35rem; font-weight: 600; font-size: .92rem; max-width: 280px; }
.calculadora__campo input { font: 1rem var(--texto); color: var(--tinta); padding: .75rem .9rem; border: 0; border-bottom: 2px solid var(--tinta); background: #fff; outline: none; }
.calculadora__campo input:focus { border-bottom-color: var(--azul); }

/* menu do Guia completo: tópicos por momento do cliente (antes de sair do Brasil, residência, morando no Paraguai) */
.guia-mapa { margin-bottom: 2.8rem; }
.guia-mapa__etiqueta { font: 700 .75rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--vermelho); margin-bottom: .3rem; }
.guia-mapa__titulo { font-size: 1.55rem; margin-bottom: 1rem; max-width: none; }

.guia-atalhos { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.2rem; }
.guia-atalhos a {
  display: inline-flex; align-items: center; gap: .55rem; font: 700 .92rem var(--texto); color: var(--tinta); text-decoration: none;
  background: #fff; border: 1.5px solid var(--linha); border-radius: 999px; padding: .4rem 1.05rem .4rem .4rem;
}
.guia-atalhos a b { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--tinta); color: #fff; font-size: .85rem; }
.guia-atalhos a:hover, .guia-atalhos a:focus-visible { border-color: var(--tinta); }

.guia-topicos { list-style: none; position: relative; display: grid; gap: 2.4rem; }
.guia-topicos::before { /* linha do tempo ligando os tópicos */
  content: ""; position: absolute; left: calc(1.2rem - 1.5px); top: 1.2rem; bottom: 1.2rem; width: 3px;
  background: linear-gradient(var(--azul), var(--vermelho), var(--azul)); opacity: .22;
}
.guia-topico { position: relative; padding-left: 3.6rem; scroll-margin-top: 6rem; }
.guia-topico__num {
  position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--azul); color: #fff; font: 800 1.15rem/1 var(--display); box-shadow: 0 0 0 6px #fff;
}
.guia-topico--vermelho .guia-topico__num { background: var(--vermelho); }
.guia-topico__cab { margin-bottom: .9rem; }
.guia-topico__cab h3 { font-size: 1.3rem; max-width: none; margin-bottom: .2rem; }
.guia-topico__cab p { color: var(--tinta-2); font-size: .92rem; max-width: 40rem; }
.guia-topico__itens { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .7rem; }
.guia-topico__itens li { display: flex; }

.mapa-passo, .mapa-item {
  position: relative; display: flex; flex-direction: column; gap: .25rem; width: 100%; min-height: 7.4rem;
  text-decoration: none; color: var(--tinta); padding: 1.1rem 1.1rem 1rem;
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, 0 100%);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mapa-passo strong, .mapa-item strong { font: 800 1.02rem/1.15 var(--display); letter-spacing: -.01em; }
.mapa-passo span:last-child, .mapa-item span { font-size: .85rem; line-height: 1.35; color: var(--tinta-2); }
.mapa-passo:hover, .mapa-item:hover, .mapa-passo:focus-visible, .mapa-item:focus-visible { transform: translateY(-3px); }
.mapa-passo:focus-visible, .mapa-item:focus-visible { outline: 3px solid var(--azul-2); outline-offset: 2px; }

.mapa-passo { background: var(--papel-2); border-top: 5px solid var(--vermelho); }
.mapa-passo--azul { border-top-color: var(--azul); }
.mapa-passo__num { font: 800 2.1rem/1 var(--display); letter-spacing: -.03em; color: var(--vermelho); margin-bottom: .45rem; }
.mapa-passo--azul .mapa-passo__num { color: var(--azul); }
.guia-topico__itens li:not(:last-child) .mapa-passo::after { /* seta da sequência */
  content: "→"; position: absolute; top: 1.2rem; right: 1.3rem; font: 700 1.3rem/1 var(--texto); color: #c3cad9;
}

.mapa-item { background: #fff; border: 1px solid var(--linha); border-left: 4px solid var(--azul); padding-right: 2.4rem; }
.mapa-item strong { margin-top: auto; }
.mapa-item::after { content: "→"; position: absolute; right: .9rem; bottom: .85rem; font: 700 1.2rem/1 var(--texto); color: var(--azul); }
.mapa-item:hover, .mapa-item:focus-visible { border-color: var(--azul); box-shadow: 0 6px 16px rgba(11, 21, 48, .08); }

.selo-novo {
  align-self: flex-start; font: 700 .68rem var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase;
  background: var(--vermelho); color: #fff; padding: .22rem .6rem; border-radius: 999px; margin-bottom: .45rem;
}
.mapa-passo .selo-novo { position: absolute; top: 1.2rem; right: 1.2rem; margin: 0; }

.guia-sempre {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; margin-top: 2.4rem; padding: 1rem 1.2rem;
  background: var(--tinta); color: #fff;
}
.guia-sempre strong { font: 700 .74rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #b9c3dd; }
.guia-sempre a { color: #fff; font-weight: 600; font-size: .9rem; text-decoration-color: var(--vermelho-2); text-underline-offset: 3px; }

/* lista de cidades do Guia: vitrine com vídeo, busca com filtros, atalhos e cartões por departamento */
#lista-cidades [hidden], [data-esconde-ao-filtrar][hidden], .cidades-busca [hidden] { display: none !important; }
.cidades-vitrine { margin: 2.2rem 0 2.6rem; }
.cidades-vitrine__grade { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; }
.cidades-vitrine__grade li { display: flex; }
.cidade-destaque {
  position: relative; display: flex; flex-direction: column; gap: .35rem; width: 100%; min-height: 11rem;
  text-decoration: none; color: #fff; background: var(--tinta); border-top: 5px solid var(--vermelho); padding: 1.1rem 1.1rem 1rem;
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, 0 100%); transition: transform .15s ease;
}
.cidades-vitrine__grade li:nth-child(even) .cidade-destaque { border-top-color: var(--azul); }
.cidade-destaque:hover, .cidade-destaque:focus-visible { transform: translateY(-3px); }
.cidade-destaque:focus-visible { outline: 3px solid var(--azul-2); outline-offset: 2px; }
.cidade-destaque__play { position: relative; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--vermelho); margin-bottom: .4rem; flex: none; }
.cidade-destaque__play::before { content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%); width: .7rem; height: .8rem; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.cidade-destaque:hover .cidade-destaque__play { background: var(--vermelho-2); }
.cidade-destaque strong { font: 800 1.2rem/1.1 var(--display); letter-spacing: -.01em; }
.cidade-destaque__texto { font-size: .82rem; line-height: 1.35; color: #b9c3dd; }
.cidade-destaque__dados { margin-top: auto; padding-top: .5rem; font: 600 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #8d98b8; }

.cidades-busca { display: grid; gap: .8rem; margin-bottom: 1.2rem; }
.cidades-busca__campo { position: relative; display: block; max-width: 34rem; }
.cidades-busca__campo input {
  width: 100%; font: 1.05rem var(--texto); color: var(--tinta); padding: 1rem 1rem 1rem 3rem;
  border: 0; border-bottom: 3px solid var(--tinta); background: var(--papel-2); outline: none;
}
.cidades-busca__campo input:focus { border-bottom-color: var(--azul); background: #fff; box-shadow: inset 0 0 0 1px var(--linha); }
.cidades-busca__campo::before { /* lupa */
  content: ""; position: absolute; left: 1.05rem; top: 50%; width: .95rem; height: .95rem; transform: translateY(-62%);
  border: 2.5px solid var(--tinta-2); border-radius: 50%; pointer-events: none;
}
.cidades-busca__campo::after { content: ""; position: absolute; left: 1.85rem; top: calc(50% + .32rem); width: .5rem; height: 2.5px; background: var(--tinta-2); transform: rotate(45deg); pointer-events: none; }
.cidades-busca__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.cidades-busca__chips button { font: 700 .85rem var(--texto); color: var(--tinta); background: #fff; border: 1.5px solid var(--linha); border-radius: 999px; padding: .45rem .95rem; cursor: pointer; }
.cidades-busca__chips button:hover { border-color: var(--tinta); }
.cidades-busca__chips button small { font-weight: 600; color: var(--tinta-2); margin-left: .2rem; }
.cidades-busca__chips button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.cidades-busca__chips button[aria-pressed="true"] small { color: #b9c3dd; }
.cidades-busca__vazio { border-left: 4px solid var(--vermelho); background: var(--papel-2); padding: .8rem 1rem; }

.cidades-deps { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 2.2rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--linha); }
.cidades-deps a { font: 600 .8rem var(--texto); color: var(--azul); text-decoration: none; background: var(--papel-2); padding: .32rem .7rem; }
.cidades-deps a:hover, .cidades-deps a:focus-visible { background: var(--azul); color: #fff; }

.cidades-dep { margin-bottom: 2.4rem; scroll-margin-top: 6rem; }
.cidades-dep__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; border-left: 5px solid var(--vermelho); padding-left: .8rem; margin-bottom: .9rem; }
.cidades-dep:nth-child(even) .cidades-dep__cab { border-left-color: var(--azul); }
.cidades-dep__cab h2 { font-size: 1.4rem; max-width: none; }
.cidades-dep__cab span { font: 600 .74rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.cidades-grade { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .5rem; }
.cidades-grade li { display: flex; }
.cidade-card {
  display: grid; align-content: start; gap: .1rem; width: 100%; text-decoration: none; color: var(--tinta);
  background: #fff; border: 1px solid var(--linha); border-left: 4px solid var(--linha); padding: .75rem .9rem;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cidade-card:hover, .cidade-card:focus-visible { border-color: var(--azul); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(11, 21, 48, .08); }
.cidade-card--capital { background: var(--papel-2); border-left-color: var(--azul); }
.cidade-card strong { font: 700 1rem/1.2 var(--display); }
.cidade-card > span { font-size: .78rem; color: var(--tinta-2); }
.cidade-card__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.tag-video, .tag-capital { font: 700 .62rem var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #fff; padding: .16rem .45rem; }
.tag-video { background: var(--vermelho); display: inline-flex; align-items: center; gap: .3rem; }
.tag-video::before { content: ""; width: .42rem; height: .5rem; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tag-capital { background: var(--azul); }

@media (max-width: 520px) { /* celular: 2 colunas, para o menu não virar uma lista comprida */
  .cidades-vitrine__grade, .cidades-grade { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .cidade-destaque { min-height: 0; padding: .9rem .8rem .8rem; }
  .cidade-destaque strong { font-size: 1rem; }
  .cidade-destaque__texto { font-size: .76rem; }
  .cidade-card { padding: .65rem .7rem; }
  .cidades-deps { flex-wrap: nowrap; overflow-x: auto; margin-right: -1rem; padding-right: 1rem; }
  .cidades-deps a { white-space: nowrap; }
  .guia-topicos::before { display: none; }
  .guia-topico { padding-left: 0; }
  .guia-topico__num { position: static; display: inline-grid; width: 2rem; height: 2rem; font-size: 1rem; box-shadow: none; margin-bottom: .45rem; }
  .guia-topico__itens { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .mapa-passo, .mapa-item { min-height: 6.6rem; padding: .95rem .85rem .85rem; }
  .mapa-item { padding-right: 2rem; }
  .mapa-passo__num { font-size: 1.8rem; margin-bottom: .3rem; }
  .mapa-passo strong, .mapa-item strong { font-size: .95rem; }
  .mapa-passo span:last-child, .mapa-item span { font-size: .78rem; }
  .guia-topico__itens li:not(:last-child) .mapa-passo::after { display: none; }
  .mapa-passo .selo-novo { top: .95rem; right: .85rem; }
  .guia-atalhos a { font-size: .85rem; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .hero__in, .form-grid, .conta-grid { grid-template-columns: 1fr; }
  .hero__arte { max-width: 440px; margin: 0 auto; }
  .perfis { grid-template-columns: repeat(2, 1fr); }
  .passos, .planos { grid-template-columns: 1fr; }
  .passos li, .passos li:first-child { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), 50% 100%, 0 calc(100% - 18px)); padding-bottom: 2.6rem; }
  .plano--destaque { transform: none; }
  .faixa__in { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 0; }
  .faixa__in div:nth-child(3) { border: 0; padding-left: 0; }
  .menu a:not(.btn) { display: none; }
  .menu a.menu__entrar { display: inline-flex; }
  .conta-lateral { position: relative; top: 0; }
  .conta-nav { grid-template-columns: repeat(2, 1fr); column-gap: 1rem; }
  .cta-final__in { padding-right: 0; }
  .cta-final::before { width: 260px; height: 260px; right: -120px; opacity: .35; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .logo img { height: 36px; }
  .menu { gap: 1rem; }
  .menu__preco, .menu__guia, .menu__selo { display: none; }
  .menu a.menu__entrar { padding-right: 1.2rem; }
  .menu__entrar svg { display: none; }
  .perfis { grid-template-columns: 1fr; }
  .hero__cartao { min-width: 0; padding: .7rem .9rem; }
  .hero__cartao strong { font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revelar { opacity: 1; transform: none; }
}

/* aviso da legislação: versão curta só no celular */
.aviso-legislacao__curto { display: none; }
@media (max-width: 900px) {
  .aviso-legislacao__longo { display: none; }
  .aviso-legislacao__curto { display: inline; }
  /* área do cliente no celular: o conteúdo vem logo; o cartão da conta sai e o menu vira abas que rolam de lado */
  .cartao-membro { display: none; }
  .conta-lateral { display: flex; align-items: center; gap: .6rem; }
  .conta-nav { display: flex; flex: 1; min-width: 0; overflow-x: auto; border-top: 0; border-bottom: 2px solid var(--tinta); }
  .conta-nav a { white-space: nowrap; border-bottom: 0; padding: .6rem .75rem; gap: .3rem; }
  .conta-nav a.ativo { box-shadow: inset 0 -3px 0 var(--vermelho); padding-left: .75rem; }
  .conta-grid { gap: 1.6rem; }
  .conta-grid > * { min-width: 0; }  /* sem isso, as abas que rolam de lado alargam a página inteira */
}
@media (max-width: 600px) {
  /* título em cima e botão (Imprimir, Baixar em PDF) embaixo, à esquerda: o botão do WhatsApp fica à direita */
  .cab-linha { flex-direction: column; align-items: flex-start; }
  .zap { width: 50px; height: 50px; right: 14px; bottom: 14px; }
}
/* aviso "arraste para o lado", só nas tabelas que não cabem na tela (artigo.html marca com .rola) */
.tabela-dica { display: none; font-size: .8rem; color: var(--tinta-2); margin: 0 0 .35rem; }
.rola > .tabela-dica { display: block; }

@media print {
  .bandeira, .topo, .rodape, .zap, .conta-lateral, .nao-imprimir { display: none !important; }
  .so-imprimir { display: block; }
  .secao { padding: 0; }
  .conta-grid { display: block; }
  .documento { border: 0; padding: 0; }
}