/* ============================================================
   Ajustes responsivos — sem alterar o visual do desktop.
   Corrige largura, empilhamento, espaçamento e escala no celular.
   ============================================================ */
@media (max-width: 860px) {
  .wrap { width: 100%; min-width: 0; }
  .split, .hero .wrap, .risk, .regions, .places { min-width: 0; }
  .split > *, .places > *, .regions > *, .risk > * { min-width: 0; }
  .ceap { margin-top: 36px; }
  .ceap-out { min-height: 0; }
  .ceap-fotos { max-width: 100%; }
  .ceap-pair-inner { flex-wrap: wrap; }
  .tx-grid, .regions { gap: 28px 20px; }
  .contact .split { gap: 22px; }
  .contact .places { margin-top: 28px; }
}
@media (max-width: 600px) {
  :root { --gut-l: 18px; --gut-r: 18px; }
  html, body { max-width: 100%; }
  body { overflow-x: clip; font-size: 16px; }
  section { padding-block: 54px; }
  .wrap { padding-inline: 18px; }
  h1, h2, h3, p, a, span { overflow-wrap: break-word; }
  h2 { font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1.1; }
  h3 { line-height: 1.15; }
  .lede { font-size: 1.04rem; }
  .eyebrow { font-size: .7rem; letter-spacing: .2em; }
  .stack { gap: 15px; }

  /* Menu: marca legível e botão de agendamento sem sobreposição. */
  .top .wrap { gap: 8px; padding: 10px 14px; }
  .top .brand { gap: 7px; min-width: 0; }
  .top .brand .mk { width: 27px; height: 29px; }
  .top .brand b { font-size: .88rem; letter-spacing: .015em; }
  .top .brand small { font-size: .51rem; letter-spacing: .12em; }
  .top .btn { flex: 0 0 auto; padding: 9px 11px; font-size: .74rem; gap: 5px; }

  /* Hero: o conteúdo não disputa espaço com a fotografia. */
  section.hero.hero-reference > .wrap {
    padding: 22px 18px 255px !important;
    align-items: flex-start !important;
  }
  section.hero.hero-reference .copy { width: 100%; max-width: none; }
  section.hero.hero-reference h1 {
    font-size: clamp(2.25rem, 10vw, 3.25rem) !important;
    line-height: 1.04;
  }
  section.hero.hero-reference .lede { max-width: 36ch; }
  section.hero.hero-reference .hero-reference-photo {
    height: 248px !important;
    background-size: auto, auto 115%;
    background-position: center, center bottom;
  }
  section.hero.hero-reference .actions {
    flex-wrap: wrap !important;
    max-width: 100%;
  }
  section.hero.hero-reference .actions .btn {
    white-space: normal !important;
    text-align: center;
    justify-content: center;
    font-size: .81rem !important;
  }

  /* Sintomas: cards uniformes e sem cortes de palavras. */
  .sym { grid-template-columns: 1fr; margin-top: 28px; }
  .sym div { padding: 17px 20px; }

  /* CEAP: sete classes permanecem acessíveis sem transbordar. */
  .ceap { padding: 20px 14px; gap: 16px; border-radius: 18px; }
  .ceap-head { align-items: flex-start; }
  .ceap-head h3 { font-size: 1.4rem; }
  .ceap-scale { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .ceap-scale button {
    min-width: 0; padding: 11px 0 9px; font-size: .96rem;
    border-radius: 7px; line-height: 1.2;
  }
  .ceap-band { font-size: .55rem; letter-spacing: .1em; }
  .ceap-band span { padding-top: 7px; }
  .ceap-figure { min-height: 0; }
  .ceap-fotos { padding: 10px; border-radius: 12px; }
  .ceap-photo { height: auto; max-height: 245px; width: 100%; object-fit: contain; }
  .ceap-pair-inner { width: 100%; gap: 8px; flex-wrap: nowrap; }
  .ceap-pair-inner .ceap-photo { width: calc(50% - 4px); height: auto; max-height: 220px; }
  .ceap-out h3 { font-size: 1.4rem; }

  /* Causas e fatores: imagens e notas respeitam a largura disponível. */
  .risk.risk4.risk4-reference { gap: 16px; margin-top: 32px; }
  .risk4-reference-card { width: 100%; }
  .risk4-reference-note { line-height: 1.35; }
  .note { padding: 17px; gap: 12px; }

  /* Linha do tempo: etapas empilhadas e alinhadas ao texto. */
  .steps.steps-timeline-1 { margin-top: 32px; gap: 25px; }
  .steps.steps-timeline-1 li { padding: 0 8px; }
  .steps-timeline-1 .st1-icon { margin-top: 12px; }
  .steps-timeline-1 .st1-stem { height: 18px; margin-bottom: 10px; }

  /* Tratamentos e outras regiões: fotos proporcionais. */
  .tx-grid, .regions { grid-template-columns: 1fr; margin-top: 30px; gap: 30px; }
  .tx .ph { width: 100%; max-width: 420px; margin-inline: auto; }
  .regiao-foto { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
  .tx-more.tx4-treatments { grid-template-columns: 1fr; }
  .tx4-treatments .tx4-card { min-width: 0; }
  .tx4-treatments .tx4-copy { min-width: 0; }

  /* Contato: botões sem colisão e clínicas com alturas naturais. */
  .contact { padding-block: 54px 48px; }
  .contact .split h2 { max-width: none; font-size: clamp(2.35rem, 9vw, 3.2rem); }
  .contact .split p { font-size: .98rem; }
  .contact .place { padding: 20px 18px; gap: 8px; }
  .contact .place h3 { font-size: clamp(1.4rem, 6vw, 1.75rem); }
  .contact .place p { font-size: .94rem; }
  .contact .phones { gap: 8px; }
  .contact .chip { padding: 9px 12px; font-size: .87rem; }
  .contact .btn { max-width: 100%; white-space: normal; }

  /* Rodapé: logotipo e registros em linhas próprias. */
  .footer-modelo4 .footer-modelo4-conteudo {
    display: grid; grid-template-columns: 1fr; gap: 16px; justify-items: start;
  }
  .footer-modelo4-marca .marca-rodape { gap: 9px; }
  .footer-modelo4-marca .marca-rodape .mk { width: 40px; height: 40px; }
  .footer-modelo4-marca .marca-rodape b { font-size: 1.3rem; }
  .footer-modelo4-registro, .footer-modelo4 p {
    border-left: 0; padding-left: 0; min-height: 0; white-space: normal;
  }
  .footer-modelo4 p { max-width: 100%; }
}
@media (max-width: 360px) {
  .top .brand b { font-size: .78rem; }
  .top .brand small { font-size: .46rem; }
  .top .btn { padding: 8px; font-size: .69rem; }
  section.hero.hero-reference h1 { font-size: 2.12rem !important; }
  .ceap { padding-inline: 10px; }
  .ceap-scale { gap: 2px; }
  .ceap-scale button { font-size: .84rem; }
  .contact .chip { font-size: .81rem; padding-inline: 10px; }
}
@media (min-width: 601px) and (max-width: 860px) {
  .regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact .places { grid-template-columns: 1fr; }
}

/* Ajuste pontual: tipografia da seção Contato no tamanho aprovado. */
.contact .split h2 { font-size: clamp(2.15rem, 3.7vw, 3rem); }
.contact .place h3 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); }
@media (max-width: 600px) {
  .contact .split h2 { font-size: clamp(2rem, 7.4vw, 2.45rem); }
  .contact .place h3 { font-size: clamp(1.24rem, 5vw, 1.45rem); }
}

/* Único ajuste solicitado: proporção e quebra do título no contato. */
@media (max-width: 600px) {
  .contact .split h2 {
    font-size: clamp(1.75rem, 6.6vw, 2.15rem);
    max-width: none;
    letter-spacing: -0.018em;
    line-height: 1.14;
  }
}

/* Ajuste exclusivo: título do contato em aproximadamente 2–3 linhas. */
.contact .split h2 {
  max-width: 100%;
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  letter-spacing: -0.012em;
  line-height: 1.12;
}
@media (max-width: 600px) {
  .contact .split h2 {
    max-width: 100%;
    width: 100%;
    font-size: clamp(1.48rem, 6.4vw, 1.9rem);
    line-height: 1.13;
    letter-spacing: -0.018em;
  }
}