/* Componentes das páginas novas (home, produtos, sob medida). Usa os tokens de marca.css. */

.container { width: min(calc(100% - 40px), var(--largura)); margin: 0 auto; }

h1, h2, h3 { font-family: var(--fonte); color: var(--cor-marinho-900); letter-spacing: -0.02em; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(34px, 4.6vw, 56px); font-weight: 800; }
h2 { font-size: clamp(27px, 3.2vw, 38px); font-weight: 800; }
h3 { font-size: 20px; font-weight: 750; }
p { margin: 0; }
.lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--cor-texto-suave); }

.marca-ponto { color: var(--cor-primaria); }
.marca-grifo { background: linear-gradient(transparent 68%, rgba(233, 196, 0, .55) 68%); }

.selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--cor-primaria-suave);
  color: var(--cor-marinho);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.selo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cor-amarelo); }
.selo-escuro { background: rgba(255, 255, 255, .12); color: #fff; }

.secao { padding: 88px 0; }
.secao-suave { background: var(--cor-fundo); }
.secao-escura { background: var(--cor-marinho-900); color: rgba(255, 255, 255, .86); }
.secao-escura h2, .secao-escura h3 { color: #fff; }
.secao-escura .lead { color: rgba(255, 255, 255, .78); }
.secao-cabeca { max-width: 760px; margin-bottom: 44px; display: grid; gap: 16px; }
.secao-cabeca.centro { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }

.acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link-seta { display: inline-flex; align-items: center; gap: 6px; color: var(--cor-primaria-hover); font-weight: 700; text-decoration: none; }
.link-seta::after { content: "→"; transition: transform .15s ease; }
.link-seta:hover::after { transform: translateX(3px); }

.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grade-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.cartao {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-gg);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-1);
}
.cartao p, .cartao li { color: var(--cor-texto-suave); font-size: 15px; line-height: 1.6; }
.cartao .icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--raio-g);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-hover);
  font-size: 20px;
  font-weight: 800;
}
.cartao-destaque { border-color: var(--cor-primaria); box-shadow: 0 0 0 1px var(--cor-primaria), var(--sombra-2); }
.lista-check { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.lista-check li { position: relative; padding-left: 26px; }
.lista-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cor-primaria-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%231786bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--cor-borda); border-radius: 999px; background: #fff; color: var(--cor-marinho); font-size: 14px; font-weight: 600; text-decoration: none; }
a.chip:hover { border-color: var(--cor-primaria); color: var(--cor-primaria-hover); }
.secao-escura .chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }

/* ── Herói ──────────────────────────────────────────────────── */
.heroi {
  position: relative;
  overflow: hidden;
  padding: 72px 0 80px;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(30, 156, 216, .16), transparent 60%),
    radial-gradient(600px 300px at 0% 100%, rgba(233, 196, 0, .12), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--cor-fundo) 100%);
}
.heroi-grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.heroi-texto { display: grid; gap: 22px; }
.heroi-texto h1 { max-width: 640px; }
.heroi-texto .lead { max-width: 560px; }
.heroi-prova { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 6px; color: var(--cor-texto-suave); font-size: 14px; font-weight: 600; }
.heroi-prova span { display: inline-flex; align-items: center; gap: 7px; }
.heroi-prova span::before { content: "✓"; color: var(--cor-sucesso); font-weight: 900; }

/* Composição de telas: janela + celular sobreposto */
.composicao { position: relative; min-height: 440px; }
.composicao .janela { position: absolute; right: 0; top: 0; width: 92%; }
.composicao .celular { position: absolute; left: 0; bottom: 0; width: 31%; }
.janela {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--cor-borda);
  background: #fff;
  box-shadow: var(--sombra-3);
}
.janela::before {
  content: "";
  display: block;
  height: 26px;
  background: var(--cor-superficie-2) radial-gradient(circle at 14px 13px, #e3534f 5px, transparent 5.5px), radial-gradient(circle at 32px 13px, #e9b23a 5px, transparent 5.5px), radial-gradient(circle at 50px 13px, #4fbf63 5px, transparent 5.5px);
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--cor-borda-suave);
}
.janela img { display: block; width: 100%; height: auto; }
.celular {
  overflow: hidden;
  border-radius: 28px;
  border: 6px solid #12293c;
  background: #12293c;
  box-shadow: var(--sombra-3);
}
.celular img { display: block; width: 100%; height: auto; border-radius: 22px; }

/* ── Três braços ────────────────────────────────────────────── */
.bracos .cartao { padding: 32px; gap: 16px; }
.bracos .cartao h3 { font-size: 22px; }
.bracos .num { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--cor-primaria-hover); text-transform: uppercase; }

/* ── Bloco de produto (texto + tela, alternando) ─────────────── */
.produto-bloco { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; padding: 48px 0; }
.produto-bloco + .produto-bloco { border-top: 1px solid var(--cor-borda-suave); }
.produto-bloco.invertido .produto-texto { order: 2; }
.produto-texto { display: grid; gap: 16px; }
.produto-texto h3 { font-size: clamp(24px, 2.4vw, 30px); }
.produto-texto .para-quem { color: var(--cor-marinho); font-weight: 700; }
.produto-nome { display: inline-flex; align-items: baseline; gap: 8px; color: var(--cor-texto-suave); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.produto-nome strong { color: var(--cor-marinho-900); font-size: 15px; letter-spacing: 0; text-transform: none; }

/* ── Passos ─────────────────────────────────────────────────── */
.passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: passo; }
.passo { position: relative; display: grid; gap: 10px; padding: 24px 22px 24px; border-radius: var(--raio-gg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.passo::before { counter-increment: passo; content: counter(passo, decimal-leading-zero); font-size: 13px; font-weight: 800; letter-spacing: .14em; color: var(--cor-amarelo); }
.passo h3 { font-size: 18px; }
.passo p { font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .76); }
.secao-clara .passo { background: #fff; border-color: var(--cor-borda-suave); box-shadow: var(--sombra-1); }
.secao-clara .passo::before { color: var(--cor-primaria-hover); }
.secao-clara .passo p { color: var(--cor-texto-suave); }

/* ── Faixa de prova ─────────────────────────────────────────── */
.prova { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.prova div { display: grid; gap: 6px; padding: 22px 20px; border-radius: var(--raio-gg); background: #fff; border: 1px solid var(--cor-borda-suave); }
.prova strong { font-size: 18px; color: var(--cor-marinho-900); }
.prova span { font-size: 14px; line-height: 1.5; color: var(--cor-texto-suave); }

/* ── Case ───────────────────────────────────────────────────── */
.case-destaque { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; padding: 40px; border-radius: var(--raio-gg); background: var(--cor-marinho-900); color: rgba(255, 255, 255, .84); }
.case-destaque h2 { color: #fff; font-size: clamp(24px, 2.6vw, 32px); }
.case-destaque .resultados { display: grid; gap: 14px; }
.case-destaque .resultados div { padding: 18px 20px; border-radius: var(--raio-g); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.case-destaque .resultados strong { display: block; color: var(--cor-amarelo); font-size: 26px; letter-spacing: -0.02em; }
.case-destaque .resultados span { font-size: 14px; }

/* ── CTA final ──────────────────────────────────────────────── */
.cta-final { padding: 56px 0; }
.cta-final .caixa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cta-final .cartao { padding: 36px; gap: 16px; }
.cta-final .cartao h3 { font-size: 24px; }

/* ── Página de produto ──────────────────────────────────────── */
.produto-heroi .heroi-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dores .cartao { gap: 10px; }
.dores .cartao .antes { color: #b93a3a; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dores .cartao .depois { color: var(--cor-sucesso); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; }
.recursos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.recursos div { padding: 20px 22px; border-radius: var(--raio-g); background: #fff; border: 1px solid var(--cor-borda-suave); }
.recursos strong { display: block; margin-bottom: 6px; color: var(--cor-marinho-900); font-size: 15px; }
.recursos span { color: var(--cor-texto-suave); font-size: 14px; line-height: 1.55; }
.telefones { display: flex; justify-content: center; gap: 20px; align-items: flex-end; }
.telefones .celular { width: 230px; }
.telefones .celular:nth-child(2) { width: 260px; }

/* ── Responsivo ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grade-4, .passos, .prova { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heroi-grade, .produto-heroi .heroi-grade { grid-template-columns: minmax(0, 1fr); }
  .composicao { min-height: 0; aspect-ratio: 16 / 11; }
}
@media (max-width: 860px) {
  .secao { padding: 64px 0; }
  .grade-3, .grade-2, .dores, .recursos { grid-template-columns: minmax(0, 1fr); }
  .produto-bloco { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .produto-bloco.invertido .produto-texto { order: 0; }
  .case-destaque { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .cta-final .caixa { grid-template-columns: minmax(0, 1fr); }
  .telefones .celular, .telefones .celular:nth-child(2) { width: 42%; }
}
@media (max-width: 640px) {
  .container { width: min(calc(100% - 32px), var(--largura)); }
  .heroi { padding: 44px 0 56px; }
  .grade-4, .passos, .prova { grid-template-columns: minmax(0, 1fr); }
  .acoes .btn { width: 100%; }
  .composicao .celular { width: 36%; }
  .cartao, .bracos .cartao, .cta-final .cartao { padding: 24px; }
}