/* FACIL DTF RIP — estilos do site. Sem framework, sem fontes externas. */

/* ===== Tokens (modo claro) ===== */
:root {
  --fundo: #f6f7f9;
  --fundo-alt: #eceff3;
  --superficie: #ffffff;
  --texto: #1b2129;
  --texto-suave: #4b5664;
  --borda: #dde2e8;
  --primaria: #00698c;
  --primaria-hover: #00536f;
  --primaria-texto: #ffffff;
  --rotulo: #b8005f;
  --whats: #107c41;
  --whats-hover: #0b6233;
  --whats-texto: #ffffff;
  --ok: #0f6b3a;
  --ok-fundo: #e2f4ea;
  --confirmar: #8a4b00;
  --confirmar-fundo: #fff0d6;
  --falta-texto: #3a2e00;
  --falta-fundo: #ffe680;
  --tinta-c: #00a8e0;
  --tinta-m: #e6007e;
  --tinta-y: #ffd400;
  --tinta-w: #ffffff;
  --tinta-w-borda: #9aa5b1;
  --sombra: 0 1px 2px rgb(16 24 40 / .06), 0 4px 16px rgb(16 24 40 / .06);
  --raio: 12px;
  --raio-peq: 8px;
  --largura: 72rem;
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
}

/* ===== Modo escuro: segue o sistema, ou a escolha salva (data-tema) ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0e1115; --fundo-alt: #13171c; --superficie: #171b21; --texto: #e7ebf0; --texto-suave: #a9b4c1;
    --borda: #2a313a; --primaria: #5cc8ee; --primaria-hover: #8ad8f3; --primaria-texto: #04212c; --rotulo: #ff5aa8;
    --whats: #25b862; --whats-hover: #3fd07b; --whats-texto: #04210f; --ok: #6fdc9e; --ok-fundo: #12301f;
    --confirmar: #ffc266; --confirmar-fundo: #3a2a10; --tinta-w-borda: #ffffff;
    --sombra: 0 1px 2px rgb(0 0 0 / .4), 0 4px 16px rgb(0 0 0 / .3);
    color-scheme: dark;
  }
  :root:not([data-tema="claro"]) .tema__sol { display: none; }
  :root:not([data-tema="claro"]) .tema__lua { display: block; }
  :root:not([data-tema="claro"]) .destaque { background: none; color: var(--tinta-y); }
}
:root[data-tema="escuro"] {
  --fundo: #0e1115; --fundo-alt: #13171c; --superficie: #171b21; --texto: #e7ebf0; --texto-suave: #a9b4c1;
  --borda: #2a313a; --primaria: #5cc8ee; --primaria-hover: #8ad8f3; --primaria-texto: #04212c; --rotulo: #ff5aa8;
  --whats: #25b862; --whats-hover: #3fd07b; --whats-texto: #04210f; --ok: #6fdc9e; --ok-fundo: #12301f;
  --confirmar: #ffc266; --confirmar-fundo: #3a2a10; --tinta-w-borda: #ffffff;
  --sombra: 0 1px 2px rgb(0 0 0 / .4), 0 4px 16px rgb(0 0 0 / .3);
  color-scheme: dark;
}
:root[data-tema="escuro"] .tema__sol { display: none; }
:root[data-tema="escuro"] .tema__lua { display: block; }
:root[data-tema="escuro"] .destaque { background: none; color: var(--tinta-y); }

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { overflow-x: clip; margin: 0; background: var(--fundo); color: var(--texto); font: 400 1.0625rem/1.65 var(--fonte); }
img, svg, video { max-width: 100%; display: block; }
a { color: var(--primaria); text-underline-offset: .18em; }
a:hover { color: var(--primaria-hover); }
:focus-visible { outline: 3px solid var(--primaria); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.015em; margin: 0 0 .5em; }
h1, .prancha__h1 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.6rem); font-weight: 750; line-height: 1.12; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 650; }
p { margin: 0 0 1em; }
code { font-family: var(--mono); font-size: .9em; background: var(--fundo-alt); padding: .1em .35em; border-radius: 4px; }
small { color: var(--texto-suave); }
.wrap { width: min(100% - 2.5rem, var(--largura)); margin-inline: auto; }
.wrap--estreito { max-width: 48rem; }
.pular { position: absolute; left: -999px; top: .5rem; z-index: 100; background: var(--superficie); padding: .6rem 1rem; border-radius: var(--raio-peq); }
.pular:focus { left: .5rem; }
.aviso-homolog { background: var(--falta-fundo); color: var(--falta-texto); text-align: center; font-size: .85rem; font-weight: 600; padding: .25rem; }

/* ===== Faixa CMY+W ===== */
.faixa__c { fill: var(--tinta-c); }
.faixa__m { fill: var(--tinta-m); }
.faixa__y { fill: var(--tinta-y); }
.faixa__w { fill: var(--tinta-w); stroke: var(--tinta-w-borda); stroke-width: 1.5; }

/* ===== Marca ===== */
.marca { display: inline-flex; align-items: center; gap: .55rem; color: var(--texto); text-decoration: none; letter-spacing: .02em; white-space: nowrap; }
.marca:hover { color: var(--texto); }
.marca__faixa { width: 30px; height: 30px; flex: none; }
.marca__nome { font-size: 1.08rem; font-weight: 500; }
.marca__nome b { font-weight: 800; }

/* ===== Botões ===== */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .7rem 1.35rem; border-radius: 999px; border: 2px solid transparent;
  font: 650 1rem/1.2 var(--fonte); text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.botao--primario { background: var(--primaria); color: var(--primaria-texto); }
.botao--primario:hover { background: var(--primaria-hover); color: var(--primaria-texto); }
.botao--secundario { background: transparent; color: var(--texto); border-color: var(--borda); }
.botao--secundario:hover { border-color: var(--texto); color: var(--texto); }
.botao--whats { background: var(--whats); color: var(--whats-texto); }
.botao--whats:hover { background: var(--whats-hover); color: var(--whats-texto); }
.botao--peq { min-height: 2.5rem; padding: .45rem 1rem; font-size: .95rem; }

/* ===== Cabeçalho ===== */
.topo { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--fundo) 90%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--borda); }
.topo__barra { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; }
.topo__nav { display: flex; gap: 1.4rem; margin-right: auto; }
.topo__nav a, .topo__conta { color: var(--texto-suave); text-decoration: none; font-weight: 550; font-size: .98rem; }
.topo__nav a:hover, .topo__nav a[aria-current="page"], .topo__conta:hover { color: var(--texto); }
.topo__nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--tinta-m); text-decoration-thickness: 3px; text-underline-offset: .5em; }
.topo__acoes { display: flex; align-items: center; gap: .9rem; }
.tema { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--borda); background: transparent; color: var(--texto); cursor: pointer; }
.tema svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tema__lua { display: none; }
.menu-movel { display: none; position: relative; }
.menu-movel summary { list-style: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--raio-peq); border: 1px solid var(--borda); cursor: pointer; }
.menu-movel summary::-webkit-details-marker { display: none; }
.menu-movel summary svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--texto); stroke-width: 2; stroke-linecap: round; }
.menu-movel__painel { position: absolute; right: 0; top: calc(100% + .6rem); min-width: 15rem; display: grid; padding: .5rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.menu-movel__painel a { padding: .75rem .9rem; color: var(--texto); text-decoration: none; border-radius: var(--raio-peq); font-weight: 550; }
.menu-movel__painel a:hover { background: var(--fundo-alt); }
@media (max-width: 960px) {
  .topo__nav, .topo__conta { display: none; }
  .menu-movel { display: block; }
  .topo__acoes { margin-left: auto; gap: .55rem; }
}
@media (max-width: 400px) {
  .marca__nome { font-size: .95rem; }
  .marca__faixa { width: 24px; height: 24px; }
  .topo__barra { gap: .6rem; }
  .botao--peq { padding: .45rem .8rem; font-size: .9rem; }
  .tema { width: 2.25rem; height: 2.25rem; }
}

/* ===== Seções ===== */
.secao { padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0; }
.secao--alt { background: var(--fundo-alt); }
.titulo-secao { max-width: 46rem; margin-bottom: 2.2rem; }
.titulo-secao--centro { margin-inline: auto; text-align: center; }
.titulo-secao__sub { color: var(--texto-suave); font-size: 1.12rem; }
.rotulo { color: var(--rotulo); font-size: .8rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .7rem; }
.secao__mais { margin: 2rem 0 0; font-weight: 600; }
.secao__mais--centro { text-align: center; }
.grade { display: grid; gap: 1.25rem; }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grade--4 { grid-template-columns: 1fr; } }
.grade + .grade { margin-top: 1.25rem; }

/* ===== Hero ===== */
.hero { padding: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) 0 clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.hero__grade { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero__sub { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: var(--texto-suave); max-width: 38rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.6rem 0 1rem; }
.hero__ctas--centro { justify-content: center; }
.hero__req { font-size: .92rem; color: var(--texto-suave); margin: 0; }
.destaque { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--tinta-y) 60%, transparent) 62%); padding: 0 .08em; }
@media (max-width: 860px) { .hero__grade { grid-template-columns: 1fr; } }

/* ===== Faixa de prova ===== */
.faixa-prova { border-block: 1px solid var(--borda); background: var(--superficie); }
.faixa-prova__lista { list-style: none; margin: 0 auto; padding: 1.4rem 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem 2rem; }
@media (max-width: 1080px) { .faixa-prova__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .faixa-prova__lista { grid-template-columns: 1fr; } }
.faixa-prova__lista li { display: grid; gap: .15rem; padding-left: 1rem; border-left: 4px solid var(--tinta-c); }
.faixa-prova__lista li:nth-child(2) { border-color: var(--tinta-m); }
.faixa-prova__lista li:nth-child(3) { border-color: var(--tinta-y); }
.faixa-prova__lista li:nth-child(4) { border-color: var(--tinta-w-borda); }
.faixa-prova__lista span { color: var(--texto-suave); font-size: .95rem; }

/* ===== Passos 01/02/03 ===== */
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.passos__item { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.5rem; }
.passos__num { display: inline-block; font: 800 2rem/1 var(--fonte); color: var(--texto); padding-bottom: .35rem; margin-bottom: .9rem; border-bottom: 5px solid var(--tinta-c); }
.passos__item:nth-child(3n+2) .passos__num { border-color: var(--tinta-m); }
.passos__item:nth-child(3n+3) .passos__num { border-color: var(--tinta-y); }
.passos__item p { color: var(--texto-suave); margin: 0; }

/* ===== Cards ===== */
.card { min-width: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.5rem; box-shadow: var(--sombra); }
.card h3 { margin-bottom: .35rem; }
.card__link { font-weight: 600; text-decoration: none; }
.card__link:hover { text-decoration: underline; }
.card-imp__topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.card-imp__tipo { color: var(--texto-suave); margin-bottom: .3rem; }
.card-imp__plano { font-size: .92rem; color: var(--texto-suave); }
.card-imp--confirmar { border-style: dashed; box-shadow: none; }

.tintas { display: inline-flex; gap: .3rem; vertical-align: middle; }
.tinta { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 6px; font: 800 .85rem/1 var(--fonte); }
.tinta--c { background: var(--tinta-c); color: #00202c; }
.tinta--m { background: var(--tinta-m); color: #ffffff; }
.tinta--y { background: var(--tinta-y); color: #2e2600; }
.tinta--k { background: #1b2129; color: #ffffff; box-shadow: inset 0 0 0 1px #6b7684; }
.tinta--w { background: #ffffff; color: #1b2129; box-shadow: inset 0 0 0 1.5px #9aa5b1; }

.selo { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--fundo-alt); color: var(--texto-suave); }
.selo--ok { background: var(--ok-fundo); color: var(--ok); }
.selo--confirmar { background: var(--confirmar-fundo); color: var(--confirmar); }

.card-plano { display: flex; flex-direction: column; position: relative; }
.card-plano--destaque { border: 2px solid var(--primaria); }
.card-plano__selo { position: absolute; top: -.85rem; left: 1.5rem; margin: 0; background: var(--rotulo); color: #ffffff; font-size: .78rem; font-weight: 700; padding: .2rem .7rem; border-radius: 999px; }
.card-plano__preco { display: grid; margin: .4rem 0 .6rem; }
.card-plano__valor { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.card-plano__periodo { color: var(--texto-suave); font-size: .92rem; }
.card-plano__resumo { color: var(--texto-suave); }
.card-plano .botao { margin-top: auto; }
.lista-check { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; }
.lista-check li { padding-left: 1.6rem; position: relative; }
.lista-check li::before { content: ""; position: absolute; left: .15rem; top: .5em; width: .6rem; height: .32rem; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg); }

/* ===== Tabela de especificações ===== */
.specs { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.specs caption { text-align: left; font-weight: 650; padding: 0 0 .6rem; }
.specs th, .specs td { text-align: left; padding: .85rem 1.1rem; border-top: 1px solid var(--borda); vertical-align: middle; }
.specs tr:first-child th, .specs tr:first-child td { border-top: 0; }
.specs th { width: 38%; color: var(--texto-suave); font-weight: 550; }

/* ===== FAQ ===== */
.faq { display: grid; gap: .75rem; }
.faq__item { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.faq__item summary { cursor: pointer; padding: 1.1rem 3rem 1.1rem 1.25rem; font-weight: 650; list-style: none; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; color: var(--texto-suave); }
.faq__item[open] summary::after { content: "−"; }
.faq__resp { padding: 0 1.25rem 1.1rem; color: var(--texto-suave); }
.faq__resp p:last-child { margin: 0; }

/* ===== Avisos ===== */
.aviso { border-left: 4px solid var(--primaria); background: var(--superficie); border-radius: 0 var(--raio-peq) var(--raio-peq) 0; padding: .9rem 1.1rem; margin: 0 0 1rem; }
.aviso--dica { border-color: var(--tinta-c); }
.aviso--atencao { border-color: var(--tinta-m); }
.aviso--info { border-color: var(--tinta-y); }

/* ===== Mídia e vídeo ===== */
.midia { margin: 0; border-radius: var(--raio); overflow: hidden; background: var(--fundo-alt); border: 1px solid var(--borda); position: relative; }
.midia--16x9 { aspect-ratio: 16 / 9; }
.midia--4x3 { aspect-ratio: 4 / 3; }
.midia--1x1 { aspect-ratio: 1; }
.midia img { width: 100%; height: 100%; object-fit: cover; }
.midia figcaption { font-size: .9rem; color: var(--texto-suave); padding: .5rem .8rem; }
.midia__vazio { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .5rem; padding: 1rem; text-align: center;
  background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--borda) 60%, transparent) 14px 15px); }
.midia__tipo { font-size: .75rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }
.video__play { position: absolute; inset: 0; width: 100%; display: grid; place-content: center; justify-items: center; gap: .4rem; border: 0; cursor: pointer; color: var(--texto); font: 600 1rem var(--fonte); background: var(--fundo-alt); padding: 1rem; }
.video__icone { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--primaria); color: var(--primaria-texto); font-size: 1.4rem; padding-left: .2rem; }
.video__play small { font-weight: 400; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== Marcações de conteúdo que falta ===== */
.falta { overflow-wrap: anywhere; background: var(--falta-fundo); color: var(--falta-texto); font-weight: 650; font-size: .88em; padding: .05em .4em; border-radius: 4px; }
.falta--confirmar { background: var(--confirmar-fundo); color: var(--confirmar); }

/* ===== Trilha ===== */
.trilha ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 1.5rem 0; font-size: .9rem; color: var(--texto-suave); }
.trilha li { display: inline-flex; align-items: center; min-height: 44px; }  /* o último item (sem link) na mesma linha dos links */
.trilha li + li::before { content: "/"; margin-right: .4rem; color: var(--texto-suave); }

/* ===== Depoimento ===== */
.depoimento { margin: 0; }
.depoimento blockquote { margin: 0 0 1rem; font-size: 1.05rem; }
.depoimento figcaption { color: var(--texto-suave); font-size: .92rem; }

/* ===== Empresa e CTA final ===== */
.empresa__grade { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (max-width: 860px) { .empresa__grade { grid-template-columns: 1fr; } }
@media (min-width: 861px) { .empresa .hero__ctas { flex-wrap: nowrap; } .empresa .botao { white-space: nowrap; } }
.cta-final__caixa { text-align: center; background: var(--superficie); border: 1px solid var(--borda); border-radius: calc(var(--raio) * 1.5); padding: clamp(2rem, 5vw, 3.5rem) 1.5rem; box-shadow: var(--sombra); max-width: 52rem; }
.cta-final__faixa { width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; }
.cta-final__caixa p { color: var(--texto-suave); max-width: 34rem; margin-inline: auto; }

/* ===== Rodapé ===== */
.rodape { background: var(--superficie); border-top: 1px solid var(--borda); }
.faixa-h { display: grid; grid-template-columns: repeat(4, 1fr); height: 6px; }
.faixa-h__c { background: var(--tinta-c); }
.faixa-h__m { background: var(--tinta-m); }
.faixa-h__y { background: var(--tinta-y); }
.faixa-h__w { background: var(--tinta-w); box-shadow: inset 0 0 0 1px var(--tinta-w-borda); }
.rodape__grade { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; padding: 3rem 0 2rem; }
.rodape__grade h2 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: .9rem; }
.rodape__grade nav { display: grid; gap: .55rem; align-content: start; }
.rodape__grade nav a { color: var(--texto); text-decoration: none; font-size: .95rem; }
.rodape__grade nav a:hover { color: var(--primaria); text-decoration: underline; }
.rodape__marca p { color: var(--texto-suave); margin: .8rem 0 0; font-size: .95rem; }
.rodape__empresa { border-top: 1px solid var(--borda); padding: 1.5rem 0 5.5rem; font-size: .88rem; color: var(--texto-suave); }
.rodape__copy { margin: .6rem 0 0; }
@media (max-width: 760px) { .rodape__grade { grid-template-columns: 1fr 1fr; } .rodape__marca { grid-column: 1 / -1; } }

/* ===== WhatsApp flutuante ===== */
.whats-flutuante {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60; display: inline-flex; align-items: center; gap: .5rem;
  width: 3.25rem; height: 3.25rem; justify-content: center;
  background: var(--whats); color: var(--whats-texto); text-decoration: none; border-radius: 50%;
  box-shadow: 0 4px 14px rgb(0 0 0 / .22);
}
.whats-flutuante span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.whats-flutuante:hover { background: var(--whats-hover); color: var(--whats-texto); }
.whats-flutuante svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.whats-flutuante__fone { fill: currentColor; stroke: none; }
@media (max-width: 600px) { .whats-flutuante { right: .8rem; bottom: .8rem; } }
main { padding-bottom: 2rem; }
html { scroll-padding-bottom: 5rem; }

/* ===== Prancha (homologação) ===== */
.prancha { padding-bottom: 4rem; }
.prancha__h { font-size: 1.3rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--borda); }
.prancha__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.prancha__faixa-g { width: 96px; height: 96px; }
.prancha__faixa-m { width: 56px; height: 56px; }
.cores { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.cor { display: flex; align-items: center; gap: .7rem; font-size: .9rem; }
.cor__amostra { width: 3rem; height: 3rem; border-radius: var(--raio-peq); border: 1px solid var(--borda); flex: none; }
.cor__amostra--fundo { background: var(--fundo); }
.cor__amostra--superficie { background: var(--superficie); }
.cor__amostra--texto { background: var(--texto); }
.cor__amostra--texto-suave { background: var(--texto-suave); }
.cor__amostra--borda { background: var(--borda); }
.cor__amostra--primaria { background: var(--primaria); }
.cor__amostra--rotulo { background: var(--rotulo); }
.cor__amostra--whats { background: var(--whats); }
.cor__amostra--tinta-c { background: var(--tinta-c); }
.cor__amostra--tinta-m { background: var(--tinta-m); }
.cor__amostra--tinta-y { background: var(--tinta-y); }
.cor__amostra--tinta-w { background: var(--tinta-w); border-color: var(--tinta-w-borda); }

/* ===== Movimento reduzido ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ===================== Fase 2b: páginas internas ===================== */
.wrap--medio { max-width: 58rem; }
.centro { text-align: center; }
.h3 { font-size: 1.2rem; font-weight: 650; }
.secao--curta { padding: 2rem 0 clamp(3rem, 2rem + 3vw, 5rem); }
.grade--topo { align-items: start; }
.hero__grade--topo { align-items: start; }
.pagina-topo { padding: .5rem 0 clamp(2rem, 1.5rem + 2vw, 3rem); }
.pagina-topo--centro { text-align: center; }
.pagina-topo--centro .hero__sub { margin-inline: auto; }
.pagina-topo h1 .tintas { margin-left: .4rem; }
.pagina-topo h1 .tinta { width: 2.1rem; height: 2.1rem; font-size: 1rem; }

/* Texto corrido (guias, legais) */
.texto h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); margin-top: 2.2rem; }
.texto h2:first-child { margin-top: 0; }
.texto ul, .texto ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
.texto li { margin-bottom: .45rem; }
.texto .midia, .texto .aviso { margin: 1.4rem 0; }
.etapas { counter-reset: etapa; list-style: none; padding-left: 0 !important; }
.etapas > li { counter-increment: etapa; position: relative; padding-left: 2.4rem; }
.etapas > li::before { content: counter(etapa); position: absolute; left: 0; top: .05em; width: 1.65rem; height: 1.65rem; border-radius: 50%; display: grid; place-items: center; background: var(--fundo-alt); border: 1px solid var(--borda); font-size: .85rem; font-weight: 750; }
pre { overflow-x: auto; background: var(--fundo-alt); border: 1px solid var(--borda); border-radius: var(--raio-peq); padding: .8rem 1rem; margin: .6rem 0; }
pre code { background: none; padding: 0; }
kbd { font-family: var(--mono); font-size: .85em; padding: .1em .45em; border: 1px solid var(--borda); border-bottom-width: 2px; border-radius: 4px; background: var(--superficie); }
.hash { word-break: break-all; }

/* Busca */
.busca { margin-top: 1.5rem; max-width: 36rem; }
.pagina-topo--centro .busca { margin-inline: auto; }
.busca__rotulo { display: block; font-weight: 650; margin-bottom: .4rem; }
.busca__campo { width: 100%; min-height: 3.2rem; padding: .7rem 1rem; font: 400 1.1rem var(--fonte); color: var(--texto); background: var(--superficie); border: 2px solid var(--borda); border-radius: var(--raio-peq); }
.busca__campo:focus { border-color: var(--primaria); outline: none; }
.busca__resposta { min-height: 1.6em; margin: .7rem 0 0; font-weight: 600; }
.busca__resposta--sim { color: var(--ok); }
.busca__vazio { margin-top: 1.5rem; padding: 1.25rem; border: 1px dashed var(--borda); border-radius: var(--raio); background: var(--superficie); }
.busca__resultados { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .5rem; }
.busca__resultados a { display: block; padding: .7rem .9rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-peq); text-decoration: none; color: var(--texto); }
.busca__resultados a:hover { border-color: var(--primaria); }
.busca__resultados small { display: block; margin-top: .2rem; }
[hidden] { display: none !important; }

/* Tabelas */
.tabela-rolagem { overflow-x: auto; margin: 0 0 1.5rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.tabela { width: 100%; border-collapse: collapse; min-width: 34rem; }
.tabela th, .tabela td { text-align: left; padding: .8rem 1rem; border-top: 1px solid var(--borda); vertical-align: middle; }
.tabela thead th { border-top: 0; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); background: var(--fundo-alt); }
.tabela tbody th { font-weight: 650; }
.tabela--comparar td { text-align: center; }
.tabela--comparar thead th:not(:first-child) { text-align: center; }

/* Recursos */
.sumario { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.sumario a { padding: .4rem .85rem; border: 1px solid var(--borda); border-radius: 999px; text-decoration: none; color: var(--texto); font-size: .92rem; background: var(--superficie); }
.sumario a:hover { border-color: var(--primaria); }
.recurso { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.recurso--inv > :first-child { order: 2; }
@media (max-width: 860px) { .recurso { grid-template-columns: 1fr; } .recurso--inv > :first-child { order: 0; } }

/* Preços */
.pagamentos { list-style: none; padding: 0; margin: 2rem 0 .5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.pagamentos li { padding: .45rem .9rem; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borda); font-weight: 600; font-size: .92rem; }

/* Versões */
.versoes { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.versao__topo { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.versao__topo h2 { margin: 0; }
.versao__data { margin-left: auto; color: var(--texto-suave); font-size: .92rem; }
.versao ul { margin: 0 0 .8rem; padding-left: 1.2rem; }
.versao__hash { margin: 0; }

/* Guias (Aprender) */
.guia { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); padding-bottom: 4rem; align-items: start; }
.guia__menu { position: sticky; top: 5.5rem; }
.guia__menu nav { display: grid; gap: .15rem; }
.guia__menu nav a { padding: .5rem .75rem; border-radius: var(--raio-peq); color: var(--texto-suave); text-decoration: none; font-weight: 550; }
.guia__menu nav a:hover { background: var(--fundo-alt); color: var(--texto); }
.guia__menu nav a[aria-current="page"] { background: var(--superficie); color: var(--texto); box-shadow: inset 3px 0 0 var(--tinta-m); }
.guia__ajuda { font-size: .9rem; color: var(--texto-suave); margin-top: 1.2rem; }
.guia__principal { max-width: 46rem; }
.guia__cabeca { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--borda); }
.copiar__ok { margin-left: .8rem; color: var(--ok); font-weight: 600; font-size: .92rem; }
.guia__vizinhos { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--borda); font-weight: 600; }
@media (max-width: 860px) {
  .guia { grid-template-columns: 1fr; }
  .guia__menu { position: static; border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem; background: var(--superficie); }
}
.card--link { display: block; color: var(--texto); text-decoration: none; transition: border-color .15s; }
.card--link:hover { color: var(--texto); border-color: var(--primaria); }
.card--link p:last-child { color: var(--texto-suave); margin: 0; }

/* Páginas legais */
.legal h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); }
.legal__rascunho { display: inline-block; background: var(--confirmar-fundo); color: var(--confirmar); font-weight: 750; padding: .3rem .7rem; border-radius: var(--raio-peq); }

/* ===================== Fase 4: conta ===================== */
.form { display: grid; gap: .8rem; }
.form--centro { justify-items: center; margin-top: 1rem; }
.form__rotulo { font-weight: 650; }
.form-conta { max-width: 28rem; margin-top: 1.5rem; }
.pagina-topo--centro .form-conta { margin-inline: auto; text-align: left; }
.form-conta__ou { display: flex; align-items: center; gap: .8rem; color: var(--texto-suave); margin: 1.2rem 0; font-size: .9rem; }
.form-conta__ou::before, .form-conta__ou::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.form-conta__nota { margin: 1rem 0 0; }
.botao--google { width: 100%; background: var(--superficie); }
.botao--google svg { width: 1.2rem; height: 1.2rem; }
.botao--desligado { opacity: .55; cursor: not-allowed; }
button.botao { font-family: var(--fonte); }
.alerta { padding: .8rem 1rem; border-radius: var(--raio-peq); background: var(--ok-fundo); color: var(--ok); font-weight: 600; margin: 0 0 1.2rem; }
.alerta--erro { background: var(--confirmar-fundo); color: var(--confirmar); }
.painel__topo { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; }
.painel__destaque { font-size: 1.5rem; font-weight: 750; margin: .2rem 0 .3rem; }

/* Fase 5: pedidos */
.lista-pedidos { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.lista-pedidos li { padding-bottom: .6rem; border-bottom: 1px solid var(--borda); }

/* CMY+W e 6 cores */
.cmyw { background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--tinta-c); border-radius: 0 var(--raio) var(--raio) 0; padding: 1.1rem 1.25rem; margin: 1.5rem 0; }
.cmyw__titulo { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .6rem; }
.cmyw p:last-child { margin-bottom: 0; }
.seis-cores__cta { display: block; margin-top: .8rem; }

/* ===================== Lote de UX (15/11) ===================== */
/* Nada passa da largura da tela (clip não cria barra de rolagem nem quebra o cabeçalho fixo) */
html, body { overflow-x: clip; max-width: 100%; }
.topo__barra { min-width: 0; }
.marca { min-width: 0; }
.so-celular { display: none; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) { .so-celular { display: block; } }

/* Cabeçalho no celular: "Baixar" (sem "grátis") e o tema dentro do menu */
.tema--menu { display: none; }
@media (max-width: 600px) {
  .so-largo { display: none; }
  .tema--topo { display: none; }
  .tema--menu { display: flex; align-items: center; gap: .6rem; width: 100%; height: auto; min-height: 44px; padding: .75rem .9rem;
                border: 0; border-top: 1px solid var(--borda); border-radius: 0; justify-content: flex-start; font: 550 1rem var(--fonte); }
  .topo__barra { gap: .5rem; }
  .menu-movel__painel { min-width: 0; width: min(16rem, calc(100vw - 1.5rem)); }
}

/* Área de toque de pelo menos 44 px */
.botao--peq { min-height: 2.75rem; }
.tema, .menu-movel summary { width: 2.75rem; height: 2.75rem; }
.card__link, .secao__mais a, .trilha a, .rodape__grade nav a, .guia__menu nav a, .lista-pedidos a,
.sumario a, .linha-aviso a, .guia__vizinhos a, .busca__resultados a { display: inline-flex; align-items: center; min-height: 44px; }
.menu-movel__painel a { min-height: 44px; display: flex; align-items: center; }
.faq__item summary { min-height: 44px; }

/* WhatsApp menor no celular, com espaço reservado no fim das páginas */
@media (max-width: 600px) {
  .whats-flutuante { width: 2.75rem; height: 2.75rem; right: .7rem; bottom: .7rem; }
  .whats-flutuante svg { width: 1.3rem; height: 1.3rem; }
  main { padding-bottom: 4.5rem; }
}

/* Comparativo: 1ª coluna fixa e dica de arrastar no celular */
.tabela-dica { display: none; margin: 0 0 .5rem; font-size: .9rem; color: var(--texto-suave); text-align: right; }
.tabela-rolagem--fixa .tabela th:first-child { position: sticky; left: 0; z-index: 1; background: var(--superficie); box-shadow: 1px 0 0 var(--borda); }
.tabela-rolagem--fixa .tabela thead th:first-child { background: var(--fundo-alt); }
@media (max-width: 760px) { .tabela-dica { display: block; } .tabela--comparar th:first-child { min-width: 9.5rem; } }

/* Planos */
.card-plano__economia { color: var(--ok); font-weight: 650; font-size: .95rem; margin: 0 0 .4rem; }
.card-plano__antigo { color: var(--texto-suave); font-size: 1.05rem; }
.card-plano__promo { justify-self: start; margin-top: .3rem; background: var(--rotulo); color: #fff; font-size: .78rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; }

/* Faixa de promoção (aparece só quando a API diz que há promoção ativa) */
.faixa-promo { display: flex; align-items: center; justify-content: center; gap: .5rem; background: var(--texto); color: var(--fundo); padding: .35rem 2.75rem .35rem 1rem; position: relative; font-size: .92rem; font-weight: 600; text-align: center; }
.faixa-promo a { color: inherit; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.faixa-promo__fechar { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border: 0; background: transparent; color: inherit; font-size: 1.4rem; cursor: pointer; }

/* Baixar e conta */
.baixar__passo { margin: 0 0 1rem; }
.linha-aviso { margin: .5rem 0 0; }
.pedidos-antigos { margin: 0 0 1rem; }
.pedidos-antigos summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--texto-suave); }