/* ============================================================
   /medicos — Profissionais de saúde (LP V2)
   Carregado só por public/medicos.html, depois do styles.css.
   Herda da Homepage V2 o que é global lá (.shot-crop, .v2-fecho,
   .icon-chip, .band-navy, .comecar-painel, .faq-*, .cta-final,
   .btn-seta, .hero-apoio) e escopa aqui, em .page-medicos-v2, o
   que é próprio da página.

   Tokens do handoff (redesign/LP_HANDOFF/DESIGN_TOKENS.md) que o
   :root global ainda não tem ficam declarados no escopo, como a
   home faz em .page-home-v2 — sem mexer nas outras rotas.

   O painel do profissional é desktop-first: as capturas entram em
   largura cheia, numa janela sóbria (hairline, sem sombra), e no
   celular trocam por recortes próprios em vez de encolher até o
   texto ficar ilegível.
   ============================================================ */
/* Os tokens de categoria do handoff moram no :root de styles.css
   (promovidos na integração). Aqui fica só o que é desta página. */
.page-medicos-v2 {
  --cat-routine-strong: #6F6857; /* ícone de rotina: o #B3AC9E do app não chega a 3:1 no creme */
}

/* Container um pouco mais largo que os 920px globais: o painel do
   profissional é uma tela de computador, e a captura precisa de largura
   para ler. O texto continua limitado pelos max-width de cada bloco. */
.page-medicos-v2 .med-largo { max-width: 1120px; }

/* ---------- 01. Hero ---------- */
.page-medicos-v2 .med-hero { padding-bottom: 0; overflow: hidden; }
.med-hero-copy { max-width: 700px; }
.page-medicos-v2 .med-hero h1 { margin: 14px 0 16px; }
.page-medicos-v2 .med-hero .hero-sub { max-width: 58ch; margin-bottom: 28px; }
.page-medicos-v2 .med-hero .hero-ctas .btn-attention { width: 100%; }
@media (min-width: 640px) {
  .page-medicos-v2 .med-hero .hero-ctas { flex-direction: row; }
  .page-medicos-v2 .med-hero .hero-ctas .btn-attention { width: auto; padding-inline: 30px; }
}
/* Desktop: texto centrado sobre a janela larga do painel, que ocupa o
   container inteiro logo abaixo — alinhado à esquerda, sobrava meia dobra
   de navy vazio à direita. */
@media (min-width: 900px) {
  .med-hero-copy { margin-inline: auto; text-align: center; }
  .page-medicos-v2 .med-hero .hero-sub { margin-inline: auto; }
  .page-medicos-v2 .med-hero .hero-ctas { justify-content: center; }
}
@media (min-width: 1024px) {
  .page-medicos-v2 .med-hero h1 { font-size: 54px; line-height: 58px; letter-spacing: -1.1px; }
}

/* A janela do painel sai do navy e entra pelo marfim: a metade de baixo
   do hero é da cor da página, e a captura fica apoiada na costura. */
.med-hero-shot {
  position: relative;
  margin-top: 44px;
  padding-bottom: 8px;
}
.med-hero-shot::before {
  content: "";
  position: absolute;
  left: -50vw;
  right: -50vw;
  bottom: 0;
  height: 38%;
  background: var(--background-alt);
}
.med-janela {
  position: relative;
  margin: 0;
  background: var(--background);
  border: 1px solid rgba(250, 247, 242, 0.22);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px -36px rgba(20, 24, 32, 0.55);
}
.med-janela-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--background-alt);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 16px;
  color: var(--foreground-soft);
}
.med-janela-barra::before {
  content: "";
  width: 34px;
  height: 8px;
  flex: 0 0 auto;
  background:
    radial-gradient(circle at 4px 4px, var(--line) 3.5px, transparent 4px),
    radial-gradient(circle at 17px 4px, var(--line) 3.5px, transparent 4px),
    radial-gradient(circle at 30px 4px, var(--line) 3.5px, transparent 4px);
}
.med-janela picture, .med-janela img { display: block; width: 100%; height: auto; }
.med-hero-legenda {
  position: relative;
  margin-top: 12px;
  text-align: center;
  font-size: 13.5px;
  line-height: 19px;
  color: var(--foreground-soft);
}
@media (min-width: 1024px) { .med-hero-shot { margin-top: 56px; } }

/* ---------- Cabeçalho de seção e ritmo ---------- */
.page-medicos-v2 .section-head .lede + .lede { margin-top: 12px; }
.page-medicos-v2 .section-head--largo { max-width: 760px; }
.med-eyebrow { margin-bottom: 2px; }

/* ---------- 02. O problema ---------- */
.med-problema { display: grid; gap: 32px; margin-top: 8px; }
.med-relatos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.med-relato {
  position: relative;
  padding: 16px 18px 16px 20px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--background);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  line-height: 25px;
  color: var(--foreground-soft);
}
.med-relato small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 19px;
  color: var(--foreground-soft);
}
.med-relatos-legenda { margin-top: 10px; }
@media (min-width: 900px) {
  .med-problema { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: start; }
  .med-relato:nth-child(2) { margin-left: 28px; }
  .med-relato:nth-child(3) { margin-left: 12px; }
}

/* ---------- 03. Como funciona ---------- */
.med-passos {
  list-style: none;
  counter-reset: med-passo;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.med-passo {
  counter-increment: med-passo;
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 20px;
}
.med-passo::before {
  content: counter(med-passo);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 500;
  font-size: 16px;
}
.med-passo-titulo,
.med-card-titulo {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 25px;
  margin: 0 0 8px;
  text-wrap: balance;
}
.med-passo p,
.med-card p { color: var(--foreground-soft); font-size: 15.5px; line-height: 24px; text-wrap: pretty; }
@media (min-width: 900px) {
  .med-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .med-passo { padding: 28px 26px; }
}

/* Os dois sentidos do vínculo: quem convida quem. */
.med-convites { display: grid; gap: 12px; margin-top: 20px; }
.med-convite {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: 16px;
}
.med-convite .med-card-titulo { font-size: 18px; line-height: 23px; margin-bottom: 4px; }
.med-convite p { color: var(--foreground-soft); font-size: 15px; line-height: 23px; text-wrap: pretty; }
@media (min-width: 900px) {
  .med-convites { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .med-convite { padding: 24px 26px; }
}

/* ---------- 04. Visão do paciente ---------- */
.med-paciente-shot { margin-top: 32px; }
.med-categorias {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.med-cat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 12px;
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
}
.med-cat .icon-chip { width: 36px; height: 36px; border-radius: 11px; }
.med-cat .icon-chip svg { width: 19px; height: 19px; }
.icon-chip--med { background: var(--cat-med-soft); color: var(--cat-med); }
.icon-chip--rotina { background: var(--cat-routine-soft); color: var(--cat-routine-strong); }
.icon-chip--food { background: var(--cat-food-soft); color: var(--cat-food); }
.icon-chip--water { background: var(--cat-water-soft); color: var(--cat-water); }
.icon-chip--vitals { background: var(--cat-vitals-soft); color: var(--cat-vitals); }
.icon-chip--medev { background: var(--cat-medev-soft); color: var(--cat-medev); }
.icon-chip--exam { background: var(--cat-exam-soft); color: var(--cat-exam); }
.icon-chip--checkin { background: var(--cat-checkin-soft); color: var(--cat-checkin); }
.icon-chip--obs { background: var(--cat-obs-soft); color: var(--cat-obs); }
.icon-chip--sono { background: var(--cat-sono-soft); color: var(--cat-sono); }
.icon-chip--momento { background: var(--cat-momento-soft); color: var(--cat-momento); }
.med-categorias-nota {
  display: inline-block;
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 500;
  font-size: 15.5px;
  line-height: 23px;
}
@media (min-width: 640px) { .med-categorias { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .med-categorias { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } }

/* ---------- 05. Acompanhamento longitudinal ---------- */
.med-longo { display: grid; gap: 28px; margin-top: 32px; }
.med-longo-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.med-longo-lista li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.med-longo-lista b {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18.5px;
  line-height: 24px;
  margin-bottom: 4px;
}
.med-longo-lista span { color: var(--foreground-soft); font-size: 15.5px; line-height: 24px; }
.med-longo-shots { display: grid; gap: 20px; align-content: center; align-self: stretch; }
.med-hidratacao { max-width: 420px; }
.med-ressalva {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 28px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--background);
  border: 1px solid var(--line);
  color: var(--foreground-soft);
  font-size: 14.5px;
  line-height: 22px;
}
.med-ressalva svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--primary); }
.med-ressalva b { color: var(--foreground); font-weight: 500; }
.med-ordem { margin-top: 28px; }
@media (min-width: 900px) {
  .med-longo { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
  .med-hidratacao { max-width: none; }
}

/* ---------- 06. Resumo pré-consulta (faixa navy) ---------- */
.page-medicos-v2 .band-navy .section-head .lede { color: rgba(250, 247, 242, 0.82); }
.page-medicos-v2 .band-navy .eyebrow { color: var(--accent-soft); }
.med-resumos { display: grid; gap: 14px; margin-top: 32px; }
.med-resumo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px;
  border-radius: 18px;
  border: 1px solid rgba(250, 247, 242, 0.18);
  background: rgba(250, 247, 242, 0.05);
}
.med-resumo-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-full);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: rgba(250, 247, 242, 0.12);
  color: var(--on-primary);
}
.med-resumo-tag svg { width: 13px; height: 13px; }
.med-resumo h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  margin: 0;
  color: var(--on-primary);
}
.med-resumo p { color: rgba(250, 247, 242, 0.84); font-size: 15.5px; line-height: 24px; text-wrap: pretty; }
.med-resumo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.med-resumo li {
  position: relative;
  padding-left: 18px;
  color: rgba(250, 247, 242, 0.9);
  font-size: 15px;
  line-height: 22px;
}
.med-resumo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--success-bright, #7CBB77);
}
.med-resumo-aviso {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(250, 247, 242, 0.16);
  font-size: 13.5px !important;
  line-height: 20px !important;
  color: rgba(250, 247, 242, 0.78) !important;
}
.med-prontuario {
  margin-top: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--on-primary);
  color: var(--foreground);
}
.med-prontuario .icon-chip { background: var(--primary-soft); color: var(--primary); }
.med-prontuario p { color: var(--foreground-soft); font-size: 15px; line-height: 23px; }
.med-prontuario b { color: var(--foreground); font-weight: 500; }
.page-medicos-v2 .band-navy .v2-fecho { color: var(--on-primary); }
@media (min-width: 900px) {
  .med-resumos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .med-resumo { padding: 30px 30px 26px; }
  .med-prontuario { padding: 20px 26px; align-items: center; }
}

/* ---------- 07. Proveniência ---------- */
.med-proveniencia { display: grid; gap: 12px; margin-top: 28px; }
.med-card {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 20px;
}
.med-card .icon-chip { margin-bottom: 14px; }
.med-card .med-card-titulo { font-size: 19px; line-height: 24px; }
.med-confianca { margin-top: 28px; }
@media (min-width: 640px) { .med-proveniencia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .med-proveniencia { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
  .med-card { padding: 24px 22px; }
}

/* ---------- 08. A família no controle ---------- */
.med-controle { display: grid; gap: 32px; }
.med-controle h2 { margin: 10px 0 14px; }
.med-controle .lede { color: var(--foreground-soft); }
.med-controle-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.med-controle-lista li { display: flex; gap: 14px; align-items: flex-start; }
.med-controle-lista b { display: block; font-weight: 500; font-size: 16px; line-height: 23px; }
.med-controle-lista li > span:last-child { color: var(--foreground-soft); font-size: 15px; line-height: 23px; }
@media (min-width: 900px) {
  .med-controle { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
}

/* ---------- 09. FAQ / 10. CTA final ---------- */
.page-medicos-v2 .faq-a p + p { margin-top: 10px; }
.page-medicos-v2 .faq-a a { color: var(--primary); text-underline-offset: 3px; }
.page-medicos-v2 .cta-final h2 { max-width: 640px; }
.page-medicos-v2 .cta-final .cta-sub { max-width: 54ch; margin: 0 auto 26px; }

/* ---------- Celular ---------- */
@media (max-width: 767px) {
  .page-medicos-v2 .band-navy,
  .page-medicos-v2 .band-navy + .section { border-top: 0; }
  .page-medicos-v2 .med-hero { padding-top: calc(var(--header-total) + 28px); }
  .page-medicos-v2 .med-hero h1 { margin: 10px 0 12px; }
  .page-medicos-v2 .med-hero .hero-sub { margin-bottom: 20px; }
  .med-hero-shot { margin-top: 30px; }
  .med-janela-barra { font-size: 12px; padding: 8px 12px; }
  .med-relato { font-size: 17px; line-height: 23px; }
  .med-hidratacao { justify-self: center; width: 100%; }
}