/* ===== seção consultorio · "Como é a consulta" (escuro) · prefixo co- ===== */
#consultorio {
  --co-gap: clamp(1.25rem, .6rem + 2vw, 2.5rem);
  --co-traco: #f2e3c4;
  --co-corpo: max(18px, var(--t-corpo));
  --co-faixa-h: clamp(88px, 60px + 3vw, 120px);
  padding: var(--secao-y) var(--b-borda);
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(70% 40% at 88% 8% in oklab, color-mix(in oklab, var(--b-petroleo) 75%, var(--b-noite)), transparent 70%),
    radial-gradient(55% 30% at 0% 55% in oklab, color-mix(in oklab, var(--b-bronze) 24%, var(--b-noite)), transparent 70%),
    radial-gradient(60% 30% at 100% 92% in oklab, color-mix(in oklab, var(--b-agua-escuro) 30%, var(--b-noite)), transparent 70%),
    var(--b-noite);
}
#consultorio .co-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* topo */
#consultorio .co-topo {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--co-gap);
  align-items: end; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
#consultorio .co-rot { grid-column: 1 / -1; margin: 0 0 1.4rem; display: flex; align-items: center; gap: .8rem; }
#consultorio .co-rot::before { content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: .7; }
#consultorio .co-titulo {
  grid-column: 1 / span 7; margin: 0;
  font-size: var(--t-secao); line-height: 1.04; letter-spacing: -.025em; font-weight: 300;
  color: color-mix(in oklab, var(--b-creme) 90%, var(--b-agua)); text-wrap: balance;
}
#consultorio .co-titulo b { font-weight: 700; color: var(--b-creme); }
#consultorio .co-intro { grid-column: 9 / -1; margin: 0; font-size: var(--co-corpo); line-height: 1.55; color: var(--b-texto-2); text-wrap: pretty; }

/* trilho: um traçado só, por cima de todo o percurso */
#consultorio .co-trilho { position: relative; }
#consultorio .co-traco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
#consultorio .co-traco-linha {
  fill: none; stroke: var(--co-traco); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 3px color-mix(in oklab, var(--b-ouro) 60%, transparent));
}
#consultorio .co-pena { fill: #fff6e2; filter: drop-shadow(0 0 6px #f0d6a2) drop-shadow(0 0 14px color-mix(in oklab, var(--b-ouro) 70%, transparent)); opacity: 0; transition: opacity .4s; }
#consultorio .co-trilho.co-anda .co-pena { opacity: 1; }
#consultorio .co-trilho.co-fim .co-pena { animation: co-respira .9375s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes co-respira { 0%, 100% { transform: scale(1); } 37% { transform: scale(1.55); } 55% { transform: scale(1.1); } }

#consultorio .co-percurso { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(3.5rem, 1.5rem + 5vw, 7rem); }
#consultorio .co-parada {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--co-gap);
  align-items: end;
}

/* faixa: papel milimetrado onde o traçado passa, com a marca da parada colada ao batimento */
#consultorio .co-faixa {
  grid-column: 1 / -1; grid-row: 1; position: relative; height: var(--co-faixa-h);
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.75rem);
  --co-mm: 5px;
}
#consultorio .co-faixa::before {
  content: ""; position: absolute; inset: 0 calc(var(--b-borda) * -1);
  background:
    repeating-linear-gradient(to right, var(--grade-escura-forte) 0 1px, transparent 1px calc(var(--co-mm) * 5)),
    repeating-linear-gradient(to bottom, var(--grade-escura-forte) 0 1px, transparent 1px calc(var(--co-mm) * 5)),
    repeating-linear-gradient(to right, var(--grade-escura) 0 1px, transparent 1px var(--co-mm)),
    repeating-linear-gradient(to bottom, var(--grade-escura) 0 1px, transparent 1px var(--co-mm));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}
#consultorio .co-marca {
  position: absolute; left: calc(var(--co-x, .5) * 100% + 2.4rem); bottom: calc(26% + .5rem);
  display: flex; align-items: baseline; gap: .8rem; white-space: nowrap;
}
#consultorio .co-num {
  font-size: clamp(2.6rem, 1.6rem + 2.6vw, 4.4rem); font-weight: 300; line-height: .8; letter-spacing: -.04em;
  color: var(--b-agua);
}
#consultorio .co-marca .wf-rot { color: var(--b-creme); font-size: max(12px, calc(var(--b-t-mono) * 1.12)); display: flex; align-items: center; gap: .7rem; }
#consultorio .co-marca .wf-rot::before { content: ""; width: 1.6rem; height: 1px; background: var(--b-ouro); }
/* fotos */
#consultorio .co-foto { position: relative; margin: 0; grid-row: 2; z-index: 2; }
#consultorio .co-foto img { width: 100%; height: auto; object-fit: cover; border-radius: 4px; filter: contrast(1.06) saturate(1.04); }
/* a luz morna das luminárias dela por cima da foto */
#consultorio .co-foto::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(90% 80% at var(--co-luz, 60% 20%) in oklab, color-mix(in oklab, #f0d6a2 70%, transparent), transparent 70%);
}
#consultorio .co-foto::after {
  content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
  background: linear-gradient(to top, color-mix(in oklab, var(--b-noite) 75%, transparent), transparent 40%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--b-ouro) 18%, transparent);
}
#consultorio .co-foto figcaption { position: absolute; left: 1.2rem; bottom: 1.05rem; z-index: 2; color: var(--b-creme); }

#consultorio .co-texto { grid-row: 2; position: relative; z-index: 2; }
#consultorio .co-texto > p:not(.wf-rot) { font-size: var(--co-corpo); line-height: 1.55; color: var(--b-texto-2); margin: 0 0 1rem; text-wrap: pretty; }
#consultorio .co-h3 {
  margin: 0 0 1.2rem; font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.75rem); line-height: 1.06; letter-spacing: -.025em; font-weight: 300;
  color: color-mix(in oklab, var(--b-creme) 90%, var(--b-agua)); text-wrap: balance;
}
#consultorio .co-h3 b { font-weight: 700; color: var(--b-creme); }
#consultorio .co-ficha { margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid color-mix(in oklab, var(--b-ouro) 35%, transparent); color: var(--b-ouro); }

#consultorio .co-detalhe { margin: 1.8rem 0 0; max-width: 21rem; }
#consultorio .co-detalhe img { width: 100%; height: auto; border-radius: 2px; padding: 5px; background: linear-gradient(135deg in oklab, color-mix(in oklab, var(--b-ouro) 55%, var(--b-noite)), color-mix(in oklab, var(--b-bronze) 60%, var(--b-noite))); box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); }
#consultorio .co-detalhe figcaption { margin-top: .7rem; color: var(--b-texto-2); }

/* disposição (desktop) */
#consultorio .co-p1 .co-foto { grid-column: 1 / -1; grid-row: 2; }
#consultorio .co-p1 .co-foto img { aspect-ratio: 1800 / 860; }
#consultorio .co-p1 .co-texto { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--co-gap); align-items: start; margin-top: 2.2rem; }
#consultorio .co-p1 .co-h3 { grid-column: 1 / span 5; }
#consultorio .co-p1 .co-texto > p { grid-column: 6 / span 4; }
#consultorio .co-p1 .co-detalhe { grid-column: 10 / -1; grid-row: 1 / span 2; margin: .3rem 0 0; justify-self: end; width: 100%; }

#consultorio .co-p2 { align-items: center; }
#consultorio .co-p2 .co-texto { grid-column: 1 / span 4; align-self: center; }
#consultorio .co-p2 .co-foto { --co-luz: 30% 15%; }
#consultorio .co-p2 .co-foto { grid-column: 5 / -1; margin-right: calc(var(--b-borda) * -1); }
#consultorio .co-p2 .co-foto img { aspect-ratio: 4 / 3; border-radius: 4px 0 0 4px; }
#consultorio .co-p2 .co-foto::after { border-radius: 4px 0 0 4px; }

#consultorio .co-p3 { align-items: end; }
#consultorio .co-p3 .co-foto { grid-column: 1 / span 8; --co-luz: 70% 10%; }
#consultorio .co-p3 .co-foto img { aspect-ratio: 16 / 9; object-position: 50% 78%; }
#consultorio .co-p3 .co-texto { align-self: end; padding-bottom: .4rem; }
#consultorio .co-p3 .co-texto { grid-column: 9 / -1; }

#consultorio .co-p4 { align-items: end; }
#consultorio .co-p4 .co-texto { grid-column: 1 / span 7; }
#consultorio .co-h3-fim { font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.8rem); }
#consultorio .co-laudo {
  grid-column: 9 / -1; grid-row: 2; margin: 0; display: grid; border-top: 1px solid color-mix(in oklab, var(--b-ouro) 35%, transparent);
}
#consultorio .co-laudo > div { padding: 1rem 0; border-bottom: 1px solid color-mix(in oklab, var(--b-ouro) 22%, transparent); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
#consultorio .co-laudo dt { color: var(--b-ouro); }
#consultorio .co-laudo dd { margin: 0; font-size: var(--co-corpo); color: var(--b-creme); font-weight: 500; }
#consultorio .co-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.8rem; }
#consultorio .co-zap {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: 1rem 1.6rem 1rem 1.3rem; border-radius: var(--b-raio);
  background: var(--b-creme); color: var(--b-noite); font-weight: 600; font-size: 1.04rem; text-decoration: none;
  box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--b-ouro) 60%, transparent);
  transition: transform .25s, background .25s;
}
#consultorio .co-zap svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
#consultorio .co-zap:hover { transform: translateY(-2px); background: #fff7ea; }
#consultorio .co-tel { text-decoration: none; color: var(--b-texto-2); border-bottom: 1px solid color-mix(in oklab, var(--b-ouro) 55%, transparent); padding-bottom: .15rem; }
#consultorio .co-tel b { color: var(--b-creme); font-weight: 500; }
#consultorio .co-zap:focus-visible, #consultorio .co-tel:focus-visible { outline: 2px solid var(--b-ouro); outline-offset: 4px; }

/* tablet e celular */
@media (max-width: 900px) {
  #consultorio .co-topo { display: block; }
  #consultorio .co-titulo { margin-bottom: 1.4rem; }
  #consultorio .co-parada, #consultorio .co-p1 .co-texto { display: block; }
  #consultorio .co-p1 .co-texto { margin-top: 0; }
  #consultorio .co-foto { margin: 0 calc(var(--b-borda) * -1) 1.8rem; }
  #consultorio .co-p2 .co-foto { margin-right: calc(var(--b-borda) * -1); }
  #consultorio .co-foto img, #consultorio .co-foto::after, #consultorio .co-p2 .co-foto img, #consultorio .co-p2 .co-foto::after { border-radius: 0; }
  #consultorio .co-p1 .co-foto img { aspect-ratio: 4 / 3; }
  #consultorio .co-p1 .co-detalhe { margin: 1.6rem 0 0; max-width: 17rem; }
  #consultorio .co-laudo { margin-top: 2.4rem; }
  #consultorio .co-p4 { padding-bottom: 90px; }
}
@media (max-width: 900px) and (min-width: 600px) {
  #consultorio .co-foto { margin-left: 0; margin-right: 0; }
  #consultorio .co-foto img, #consultorio .co-foto::after { border-radius: 4px !important; }
}
@media (max-width: 900px) {
  #consultorio .wf-rot { font-size: max(12px, var(--b-t-mono)); }
}