:root {
  --azul: #2f6bf6;
  --azul-forte: #1f4fd6;
  --azul-claro: #6f9bff;
  --azul-gelo: #eaf0fe;
  --fundo: #f3f6fc;
  --cartao: #ffffff;
  --linha: #e2e8f5;
  --tinta: #0b1220;
  --tinta-2: #3b4458;
  --tinta-3: #6b7489;
  --raio: 28px;
  --sombra: 0 10px 30px rgba(31, 79, 214, 0.08);
  --titulo: 'Manrope', system-ui, sans-serif;
  --texto: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titulo); margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
main, .topo, .rodape { width: min(1280px, calc(100% - 32px)); margin: 0 auto; }

/* ---------- botões, celulares e etiquetas comuns ---------- */
.botao-azul, .botao-branco, .flutuante {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 6px 6px 6px 22px;
  border-radius: 999px;
  white-space: nowrap;
}
.botao-azul { background: linear-gradient(90deg, var(--azul) 0%, var(--azul-claro) 100%); color: #fff; box-shadow: 0 10px 24px rgba(47, 107, 246, 0.3); }
.botao-azul:hover { filter: brightness(1.05); }
.botao-icone { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--azul); display: inline-flex; align-items: center; justify-content: center; }
.botao-icone svg { width: 20px; height: 20px; }
.botao-branco { background: #fff; color: var(--azul); }
.botao-branco .botao-icone { background: var(--azul); color: #fff; }
.botao-contorno { text-decoration: none; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.6); border-radius: 999px; padding: 14px 24px; font-weight: 600; }
.celular {
  width: 250px;
  border-radius: 38px;
  padding: 9px;
  background: #0b1220;
  box-shadow: 0 30px 60px rgba(4, 18, 70, 0.45);
}
.celular img { border-radius: 30px; width: 100%; aspect-ratio: 412 / 915; object-fit: cover; object-position: top; }
.etiqueta {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px 8px 10px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(4, 18, 70, 0.22);
  white-space: nowrap;
}
.etiqueta i { width: 10px; height: 10px; border-radius: 50%; background: var(--azul); box-shadow: 0 0 0 4px var(--azul-gelo); }
.marca { white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 8px; font-family: var(--titulo); font-weight: 700; font-size: 16px; text-decoration: none; color: var(--tinta); }
.marca-icone { width: 28px; height: 28px; color: var(--azul); display: inline-flex; }
.marca-icone svg { width: 100%; height: 100%; }
.redondo { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.redondo svg { width: 20px; height: 20px; }
.redondo.escuro { background: #0b1220; color: #fff; }
.redondo.claro { background: #8fb2ff; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.ponto {
  display: inline-block; width: 0.66em; height: 0.66em; border-radius: 50%; margin: 0 0.02em; vertical-align: -0.04em;
  background: radial-gradient(circle at 34% 30%, #c9dbff 0%, #5d8cff 28%, var(--azul) 55%, #1236b8 100%);
  box-shadow: 0 10px 24px rgba(47, 107, 246, 0.45), inset -6px -8px 14px rgba(10, 30, 120, 0.35);
}

/* ---------- capa (fiel à referência) ---------- */
.capa {
  position: relative;
  margin-top: 16px;
  height: clamp(560px, 50vw, 680px);
  border-radius: 28px;
  background: linear-gradient(180deg, #f6f8fd 0%, #eef3fc 100%);
  box-shadow: 0 1px 0 #fff inset, 0 10px 40px rgba(31, 79, 214, 0.06);
  overflow: hidden;
  isolation: isolate;
}
.capa-azul {
  position: absolute;
  left: 49.8%;
  top: 12px;
  right: 12px;
  bottom: 20px;
  border-radius: 26px;
  color: #fff;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cpath d='M30 2h60l30 50-30 50H30L0 52z' fill='none' stroke='white' stroke-opacity='0.07' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 120px 104px,
    radial-gradient(700px 500px at 30% 40%, rgba(255, 255, 255, 0.10), transparent 60%),
    linear-gradient(160deg, #3a74fb 0%, #2f6bf6 45%, #2a62ee 100%);
  z-index: 0;
}
.capa-azul-topo { position: absolute; top: 22px; left: 26%; right: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.capa-local { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.25; opacity: 0.95; }
.capa-local svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.capa-botoes { display: flex; gap: 10px; }
.capa-azul-texto { position: absolute; right: 8%; top: 25%; width: 36%; min-width: 230px; }
.capa-azul-texto h2 { font-weight: 500; font-size: clamp(26px, 2.6vw, 36px); line-height: 1; letter-spacing: -0.02em; margin-bottom: 14px; }
.capa-azul-texto p { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.78); }
.capa-azul-texto strong { color: #fff; font-weight: 600; }
.capa-azul-pe { position: absolute; right: 22px; bottom: 22px; display: flex; align-items: flex-end; gap: 18px; }
.capa-azul-pe p { font-size: 11.5px; text-align: right; line-height: 1.35; color: rgba(255, 255, 255, 0.8); }
.capa-azul-pe strong { color: #fff; }
.seta { color: rgba(255, 255, 255, 0.85); width: 28px; height: 28px; display: inline-flex; margin-bottom: 4px; }
.seta svg { width: 100%; height: 100%; }
.avatares { display: flex; }
.avatares span { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--azul); border: 2px solid #fff; margin-left: -10px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(4, 18, 70, 0.25); }
.avatares span:first-child { margin-left: 0; }
.avatares span:nth-child(2) { background: #e7eeff; }
.avatares svg { width: 18px; height: 18px; }

.capa-topo { position: absolute; left: 28px; top: 18px; right: 52%; display: flex; align-items: center; gap: 22px; z-index: 3; }
.menu { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.menu-botao { width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 2px 8px rgba(11, 18, 32, 0.06); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; padding: 0; }
.menu-botao span { display: block; width: 14px; height: 1.6px; border-radius: 2px; background: var(--tinta); }
.menu-grupo { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #e9eef8; }
.menu-grupo a, .menu-destaque { text-decoration: none; font-size: 13px; font-weight: 500; color: var(--tinta); padding: 9px 15px; border-radius: 999px; white-space: nowrap; }
.menu-grupo a { background: #fff; box-shadow: 0 1px 3px rgba(11, 18, 32, 0.05); }
.menu-grupo a:hover { color: var(--azul); }
.menu-destaque { background: #e4ebfb; padding: 12px 20px; }
.menu-destaque:hover { background: #d8e3fb; }

.capa-esq { position: absolute; left: 34px; top: 21%; right: 54%; z-index: 2; display: flex; flex-direction: column; gap: 26px; height: 74%; }
.capa-titulo { position: relative; align-self: flex-start; }
.capa-titulo h1 {
  font-family: var(--titulo);
  font-weight: 600;
  font-size: clamp(72px, 7.8vw, 116px);
  line-height: 0.84;
  letter-spacing: -0.06em;
  color: #0b0f19;
  white-space: nowrap;
}
.capa-lema { position: absolute; left: calc(100% + 14px); bottom: 0.3em; font-size: 12.5px; line-height: 1.35; color: var(--tinta-3); white-space: nowrap; }
.capa-lema strong { color: var(--tinta); font-weight: 600; }
.capa-esq .botao-azul { align-self: flex-start; padding: 5px 5px 5px 20px; font-size: 14px; background: linear-gradient(90deg, #2f6bf6 0%, #4f86ff 70%, #8fb2ff 100%); }
.capa-esq .botao-icone { width: 36px; height: 36px; }

.resultados {
  margin-top: auto;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  align-items: center;
  background: #fff;
  border-radius: 18px;
  padding: 8px 14px 8px 8px;
  box-shadow: 0 8px 26px rgba(31, 79, 214, 0.08);
  max-width: 470px;
}
.tour { position: relative; display: block; height: 118px; border-radius: 14px; overflow: hidden; }
.tour img { width: 100%; height: 100%; object-fit: cover; object-position: left top; filter: saturate(0.9) brightness(0.95); }
.tour-play { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--azul); display: inline-flex; align-items: center; justify-content: center; }
.tour-play svg { width: 14px; height: 14px; margin-left: 2px; }
.tour-legenda { position: absolute; left: 10px; bottom: 9px; font-size: 10.5px; color: #fff; background: rgba(11, 18, 32, 0.35); padding: 2px 8px; border-radius: 999px; backdrop-filter: blur(4px); }
.tour-ponto { position: absolute; right: 12px; bottom: 12px; width: 7px; height: 7px; border-radius: 50%; background: #0b1220; }
.resultados-num { position: relative; }
.resultados-titulo { font-size: 10.5px; color: var(--tinta-3); margin-bottom: 8px; }
.resultados-chave { position: absolute; right: 0; top: 2px; width: 22px; height: 7px; border-radius: 999px; background: linear-gradient(90deg, #2f6bf6, #8fb2ff); }
.resultados ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.resultados li strong { display: block; font-family: var(--titulo); font-weight: 500; font-size: 28px; color: var(--azul); letter-spacing: -0.03em; line-height: 1.05; }
.resultados li span { display: block; font-size: 10.5px; color: var(--tinta-3); line-height: 1.25; text-align: center; }
.resultados li span b { color: var(--tinta); font-weight: 600; }

.medica { position: absolute; left: 35.5%; bottom: 0; height: 96%; z-index: 1; pointer-events: none; }
.medica img { height: 100%; width: auto; display: block; filter: drop-shadow(0 20px 40px rgba(4, 18, 70, 0.18)); }
.capa-vidros i { position: absolute; z-index: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.35); border: 1px solid rgba(255, 255, 255, 0.55); backdrop-filter: blur(6px); }
.capa-vidros i:nth-child(1) { width: 70px; height: 70px; left: 60%; top: 36%; }
.capa-vidros i:nth-child(2) { width: 46px; height: 46px; left: 41%; top: 54%; background: rgba(255, 255, 255, 0.55); }
.capa-vidros i:nth-child(3) { width: 38px; height: 70px; left: 69%; top: 46%; }

.rotulo {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 20px; border-radius: 999px;
  font-size: 15px; font-weight: 500; color: #1b2233;
  background: rgba(226, 233, 246, 0.82);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(11, 18, 32, 0.08);
  white-space: nowrap;
}
.rotulo i { width: 12px; height: 12px; border-radius: 50%; background: #0b1220; border: 3px solid #d9e2f5; box-shadow: 0 0 0 1px rgba(11,18,32,.15); }
.r1 { left: 33%; top: 59%; padding-right: 10px; }
.r1 i { margin-left: 4px; position: relative; top: 14px; }
.r2 { left: 61%; top: 56.5%; padding-left: 10px; }
.r2 i { position: relative; top: 14px; }
.r3 { left: 64.5%; top: 79%; padding-left: 10px; }
.r3 i { position: relative; top: 14px; }

/* ---------- frase ---------- */
.frase {
  margin-top: 16px;
  background: var(--cartao);
  border-radius: var(--raio);
  padding: 72px 28px;
  text-align: center;
  background-image: radial-gradient(circle at 1px 1px, #e6ecf8 1px, transparent 0);
  background-size: 28px 28px;
}
.sobretitulo { color: var(--tinta-3); font-size: 13px; letter-spacing: 0.02em; margin-bottom: 14px; }
.frase h2 { font-weight: 400; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.18; max-width: 920px; margin: 0 auto; color: var(--tinta-2); }
.frase h2 strong { color: var(--tinta); font-weight: 600; }
.chip { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 34px; border-radius: 999px; background: linear-gradient(90deg, var(--azul), var(--azul-claro)); vertical-align: middle; }
.chip svg { width: 18px; height: 18px; }
.chip-pessoas { width: auto; padding: 0 6px; background: var(--azul-gelo); gap: 0; }
.chip-pessoas i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; margin-left: -6px; background: linear-gradient(135deg, #9db8ff, var(--azul)); }
.chip-pessoas i:first-child { margin-left: 0; background: linear-gradient(135deg, #ffd3b0, #f08b5a); }
.chip-pessoas i:last-child { background: linear-gradient(135deg, #b9f0d0, #2fb36b); }
.frase-sub { max-width: 560px; margin: 22px auto 28px; color: var(--tinta-3); font-size: 15px; }
.frase-sub strong { color: var(--tinta); font-weight: 600; }

/* ---------- recursos ---------- */
.recursos { margin-top: 16px; padding: 56px 0 24px; }
.recursos-cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.recursos-cabeca h2 { font-weight: 400; font-size: clamp(34px, 4vw, 52px); line-height: 0.98; }
.recursos-cabeca small { font-family: var(--texto); font-size: 13px; color: var(--tinta-3); letter-spacing: 0; }
.recursos-cabeca p { max-width: 340px; text-align: right; color: var(--tinta-3); font-size: 14px; }
.recursos-cabeca a { color: var(--azul); font-weight: 600; }

.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; grid-auto-rows: minmax(260px, auto); }

/* Cada recurso com a sua cor. */
.cartao.cor-azul    { --c: #2f6bf6; --c2: #6f9bff; }
.cartao.cor-roxo    { --c: #7c3aed; --c2: #b18cff; }
.cartao.cor-verde   { --c: #059669; --c2: #34d399; }
.cartao.cor-laranja { --c: #ea580c; --c2: #fdba74; }
.cartao.cor-rosa    { --c: #db2777; --c2: #f9a8d4; }
.cartao.cor-ciano   { --c: #0284c7; --c2: #67e8f9; }
.cartao.cor-indigo  { --c: #4338ca; --c2: #a5b4fc; }
.cartao.cor-ambar   { --c: #d97706; --c2: #fcd34d; }

.cartao {
  --c: var(--azul); --c2: var(--azul-claro);
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background:
    radial-gradient(220px 160px at 100% 0%, color-mix(in srgb, var(--c2) 45%, transparent), transparent 70%),
    linear-gradient(165deg, color-mix(in srgb, var(--c) 10%, #fff) 0%, #fff 62%);
  border: 1px solid color-mix(in srgb, var(--c) 16%, #fff);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--c) 10%, transparent);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cartao:hover { transform: translateY(-4px); box-shadow: 0 18px 40px color-mix(in srgb, var(--c) 22%, transparent); }
.numero {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 54px;
  line-height: 1;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, var(--c) 0%, var(--c2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cartao h3 { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 12px; color: #0b1220; letter-spacing: -0.01em; }
.cartao p { font-size: 14px; line-height: 1.55; color: #3f4a60; }
.cartao-pe { margin-top: auto; display: flex; }
.cartao-pe span {
  font-size: 12.5px; font-weight: 700; color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 22%, #fff);
  padding: 5px 12px; border-radius: 999px;
}

.ic {
  width: 40px; height: 40px; flex: none; border-radius: 12px; position: relative;
  background: linear-gradient(135deg, var(--c) 0%, var(--c2) 140%);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 35%, transparent);
}
.ic::after {
  content: ''; position: absolute; inset: 10px; background: #fff;
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
}
.ic-agenda { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.ic-video { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Crect x='2' y='6' width='14' height='12' rx='3'/%3E%3Cpath d='m16 10 6-3v10l-6-3z'/%3E%3C/svg%3E"); }
.ic-pix { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='m12 3 9 9-9 9-9-9z'/%3E%3Cpath d='m8 12 4-4 4 4-4 4z'/%3E%3C/svg%3E"); }
.ic-cartao { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Crect x='2' y='5' width='20' height='14' rx='3'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E"); }
.ic-doc { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M6 2h9l5 5v15H6z'/%3E%3Cpath d='M14 2v6h6M9 13h7M9 17h5'/%3E%3C/svg%3E"); }
.ic-pep { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M3 12h4l3-7 4 14 3-7h4'/%3E%3C/svg%3E"); }
.ic-painel { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Crect x='3' y='3' width='7' height='9' rx='2'/%3E%3Crect x='14' y='3' width='7' height='5' rx='2'/%3E%3Crect x='14' y='12' width='7' height='9' rx='2'/%3E%3Crect x='3' y='16' width='7' height='5' rx='2'/%3E%3C/svg%3E"); }
.ic-marca { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 3a9 9 0 0 0 0 18c1.1 0 1.5-.8 1.5-1.5 0-.9-.6-1.2-.6-2 0-.9.7-1.5 1.6-1.5H17a4 4 0 0 0 4-4c0-5-4-9-9-9zm-5 9.5A1.5 1.5 0 1 1 7 9.5a1.5 1.5 0 0 1 0 3zm3-4A1.5 1.5 0 1 1 10 5.5a1.5 1.5 0 0 1 0 3zm4 0A1.5 1.5 0 1 1 14 5.5a1.5 1.5 0 0 1 0 3zm3 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E"); }

.cartao-azul {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 26px;
  color: #fff;
  background:
    radial-gradient(260px 200px at 85% 10%, rgba(255, 255, 255, 0.28), transparent 70%),
    linear-gradient(150deg, #3b78ff 0%, var(--azul) 40%, #1a3fb8 100%);
  box-shadow: 0 18px 40px rgba(47, 107, 246, 0.35);
}
.cartao.cartao-azul p { color: #fff; }
.cartao.cartao-azul .cartao-azul-marca { font-size: 32px; line-height: 1.1; }
.cartao.cartao-azul .cartao-azul-texto { font-size: 15px; }
.cartao-azul-marca { font-family: var(--titulo); font-size: 32px; font-weight: 700; letter-spacing: -0.03em; position: relative; z-index: 1; }
.cartao-azul-texto { font-size: 15px; line-height: 1.5; max-width: 220px; margin-top: 12px; position: relative; z-index: 1; color: #fff; font-weight: 500; }
.bolhas i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.06) 70%); }
.bolhas i:nth-child(1) { width: 120px; height: 120px; left: -24px; bottom: -34px; }
.bolhas i:nth-child(2) { width: 72px; height: 72px; left: 96px; bottom: 18px; }
.bolhas i:nth-child(3) { width: 44px; height: 44px; left: 170px; bottom: 72px; }
.bolhas i:nth-child(4) { width: 170px; height: 170px; right: -64px; top: 46px; border: 18px solid rgba(255, 255, 255, 0.22); background: none; }

.cartao-chamada {
  text-decoration: none; color: #fff; border: 0;
  background:
    radial-gradient(240px 180px at 100% 0%, rgba(255, 255, 255, 0.25), transparent 70%),
    linear-gradient(150deg, #0b1220 0%, #1e2a4a 55%, #2f6bf6 140%);
  box-shadow: 0 18px 40px rgba(11, 18, 32, 0.25);
}
.cartao-chamada h3 { color: #fff; }
.cartao-chamada p { color: rgba(255, 255, 255, 0.82); }
.cartao-chamada .cartao-pe span { color: #fff; background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); }
.chamada-icone { width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--azul); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.15); }
.chamada-icone svg { width: 22px; height: 22px; margin-left: 3px; }

.cartao-foto { position: relative; grid-column: span 2; margin: 0; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(31, 79, 214, 0.1); min-height: 260px; border: 1px solid var(--linha); }
.cartao-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* ---------- por que ---------- */
.porque { margin-top: 40px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; }
.porque-azul {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio);
  color: #fff;
  padding: 40px;
  min-height: 560px;
  background:
    radial-gradient(500px 300px at 20% 0%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(160deg, var(--azul) 0%, var(--azul-forte) 100%);
}
.porque-azul h2 { font-weight: 500; font-size: clamp(36px, 4vw, 54px); line-height: 0.95; }
.porque-sub { margin-top: 14px; font-size: 12px; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.04em; }
.porque-sub span { font-weight: 700; }
.porque-telas { position: absolute; right: 40px; bottom: -90px; display: flex; align-items: flex-end; }
.porque-telas .celular { width: 210px; }
.celular-atras { margin-left: -60px; margin-bottom: 70px; transform: rotate(6deg); }
.e4 { left: 56px; top: 52%; }
.e5 { left: 90px; top: 64%; }
.e6 { left: 40px; top: 76%; }

.porque-lista { background: var(--cartao); border-radius: var(--raio); padding: 40px; display: flex; flex-direction: column; }
.vantagens { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.vantagens strong { font-family: var(--titulo); font-weight: 300; font-size: 64px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--tinta); letter-spacing: -0.04em; }
.vantagens h3 { font-size: 16px; font-weight: 600; margin: 8px 0 6px; }
.vantagens p { font-size: 13.5px; color: var(--tinta-3); }
.porque-fato { margin-top: auto; padding-top: 28px; font-size: 13px; color: var(--tinta-3); }
.porque-fato span { color: var(--tinta); font-weight: 700; }

/* ---------- perfis ---------- */
.perfis { margin-top: 56px; }
.perfis > h2 { font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 24px; }
.perfis-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.perfis-grade article { background: var(--cartao); border-radius: 22px; padding: 22px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 14px; }
.perfis-grade h3 { font-size: 22px; font-weight: 600; }
.perfis-grade ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.perfis-grade li { font-size: 14px; color: var(--tinta-2); padding-left: 22px; position: relative; }
.perfis-grade li::before { content: ''; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--azul); box-shadow: 0 0 0 4px var(--azul-gelo); }
.celular-pequeno { width: 150px; margin: 0 auto; }
.celular-pequeno img { border-radius: 22px; }
.tela-larga { border-radius: 16px; overflow: hidden; border: 1px solid var(--linha); background: var(--fundo); height: 264px; }
.tela-larga img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* ---------- segurança ---------- */
.seguranca { margin-top: 56px; background: var(--cartao); border-radius: var(--raio); padding: 48px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; }
.seguranca-texto h2 { font-weight: 500; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; margin-bottom: 14px; }
.seguranca-texto p:not(.sobretitulo) { color: var(--tinta-3); }
.seguranca-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.seguranca-lista li { background: var(--fundo); border-radius: 16px; padding: 16px 18px; font-size: 13.5px; color: var(--tinta-3); }
.seguranca-lista b { display: block; color: var(--tinta); font-size: 15px; margin-bottom: 4px; }

/* ---------- contato ---------- */
.contato {
  margin: 56px 0 16px;
  border-radius: var(--raio);
  padding: 64px 28px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(255, 255, 255, 0.2), transparent 60%),
    linear-gradient(160deg, var(--azul) 0%, var(--azul-forte) 100%);
}
.contato h2 { font-weight: 500; font-size: clamp(30px, 4vw, 52px); line-height: 1.02; max-width: 780px; margin: 0 auto 14px; }
.contato p { opacity: 0.88; max-width: 520px; margin: 0 auto 28px; }
.contato-acoes { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: center; }

/* ---------- rodapé ---------- */
.rodape { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 28px 4px 40px; color: var(--tinta-3); font-size: 13px; }
.rodape-marca { display: inline-flex; align-items: center; gap: 10px; font-family: var(--titulo); font-weight: 800; color: var(--tinta); font-size: 16px; }
.rodape nav { display: flex; gap: 18px; flex-wrap: wrap; }
.rodape nav a { text-decoration: none; }
.rodape nav a:hover { color: var(--azul); }

.flutuante { display: none; }

/* ---------- animação ---------- */
.revelar { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.revelar.visivel { opacity: 1; transform: none; }

/* ---------- telas menores ---------- */
@media (max-width: 1180px) {
  .menu-grupo a { padding: 8px 11px; }
  .menu-destaque { padding: 10px 14px; }
  .rotulo { font-size: 13.5px; }
}

@media (max-width: 1100px) {
  .capa-topo { right: 50%; gap: 12px; }
  .menu-grupo a:nth-child(3) { display: none; }
  .capa-azul-texto { width: 40%; }
  .capa-azul-pe p, .capa-vidros { display: none; }
  .grade { grid-template-columns: repeat(2, 1fr); }
  .porque, .seguranca { grid-template-columns: 1fr; }
  .perfis-grade { grid-template-columns: 1fr 1fr; }
  .perfis-grade article:last-child { grid-column: span 2; }
}

@media (max-width: 860px) {
  /* Capa no celular: título e resultados em cima, o bloco azul com a médica embaixo. */
  .capa { height: auto; padding: 16px 16px 0; display: flex; flex-direction: column; border-radius: 24px; }
  .capa-topo { position: static; padding: 4px 4px 0; order: 1; }
  .capa-esq { order: 2; }
  .capa-azul { order: 3; }
  .menu { position: relative; }
  .menu-grupo {
    display: none; position: absolute; right: 0; top: 48px; z-index: 30;
    flex-direction: column; background: #fff; border-radius: 18px; padding: 8px;
    box-shadow: 0 20px 40px rgba(11, 18, 32, 0.14); min-width: 190px;
  }
  .menu.aberto .menu-grupo { display: flex; }
  .menu-grupo a { box-shadow: none; }
  .menu-grupo a:nth-child(3) { display: block; }
  .menu-destaque { display: none; }
  .menu { order: 2; }
  .capa-esq { position: static; height: auto; gap: 20px; margin-top: 26px; align-items: center; }
  .capa-titulo { text-align: center; }
  .capa-titulo h1 { font-size: clamp(64px, 21vw, 104px); }
  .capa-lema { position: static; margin-top: 14px; white-space: normal; text-align: center; }
  .capa-esq .botao-azul { align-self: center; }
  .resultados { grid-template-columns: 1fr; max-width: none; width: 100%; padding: 8px; }
  .tour { height: 150px; }
  .resultados-num { padding: 4px 6px 8px; }
  .resultados ul { justify-content: space-between; }

  .capa-azul { position: relative; left: auto; top: auto; right: auto; bottom: auto; margin: 22px -16px 0; border-radius: 26px 26px 24px 24px; height: 620px; }
  .capa-azul-topo { left: 18px; right: 18px; top: 18px; }
  .capa-local { font-size: 12px; }
  .capa-local br, .capa-local .longo { display: none; }
  .redondo { width: 40px; height: 40px; }
  .capa-azul-texto { left: 22px; right: 22px; top: 82px; width: auto; min-width: 0; }
  .capa-azul-pe { display: none; }
  .medica { left: 50%; transform: translateX(-50%); bottom: 0; height: 430px; top: auto; }
  .capa-vidros { display: none; }
  .rotulo { font-size: 13px; padding: 7px 14px; }
  .r1 { left: 6px; top: auto; bottom: 230px; }
  .r2 { left: auto; right: 6px; top: auto; bottom: 280px; }
  .r3 { left: auto; right: 6px; top: auto; bottom: 120px; }


  .frase { padding: 48px 20px; }
  .chip { width: 48px; height: 28px; }
  .recursos-cabeca p { text-align: left; }
  .grade { grid-template-columns: 1fr; }
  .cartao-foto { grid-column: auto; height: 260px; }
  .porque-azul { padding: 28px; min-height: 620px; }
  .porque-telas { right: 50%; transform: translateX(50%); bottom: -120px; }
  .porque-telas .celular { width: 180px; }
  .e4 { left: 30px; top: 36%; }
  .e5 { left: auto; right: 24px; top: 42%; }
  .e6 { left: 34px; top: 48%; }
  .porque-lista { padding: 28px 22px; }
  .vantagens { grid-template-columns: 1fr 1fr; gap: 22px; }
  .vantagens strong { font-size: 48px; }
  .perfis-grade { grid-template-columns: 1fr; }
  .perfis-grade article:last-child { grid-column: auto; }
  .seguranca { padding: 28px 22px; }
  .seguranca-lista { grid-template-columns: 1fr; }
  .contato { padding: 48px 20px; }

  .flutuante {
    display: inline-flex;
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 20;
    background: linear-gradient(90deg, var(--azul), var(--azul-claro));
    color: #fff;
    box-shadow: 0 14px 30px rgba(31, 79, 214, 0.4);
  }
  .rodape { padding-bottom: 96px; }
}

@media (max-width: 420px) {
  .vantagens { grid-template-columns: 1fr; }
}