:root {
  --blue: #283892;
  --blue-dark: #081f4f;
  --blue-soft: #eef4ff;
  --mint: #64d2b4;
  --mint-soft: #eafaf5;
  --mint-dark: #0f6e56;
  --ink: #414042;
  --muted: #6b6d70;
  --line: #d1d3d4;
  --bg: #f8f9fb;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Montserrat', sans-serif; color: var(--ink); background: #fff; }
h1, h2, h3, .nav a.cta, .btn { font-family: 'Poppins', sans-serif; }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 72px;
}
.nav img { height: 38px; }
.nav .links { display: flex; gap: 36px; align-items: center; font-size: 15px; font-weight: 500; }
.nav .links a { color: var(--ink); text-decoration: none; }
.nav a.cta {
  background: var(--blue); color: #fff; padding: 11px 22px; border-radius: 999px;
  font-weight: 600; font-size: 14px;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--mint-dark); background: var(--mint-soft);
  padding: 7px 14px; border-radius: 999px;
}
.eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }

.btn {
  display: inline-block; background: var(--blue); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 17px; padding: 18px 30px; border-radius: 14px;
  box-shadow: 0 10px 24px rgba(40, 56, 146, .25);
}
.note { font-size: 14px; color: var(--muted); margin-top: 14px; }

.screen {
  border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 30px 60px rgba(8, 31, 79, .18), 0 0 0 1px rgba(8, 31, 79, .06);
}
.screen img { display: block; width: 100%; }


  section { position: relative; }
  .wrap { max-width: 1296px; margin: 0 auto; padding: 0 72px; box-sizing: content-box; }
  .nav img { height: 64px; }
  h2 { font-size: 46px; line-height: 1.1; font-weight: 700; color: var(--blue-dark); letter-spacing: -.02em; margin: 20px 0 18px; }
  .lead { font-size: 19px; line-height: 1.65; max-width: 640px; }

  /* 1. Topo */
  #topo { background: linear-gradient(180deg, #fff 0%, var(--bg) 100%); }
  #topo .hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; padding: 30px 72px 90px; }
  #topo h1 { font-size: 60px; line-height: 1.06; font-weight: 700; color: var(--blue-dark); margin: 22px 0; letter-spacing: -.02em; }
  #topo h1 span { color: var(--blue); }
  #topo .sub { font-size: 20px; line-height: 1.6; max-width: 560px; margin-bottom: 36px; }
  .photo { position: relative; }
  .photo .pic { width: 100%; height: 620px; object-fit: cover; border-radius: 28px; display: block; }
  .float { position: absolute; left: -70px; bottom: 46px; width: 350px; background: #fff; border-radius: 18px; padding: 18px 20px; box-shadow: 0 24px 50px rgba(8,31,79,.2); }
  .float small { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
  .float p { font-size: 15px; margin-top: 6px; line-height: 1.5; }
  .float b { font-family: 'Poppins'; color: var(--blue); font-size: 22px; }
  .chip { position: absolute; right: 24px; top: 24px; background: rgba(255,255,255,.95); border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--mint-dark); }

  /* 2. Como funciona */
  #como { overflow: hidden; background: radial-gradient(900px 500px at 85% 20%, var(--mint-soft) 0%, transparent 70%), radial-gradient(700px 500px at 70% 90%, var(--blue-soft) 0%, transparent 70%), #fff; }
  #como .grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; padding: 100px 0 100px 72px; }
  .checks { list-style: none; display: grid; gap: 12px; font-size: 16px; font-weight: 500; margin-top: 28px; }
  .checks li { display: flex; gap: 12px; align-items: center; }
  .checks li::before { content: '✓'; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--mint-soft); color: var(--mint-dark); font-weight: 700; font-size: 14px; flex: none; }
  .stage { position: relative; height: 620px; }
  .laptop { position: absolute; left: 0; top: 10px; width: 860px; }
  .laptop .screen { border-radius: 14px 14px 0 0; border: 10px solid #1d2230; border-bottom: 0; height: 520px; }
  .laptop .screen img { object-fit: cover; object-position: top; height: 100%; }
  .laptop .base { height: 22px; background: linear-gradient(#cfd3da, #a9aeb8); border-radius: 0 0 22px 22px; margin: 0 -40px; }
  .stage .card { position: absolute; left: -90px; bottom: 10px; width: 430px; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px rgba(8,31,79,.25); }
  .stage .card img { display: block; width: 100%; }
  .tag { position: absolute; right: 120px; top: 0; background: var(--blue); color: #fff; font-family: 'Poppins'; font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 12px; }

  /* 3. Um dia no consultório */
  #dia { background: var(--blue-dark); color: #dfe6f5; padding: 110px 0; }
  #dia h2 { color: #fff; }
  #dia .eyebrow { background: rgba(100,210,180,.16); color: var(--mint); }
  .timeline { margin-top: 60px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
  .step { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 24px 22px; }
  .step .hora { font-family: 'Poppins'; font-weight: 700; font-size: 28px; color: var(--mint); }
  .step h3 { font-size: 17px; color: #fff; margin: 10px 0 8px; font-weight: 600; }
  .step p { font-size: 14.5px; line-height: 1.6; }
  .fecho { margin-top: 44px; font-size: 20px; color: #fff; font-family: 'Poppins'; font-weight: 500; }

  /* 4. Diferenciais */
  #so { padding: 110px 0; background: #fff; }
  .difs { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .dif { background: var(--bg); border-radius: 22px; padding: 30px; display: flex; flex-direction: column; gap: 20px; }
  .dif h3 { font-size: 23px; color: var(--blue-dark); font-weight: 600; }
  .dif p { font-size: 16px; line-height: 1.6; }
  .dif .shot { border-radius: 12px; overflow: hidden; box-shadow: 0 14px 30px rgba(8,31,79,.12); background: #fff; }
  .dif .shot img { width: 100%; display: block; }
  .dif.cel { flex-direction: row; align-items: center; }
  .dif.cel .txt { flex: 1; }
  .phone { width: 210px; flex: none; border: 9px solid #1d2230; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 40px rgba(8,31,79,.2); }
  .phone img { width: 100%; display: block; }
  .mais { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }
  .mais span { background: var(--blue-soft); color: var(--blue); font-weight: 600; font-size: 15px; padding: 10px 18px; border-radius: 999px; }

  /* 5. Três jeitos */
  #jeitos { padding: 110px 0; background: linear-gradient(180deg, var(--bg), #fff); }
  .tres { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .jeito { background: #fff; border-radius: 22px; padding: 34px 30px; box-shadow: 0 16px 40px rgba(8,31,79,.08); border-top: 5px solid var(--mint); }
  .jeito:nth-child(2) { border-top-color: var(--blue); }
  .jeito:nth-child(3) { border-top-color: var(--blue-dark); }
  .jeito svg { width: 54px; height: 54px; color: var(--blue); }
  .jeito h3 { font-size: 24px; color: var(--blue-dark); margin: 18px 0 6px; font-weight: 600; }
  .jeito .quem { font-size: 14px; font-weight: 600; color: var(--mint-dark); margin-bottom: 14px; }
  .jeito p { font-size: 16px; line-height: 1.6; }
  .jeito ul { margin-top: 16px; list-style: none; display: grid; gap: 8px; font-size: 15px; }
  .jeito li::before { content: '✓  '; color: var(--mint-dark); font-weight: 700; }
  .igual { text-align: center; margin-top: 44px; font-family: 'Poppins'; font-size: 22px; font-weight: 600; color: var(--blue-dark); }

  /* 6. Quem faz */
  #quem { height: 820px; overflow: hidden; background: var(--blue-dark); }
  #quem .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; }
  #quem .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,31,79,.05) 0%, rgba(8,31,79,.55) 42%, rgba(8,31,79,.94) 62%, #081f4f 100%); }
  #quem .content { position: absolute; right: 72px; top: 150px; width: 560px; color: #fff; }
  #quem .eyebrow { background: rgba(100,210,180,.16); color: var(--mint); }
  #quem h2 { font-size: 64px; line-height: 1.02; color: #fff; }
  #quem h2 em { font-style: normal; color: var(--mint); }
  #quem p { font-size: 19px; line-height: 1.65; color: #dfe6f5; }

  /* 7. Lista de espera */
  #lista { padding: 110px 0; background: var(--mint-soft); }
  #lista .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  form { background: #fff; border-radius: 24px; padding: 40px; box-shadow: 0 24px 60px rgba(8,31,79,.12); display: grid; gap: 18px; }
  label { font-size: 14px; font-weight: 600; display: grid; gap: 8px; }
  input, select { font: inherit; font-size: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; }
  .dois { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  form .btn { text-align: center; border: 0; cursor: pointer; }
  .privacidade { font-size: 13px; color: var(--muted); line-height: 1.5; }
  .promessas { list-style: none; margin-top: 30px; display: grid; gap: 18px; font-size: 17px; }
  .promessas b { color: var(--blue-dark); font-family: 'Poppins'; display: block; }

  /* 8. Rodapé */
  footer { background: var(--blue-dark); color: #b8c3dd; padding: 80px 0 40px; }
  footer .top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.15); }
  footer .top img { height: 92px; }
  footer .frase { font-family: 'Poppins'; font-size: 26px; color: #fff; font-weight: 600; margin-top: 18px; max-width: 520px; }
  footer .contato { text-align: right; font-size: 16px; line-height: 1.9; }
  footer .contato b { color: #fff; font-size: 20px; font-family: 'Poppins'; }
  footer .bottom { display: flex; justify-content: space-between; padding-top: 26px; font-size: 14px; }

/* ---------- Comportamento real (links, formulário) ---------- */
html { scroll-behavior: smooth; }
a { cursor: pointer; }
.nav .links a, .btn, footer a { text-decoration: none; }
section[id] { scroll-margin-top: 10px; }
button.btn { font-family: 'Poppins', sans-serif; width: 100%; }
button.btn:disabled { opacity: .6; cursor: wait; }
input:focus, select:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.privacidade a { color: var(--blue); }
.form-msg { display: none; border-radius: 12px; padding: 14px 16px; font-size: 15px; font-weight: 500; }
.form-msg.ok { display: block; background: var(--mint-soft); color: var(--mint-dark); }
.form-msg.erro { display: block; background: #fdecec; color: #a12622; }
.hp { position: absolute; left: -9999px; }

/* ---------- Telas médias ---------- */
@media (max-width: 1200px) {
  #topo h1 { font-size: 50px; }
  .laptop { width: 720px; }
  .laptop .screen { height: 440px; }
  .stage { height: 540px; }
  .stage .card { width: 360px; left: -40px; }
  .timeline { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Celular e tablet ---------- */
@media (max-width: 900px) {
  .wrap { padding: 0 20px; }
  .nav { padding: 16px 20px; }
  .nav img { height: 44px; }
  .nav .links a:not(.cta) { display: none; }
  .nav a.cta { padding: 10px 16px; font-size: 13px; }

  h2 { font-size: 32px; }
  .lead { font-size: 17px; }

  #topo .hero { grid-template-columns: 1fr; gap: 36px; padding: 16px 20px 60px; }
  #topo h1 { font-size: 40px; }
  #topo .sub { font-size: 17px; }
  .btn { display: block; text-align: center; font-size: 16px; padding: 16px 20px; }
  .photo .pic { height: 380px; border-radius: 20px; }
  .float { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .chip { right: 12px; top: 12px; font-size: 12px; }

  #como .grid { grid-template-columns: 1fr; gap: 40px; padding: 70px 20px; }
  .stage { height: auto; }
  .laptop { position: relative; width: 100%; top: 0; }
  .laptop .screen { height: 230px; border-width: 6px; }
  .laptop .base { height: 12px; margin: 0 -10px; }
  .stage .card { position: relative; left: auto; bottom: auto; width: 92%; margin: -40px auto 0; }
  .tag { right: 10px; top: -14px; font-size: 12px; padding: 7px 12px; }

  #dia, #so, #jeitos, #lista { padding: 70px 0; }
  .timeline { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .fecho { font-size: 17px; }

  .difs { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; }
  .dif { padding: 22px; }
  .dif.cel { flex-direction: column; align-items: stretch; }
  .phone { width: 200px; margin: 0 auto; }

  .tres { grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
  .igual { font-size: 18px; }

  #quem { height: auto; }
  #quem .bg { position: relative; height: 300px; display: block; }
  #quem .shade { background: linear-gradient(180deg, transparent 0%, transparent 180px, #081f4f 300px); }
  #quem .content { position: relative; right: auto; top: auto; width: auto; padding: 0 20px 70px; margin-top: -40px; }
  #quem h2 { font-size: 40px; }
  #quem p { font-size: 17px; }

  #lista .grid { grid-template-columns: 1fr; gap: 36px; }
  form { padding: 24px; }
  .dois { grid-template-columns: 1fr; }

  footer { padding: 56px 0 32px; }
  footer .top { flex-direction: column; align-items: flex-start; }
  footer .top img { height: 60px; }
  footer .frase { font-size: 21px; }
  footer .contato { text-align: left; }
  footer .bottom { flex-direction: column; gap: 8px; }
}

/* ---------- Diferenciais: vale em todas as versões ---------- */
.todas { margin-top: 18px; font-weight: 600; color: var(--mint-dark); font-size: 16px; }
.jeito li.nao::before { content: '!  '; color: var(--muted); }
.jeito li.nao { color: var(--muted); }

/* ---------- Sem internet (clínica e notebook) ---------- */
#offline { padding: 0 0 110px; background: #fff; }
.painel {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center;
  background: var(--blue-soft); border-radius: 28px; padding: 56px;
}
.selo {
  display: inline-flex; align-items: center; gap: 10px; background: var(--blue); color: #fff;
  font-family: 'Poppins'; font-weight: 600; font-size: 15px; padding: 10px 18px; border-radius: 999px;
}
.selo svg { width: 20px; height: 20px; }
.continua { font-size: 17px; color: var(--blue-dark); margin-top: 28px; font-weight: 600; }
#offline .checks { margin-top: 14px; }
.aviso { margin-top: 22px; font-size: 14px; color: var(--muted); }
.cel-offline { margin: 0; display: grid; justify-items: center; gap: 22px; }
.cel-offline .phone { width: 250px; }
.cel-offline figcaption { font-size: 15px; line-height: 1.6; background: #fff; border-radius: 16px; padding: 18px 20px; box-shadow: 0 12px 30px rgba(8,31,79,.08); }
.cel-offline figcaption b { color: var(--blue-dark); display: block; margin-bottom: 4px; }

@media (max-width: 1200px) { .nav .links { gap: 24px; } }
@media (max-width: 900px) {
  #offline { padding: 0 0 70px; }
  .painel { grid-template-columns: 1fr; padding: 28px 22px; gap: 32px; border-radius: 22px; }
  .selo { font-size: 13px; }
  .cel-offline .phone { width: 210px; }
}

/* ---------- Proporção dos títulos e etiquetas (ajuste de 2026-10-02) ---------- */
/* a bolinha verde da etiqueta competia com o símbolo da marca: sai */
.eyebrow::before { display: none; }
.eyebrow { padding: 6px 14px; }
#topo h1 { font-size: 54px; }
#quem h2 { font-size: 52px; }
@media (max-width: 900px) {
  .eyebrow { font-size: 11px; letter-spacing: .03em; padding: 5px 12px; }
  #topo h1 { font-size: 32px; line-height: 1.12; margin: 16px 0; }
  #topo .sub { font-size: 16px; margin-bottom: 28px; }
  h2 { font-size: 27px; line-height: 1.15; }
  #quem h2 { font-size: 30px; }
  .step .hora { font-size: 24px; }
  .igual { font-size: 17px; }
  footer .frase { font-size: 19px; }
  .painel h2 { font-size: 26px; }
}
@media (max-width: 900px) {
  .dif h3 { font-size: 19px; }
  .jeito h3 { font-size: 21px; }
}

/* ---------- Etiquetas acima dos títulos: mais presença, e contraste no fundo verde ---------- */
.eyebrow { font-size: 14px; padding: 8px 16px; }
#lista .eyebrow { background: #fff; color: var(--mint-dark); box-shadow: 0 2px 8px rgba(15,110,86,.12); }
@media (max-width: 900px) {
  .eyebrow { font-size: 13px; padding: 7px 14px; }
}

/* ==========================================================
   Revisão de 2026-10-02 (pedido do dono, itens 1 a 24)
   ========================================================== */

/* Faixa logo abaixo do topo */
.faixa {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0;
  padding: 22px 72px; background: #fff; border-top: 1px solid #eceef1; border-bottom: 1px solid #eceef1;
  font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 16px; color: var(--blue-dark);
}
.faixa span { padding: 0 22px; position: relative; }
.faixa span + span::before { content: '•'; position: absolute; left: -4px; color: var(--mint); }

/* Telas maiores: a tela do notebook mostra as curvas em zoom */
.laptop .screen img { object-position: top left; }

/* Os cinco recursos da rotina, como cartões com ícone */
.rotina { margin-top: 64px; }
.rotina h3 { font-size: 22px; color: var(--blue-dark); font-weight: 600; margin-bottom: 22px; }
.itens { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.item {
  background: #fff; border: 1px solid #e3e7ef; border-radius: 18px; padding: 22px 18px;
  display: flex; flex-direction: column; gap: 14px; font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--blue-dark);
}
.item svg { width: 34px; height: 34px; color: var(--blue); background: var(--blue-soft); border-radius: 10px; padding: 6px; box-sizing: content-box; }

/* Passo a passo da foto pelo celular */
.fluxo { margin-top: 72px; }
.fluxo h2 { margin-top: 0; }
.passos { list-style: none; margin-top: 40px; display: grid; grid-template-columns: 1.25fr .8fr .8fr 1.25fr; gap: 22px; align-items: start; }
.passos li { display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; }
.passos b { font-family: 'Poppins', sans-serif; font-size: 17px; color: var(--blue-dark); margin-top: 10px; }
.passos .tela { background: var(--bg); border-radius: 18px; padding: 18px; height: 300px; display: grid; place-items: center; overflow: hidden; }
.passos .tela img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 12px 28px rgba(8,31,79,.14); }
.passos .tela.cel img { border: 6px solid #1d2230; border-radius: 20px; }
.passos .tela.cel.curta img { border-radius: 14px; }

/* Origem */
#quem p.forte { font-family: 'Poppins', sans-serif; font-weight: 600; color: #fff; margin-top: 14px; }

/* Legibilidade: tamanho mínimo dos textos auxiliares */
.note { font-size: 15px; }
.float small { font-size: 12px; }
.float p { font-size: 16px; }
.step p { font-size: 15.5px; }
.dif p { font-size: 17px; }
.jeito .quem { font-size: 15px; line-height: 1.45; }
.jeito ul { font-size: 16px; }
.jeito p { font-size: 16.5px; }
label { font-size: 15px; }
.privacidade { font-size: 14px; }
footer .bottom { font-size: 15px; }
.tag { font-size: 15px; }

@media (max-width: 1200px) {
  .itens { grid-template-columns: repeat(3, 1fr); }
  .passos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .faixa { padding: 16px 20px; font-size: 14px; gap: 8px 0; }
  .faixa span { padding: 0 12px; }
  .rotina { margin-top: 44px; }
  .rotina h3 { font-size: 19px; }
  .itens { grid-template-columns: 1fr 1fr; gap: 12px; }
  .item { padding: 16px 14px; font-size: 15px; }
  .fluxo { margin-top: 56px; }
  .passos { grid-template-columns: 1fr; gap: 30px; }
  .passos .tela { height: auto; max-height: 340px; }
  .passos .tela.cel img { max-height: 300px; }
  .step p { font-size: 15px; }
  .dif p { font-size: 16px; }
}

/* Ajustes da revisão visual */
.stage .card { left: -10px; }
#como .grid > div:first-child { max-width: 560px; }
.continua-card { background: #fff; border-radius: 22px; padding: 32px 30px; box-shadow: 0 16px 40px rgba(8,31,79,.08); }
.continua-card .continua { margin-top: 0; font-size: 19px; }
.continua-card .checks { font-size: 17px; gap: 16px; }
.passos .tela { height: 380px; display: flex; align-items: center; justify-content: center; padding: 20px; }
.passos .tela img { max-height: 340px; width: auto; }
.passos .tela.larga img { width: 100%; height: auto; max-height: 340px; object-fit: contain; }
.passos .tela.cel.curta img { width: 100%; max-height: none; }
@media (max-width: 900px) {
  .stage .card { left: auto; }
  .continua-card { padding: 22px 20px; }
  .passos .tela { height: auto; }
  .passos .tela img { max-height: 320px; }
}
.dif .shot { padding: 14px; }
.dif { justify-content: space-between; }
@media (max-width: 900px) {
  .faixa { gap: 8px 18px; }
  .faixa span { padding: 0; }
  .faixa span + span::before { display: none; }
}

/* Receita em alta resolução: cartão mais estreito para não cobrir as curvas */
.stage .card { width: 340px; left: -30px; bottom: -20px; }
@media (max-width: 1200px) { .stage .card { width: 300px; } }
@media (max-width: 900px) { .stage .card { width: 80%; left: auto; bottom: auto; } }
.tag { top: -20px; right: 60px; }
@media (max-width: 900px) { .tag { top: -14px; right: 10px; } }

/* Logotipo maior no topo (pedido do dono, 2026-10-03) */
.nav img { height: 80px; }
@media (max-width: 900px) { .nav img { height: 54px; } }

/* Logotipo vetorial (docs/marca do PedPlus), desenhado na própria página */
svg.logo { display: block; width: auto; }
.nav svg.logo { height: 80px; }
footer .top svg.logo { height: 92px; }
@media (max-width: 900px) {
  .nav svg.logo { height: 54px; }
  footer .top svg.logo { height: 64px; }
}

/* Topo: logotipo ainda maior e efeito ao passar o mouse nos links (2026-10-03) */
.nav { padding-top: 20px; padding-bottom: 20px; }
.nav svg.logo { height: 104px; }
.nav .links a:not(.cta) {
  position: relative; padding: 6px 0; transition: color .2s ease;
}
.nav .links a:not(.cta)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--mint); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav .links a:not(.cta):hover,
.nav .links a:not(.cta):focus-visible { color: var(--blue); }
.nav .links a:not(.cta):hover::after,
.nav .links a:not(.cta):focus-visible::after { transform: scaleX(1); }
.nav a.cta { transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.nav a.cta:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(40,56,146,.25); }
.btn { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(40,56,146,.3); }
@media (max-width: 1200px) { .nav svg.logo { height: 90px; } }
@media (max-width: 900px) { .nav svg.logo { height: 60px; } .nav { padding-top: 14px; padding-bottom: 14px; } }
@media (max-width: 900px) {
  .nav svg.logo { height: 52px; }
  .nav a.cta { white-space: nowrap; padding: 9px 14px; font-size: 13px; }
  .nav .links { gap: 0; }
}

/* Passo 3 da foto pelo celular: pedaço da tela real redesenhado na página
   (mesmo texto e mesmas cores da captura S31), nítido em qualquer tela. */
.mini-captura {
  width: 100%; max-width: 300px; background: #fff; border-radius: 16px; padding: 18px;
  box-shadow: 0 12px 28px rgba(8,31,79,.14); display: grid; gap: 12px;
}
.mini-captura .aviso {
  margin: 0; background: #f8f9fb; border: 1px solid #d1d3d4; border-radius: 8px;
  padding: 10px 12px; font-size: 14px; line-height: 1.45; color: #595a5c;
}
.mini-captura .b1, .mini-captura .b2 {
  display: block; text-align: center; border-radius: 8px; padding: 11px 12px;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px;
}
.mini-captura .b1 { background: #1d76bb; color: #fff; }
.mini-captura .b2 { background: #fff; color: #1f1f1f; border: 1px solid #d9d9d9; }
@media (min-width: 901px) {
  .mini-captura { max-width: 220px; padding: 12px; gap: 8px; border-radius: 12px; }
  .mini-captura .aviso { font-size: 11px; padding: 7px 9px; border-radius: 6px; }
  .mini-captura .b1, .mini-captura .b2 { font-size: 12px; padding: 7px 8px; border-radius: 6px; }
}

/* Passo a passo da foto pelo celular: telas reais redesenhadas na página
   (mesmos textos e cores das capturas S4/S31), nítidas em qualquer tela. */
.mock { font-family: 'Montserrat', sans-serif; color: #1f1f1f; text-align: left; }
.mock p { margin: 0; }
.mock .m-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #414042; text-align: center; }
.mock .m-code { font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .12em; color: #283892; text-align: center; }
.mock .m-timer { font-size: 12px; font-weight: 600; text-align: center; }
.mock .m-btn { display: inline-block; border: 1px solid #d9d9d9; border-radius: 6px; padding: 5px 12px; font-size: 12px; background: #fff; }

/* 1. Janela do computador */
.m-modal { width: 100%; max-width: 330px; background: #fff; border-radius: 10px; padding: 16px 18px; box-shadow: 0 12px 28px rgba(8,31,79,.14); display: grid; gap: 10px; }
.m-modal .m-head { display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; }
.m-modal .m-x { color: #8c8c8c; font-weight: 400; }
.m-modal .m-help { font-size: 11px; line-height: 1.45; color: #595a5c; text-align: center; }
.m-modal .m-qr { justify-self: center; width: 46%; padding: 8px; border: 1px solid #f0f0f0; border-radius: 8px; }
.m-modal .qr { display: block; width: 100%; height: auto; }
.m-modal .m-code { font-size: 26px; }
.m-modal .m-foot { text-align: right; }

/* 2. Página no celular (sem moldura: só a tela, com cantos arredondados) */
.m-phone { width: 100%; max-width: 230px; border-radius: 26px; padding: 34px 12px 14px;
  background: linear-gradient(180deg, #081f50 0%, #1b2e78 50%, #234585 100%);
  box-shadow: 0 16px 34px rgba(8,31,79,.25); }
.m-phone .m-card { background: #fff; border-radius: 10px; padding: 14px 12px; display: grid; gap: 8px; }
.m-phone .m-logo { height: 22px; justify-self: center; }
.m-phone .m-title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; color: #142868; text-align: center; }
.m-phone .m-box { border: 1px solid #e3e5e8; border-radius: 6px; padding: 9px 8px; display: grid; gap: 4px; }
.m-phone .m-label { font-size: 8.5px; }
.m-phone .m-code { font-size: 18px; }
.m-phone .m-small { font-size: 8.5px; line-height: 1.4; color: #595a5c; text-align: center; }
.m-phone .m-timer { font-size: 8.5px; }
.m-phone .m-b1, .m-phone .m-b2 { display: block; text-align: center; border-radius: 5px; padding: 7px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 10px; }
.m-phone .m-b1 { background: #1d76bb; color: #fff; }
.m-phone .m-b2 { border: 1px solid #d9d9d9; color: #1f1f1f; }
.m-phone .m-ver { color: #c9d3ea; font-size: 8.5px; text-align: center; margin-top: 10px; }

/* 4. Lista de imagens do paciente */
.m-list { width: 100%; background: #fff; border-radius: 10px; padding: 12px 14px; box-shadow: 0 12px 28px rgba(8,31,79,.14); }
.m-list .m-ltitle { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0; }
.m-list .m-lbar { display: flex; align-items: center; gap: 6px; margin: 10px 0 8px; font-size: 8.5px; color: #8c8c8c; }
.m-list .m-lbar > span:first-child { flex: 1; }
.m-list .m-btn { font-size: 8.5px; padding: 4px 7px; color: #1f1f1f; }
.m-list .m-bp { font-size: 8.5px; padding: 4px 7px; border-radius: 6px; background: #1d76bb; color: #fff; }
.m-list table { width: 100%; border-collapse: collapse; font-size: 8.5px; }
.m-list th { background: #fafafa; text-align: left; font-weight: 600; padding: 6px 4px; }
.m-list td { padding: 7px 4px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.m-list td small { display: block; color: #a0a0a0; font-size: 7.5px; margin-top: 2px; }
.m-list .m-tag { background: #f5f5f5; border: 1px solid #e8e8e8; border-radius: 4px; padding: 1px 5px; font-size: 7.5px; color: #595a5c; }
.m-list .m-open { border: 1px solid #d9d9d9; border-radius: 4px; padding: 1px 6px; font-size: 7.5px; }

/* No celular do visitante, tudo maior e legível */
@media (max-width: 900px) {
  .m-modal { max-width: 360px; }
  .m-modal .m-head { font-size: 16px; }
  .m-modal .m-help { font-size: 13px; }
  .m-modal .m-code { font-size: 30px; }
  .mock .m-label { font-size: 12px; }
  .mock .m-timer, .mock .m-btn { font-size: 13px; }
  .m-phone { max-width: 280px; }
  .m-phone .m-title { font-size: 18px; }
  .m-phone .m-label, .m-phone .m-small, .m-phone .m-timer { font-size: 11px; }
  .m-phone .m-code { font-size: 22px; }
  .m-phone .m-b1, .m-phone .m-b2 { font-size: 13px; padding: 9px; }
  .m-phone .m-ver { font-size: 10px; }
  .m-list .m-ltitle { font-size: 15px; }
  .m-list .m-lbar { font-size: 10px; flex-wrap: wrap; }
  .m-list .m-btn, .m-list .m-bp { font-size: 10px; }
  .m-list table { font-size: 11px; }
  .m-list td small, .m-list .m-tag, .m-list .m-open { font-size: 9.5px; }
  .m-list th:nth-child(3), .m-list td:nth-child(3) { display: none; }
}
/* Caixas do passo a passo: altura acompanha o conteúdo, todas iguais na linha */
.passos { align-items: stretch; }
.passos li { display: flex; flex-direction: column; }
.passos .tela { height: auto; min-height: 0; flex: 0 0 auto; padding: 22px 16px; }
@media (min-width: 901px) {
  .passos .tela { height: 520px; }
  .m-modal { padding: 14px 16px; gap: 8px; }
  .m-modal .m-code { font-size: 22px; }
}
@media (max-width: 900px) {
  .passos .tela { max-height: none; height: auto; overflow: visible; }
  .m-list .m-lbar > span:first-child { display: none; }
  .m-list .m-lbar { justify-content: flex-end; }
}