/* =============================================================================
   DR. CARLOS MIRANDA — Páginas de procedimento
   proc.css · v1 (Lentes em porcelana)
   Carrega DEPOIS de styles.css — só estende/sobrescreve o necessário.
   ============================================================================= */

/* ============================== BREADCRUMB ============================== */
.proc-breadcrumb{
  position:relative;
  background:var(--ink-900);
  border-bottom:1px solid var(--border);
  padding-top:calc(var(--nav-h) + .6rem);
}
.proc-breadcrumb-inner{
  max-width:var(--container-wide);
  margin:0 auto;
  padding:.85rem clamp(20px,5vw,72px);
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--font-body);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-400);
}
.proc-breadcrumb-inner a{color:var(--copper-300);transition:color .3s ease;}
.proc-breadcrumb-inner a:hover,
.proc-breadcrumb-inner a:focus-visible{color:var(--copper-200);}
.proc-breadcrumb-inner .sep{color:var(--ink-600);}
.proc-breadcrumb-inner [aria-current="page"]{color:var(--white-dim);}

/* ============================== HERO — específicos da página ============== */
/* Quando vier de breadcrumb, anular o padding-top do hero (já tem o do breadcrumb) */
.proc-hero{ min-height:calc(100vh - 38px); min-height:calc(100dvh - 38px); }
@media (max-width:1100px){
  .proc-hero{ min-height:auto; }
}

/* Badge sobre a foto do hero (substitui o "Antes/Depois" do hero da home) */
.proc-hero-badge{
  position:absolute;top:18%;left:auto;right:8%;z-index:5;
  background:rgba(11,10,9,.7);
  border:1px solid var(--copper-600);
  color:var(--copper-300);
  font-family:var(--font-body);
  font-size:.6rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  padding:.55rem .95rem;border-radius:var(--r-sm);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;transform:translateY(-8px);
  animation:fadeUp .9s var(--ease-out-expo) 1.8s forwards;
}
.proc-hero-signature{
  position:absolute;bottom:8%;left:50%;z-index:6;
  transform:translateX(-30%);
  font-family:var(--font-serif);font-style:italic;font-weight:500;
  font-size:clamp(1rem,1.4vw,1.25rem);
  color:var(--copper-300);
  letter-spacing:.04em;
  text-shadow:0 2px 16px rgba(0,0,0,.8);
  white-space:nowrap;
  opacity:0;
  animation:fadeUp 1s var(--ease-out-expo) 2.1s forwards;
}
@media (max-width:1100px){
  .proc-hero-badge{top:auto;bottom:14%;right:6%;}
  .proc-hero-signature{bottom:6%;}
}

/* ----- Hero "Opção C" (headline poderosa + fecho íntimo em italic cobre) -----
   Usada quando a página adota a headline emocional/conversacional
   (ex.: facetas-em-resina). A 1ª linha mantém o tratamento Jost caps com
   stroke cobre; o fecho herda Cormorant italic delicado, em escala reduzida,
   pra não disputar com a 1ª linha. */
.hero-title-c{
  margin-bottom:1.2rem;
}
.hero-title-c .hero-subline{
  display:block;
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  text-transform:none;
  letter-spacing:.005em;
  /* ~55–65% do tamanho do H1, escala bem em mobile */
  font-size:clamp(1.55rem,2.7vw,2.45rem);
  line-height:1.15;
  color:var(--ink-300);
  margin-top:.55rem;
}
/* Reseta o .italic herdado de .hero-title — aqui o italic já vem do contêiner */
.hero-title-c .hero-subline .italic{
  font-size:1em;
  top:0;
  color:inherit;
}
/* "sessão." é a palavra-acento: cobre + ligeiríssima ênfase */
.hero-title-c .hero-subline .hl{
  color:var(--copper-300);
  text-shadow:0 0 22px rgba(206,142,99,.18);
}
/* Mobile — afina o respiro entre as duas linhas */
@media (max-width:700px){
  .hero-title-c .hero-subline{
    font-size:clamp(1.4rem,6.4vw,2rem);
    margin-top:.4rem;
  }
}
/* Telas com altura reduzida (laptops 13/14") — encolhe junto com o H1 */
@media (max-height:820px) and (min-width:1101px){
  .hero-title-c .hero-subline{
    font-size:clamp(1.35rem,2.4vw,2.1rem);
    margin-top:.45rem;
  }
}

/* ============================== SHELL DAS DOBRAS ====================== */
.proc-section{
  position:relative;overflow:hidden;
  padding:clamp(72px,9vw,120px) clamp(20px,5vw,72px);
}
.proc-section-dark{ background:var(--ink-900); color:var(--white-dim); }
.proc-section-light{ background:var(--ink-50); color:var(--ink-900); }

/* Fundo quadriculado fiel à home (eco do hero-grid) */
.proc-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.proc-bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(206,142,99,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(206,142,99,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 30% 40%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(circle at 30% 40%,#000,transparent 80%);
}
.proc-bg-grid-light{
  background-image:
    linear-gradient(rgba(155,105,70,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(155,105,70,.055) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 70% 50%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(circle at 70% 50%,#000,transparent 80%);
}
.proc-bg-orb{
  position:absolute;width:680px;height:680px;border-radius:50%;
  top:-12%;left:-8%;
  background:radial-gradient(circle at 35% 35%,
    rgba(206,142,99,.16),rgba(206,142,99,.04) 55%,transparent 72%);
  filter:blur(60px); opacity:.9;
}
.proc-bg-orb-right{ left:auto; right:-8%; top:auto; bottom:-12%; }
.proc-bg-aurora{
  position:absolute;inset:-15% -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 50% at 22% 30%,rgba(206,142,99,.22),transparent 60%),
    radial-gradient(38% 46% at 78% 68%,rgba(189,117,82,.20),transparent 62%);
  animation:auroraDrift 26s var(--ease-out-quart) infinite alternate;
  filter:blur(10px);
}

.proc-inner{
  position:relative;z-index:1;
  max-width:var(--container);
  margin:0 auto;
}
.proc-inner-centered{ text-align:center; max-width:980px; }

/* Grids */
.proc-grid-60-40{
  display:grid;grid-template-columns:1.5fr 1fr;
  gap:clamp(40px,5vw,72px); align-items:start;
}
.proc-grid-portrait{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(36px,5vw,64px); align-items:center;
}
.proc-grid-faq{
  display:grid;grid-template-columns:.8fr 1.2fr;
  gap:clamp(36px,5vw,64px); align-items:start;
}
.proc-grid-final{
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(36px,5vw,64px); align-items:center;
}

/* ============================== TAGS / TÍTULOS / DESC ===================== */
.proc-tag{
  display:inline-flex;align-items:center;gap:1rem;
  margin-bottom:1.4rem;
}
.proc-tag-center{ justify-content:center; }
.proc-tag-line{
  display:block;width:42px;height:1px;
  background:var(--copper-400);
}
.proc-tag-light .proc-tag-line{ background:var(--copper-500); }
.proc-tag-text{
  font-family:var(--font-body);font-weight:700;
  font-size:.7rem;letter-spacing:.30em;text-transform:uppercase;
}
.proc-tag-dark .proc-tag-text{ color:var(--copper-300); }
.proc-tag-light .proc-tag-text{ color:var(--copper-700); }

.proc-title{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.06;letter-spacing:.02em;
  text-transform:uppercase;
  margin-bottom:1.4rem;
}
.proc-title-dark{ color:var(--white); }
.proc-title-light{ color:var(--ink-900); }
.proc-title-center{ text-align:center; }
.proc-title-dark .italic{
  font-family:var(--font-serif);font-style:italic;font-weight:500;
  color:var(--copper-300);
  display:inline;font-size:.92em;text-transform:none;letter-spacing:.005em;
  vertical-align:baseline;position:relative;top:.04em;
}
.proc-title-light .italic{
  font-family:var(--font-serif);font-style:italic;font-weight:500;
  color:var(--copper-600);
  display:inline;font-size:.92em;text-transform:none;letter-spacing:.005em;
  vertical-align:baseline;position:relative;top:.04em;
}

/* Letra vazada — variante DARK (com halo cobre, igual hero) */
.proc-title-dark .title-stroke{
  display:inline-block;
  color:transparent;
  -webkit-text-stroke:1.3px var(--copper-300);
          text-stroke:1.3px var(--copper-300);
  text-shadow:0 0 24px rgba(206,142,99,.18);
  margin-right:.12em;
}
/* Letra vazada — variante LIGHT (stroke cobre escuro, sem halo) */
.proc-title-light .title-stroke{
  display:inline-block;
  color:transparent;
  -webkit-text-stroke:1.2px var(--copper-600);
          text-stroke:1.2px var(--copper-600);
  margin-right:.08em;
}

.proc-desc{
  font-family:var(--font-body);font-size:1.02rem;line-height:1.75;
  margin-bottom:1.3rem;
}
.proc-desc-dark{ color:var(--ink-300); max-width:48ch; }
.proc-desc-dark b{ color:var(--white-dim); font-weight:600; }
.proc-desc-light{ color:var(--ink-700); max-width:46ch; }
.proc-desc-light b{ color:var(--ink-900); font-weight:600; }

.proc-intro{
  font-family:var(--font-body);font-size:1rem;line-height:1.7;
  color:var(--ink-300);
  margin:.5rem auto 2.4rem;
  max-width:560px;
}
.proc-section-light .proc-intro{ color:var(--ink-600); }
.proc-intro-strong{ color:var(--copper-300); font-weight:600; }

/* Text-link cobre (compartilhado) */
.proc-text-link{
  color:var(--copper-300);font-weight:600;
  border-bottom:1px solid transparent;
  transition:color .3s ease, border-color .3s ease;
}
.proc-section-light .proc-text-link{ color:var(--copper-700); }
.proc-text-link:hover,
.proc-text-link:focus-visible{
  border-bottom-color:currentColor;
}

/* Botão outline tema CLARO (cobre escuro) */
.btn-outline-light{
  display:inline-flex;align-items:center;gap:.7rem;
  border:1px solid var(--copper-500);
  color:var(--copper-700); background:transparent;
  padding:.95rem 1.8rem;border-radius:var(--r-full);
  font-family:var(--font-body);font-size:.74rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  transition:background .35s var(--ease-out-expo),
             color .35s var(--ease-out-expo),
             box-shadow .35s var(--ease-out-expo);
}
.btn-outline-light:hover,
.btn-outline-light:focus-visible{
  background:var(--copper-500); color:var(--white);
  box-shadow:0 14px 30px -10px rgba(189,117,82,.55);
}
.btn-outline-light .iconify{ font-size:1.05rem; }

/* ============================== DOBRA 2 — MICROBENEFÍCIOS + CARD ============ */
.proc-microbenefits{
  display:flex;flex-wrap:wrap;gap:1.4rem 2rem;
  margin-top:2.2rem;
  list-style:none;padding:0;
}
.proc-microbenefits li{
  display:flex;flex-direction:column;gap:.15rem;
  min-width:120px;
}
.proc-microbenefits .iconify{
  font-size:1.4rem;color:var(--copper-500);margin-bottom:.3rem;
}
.proc-mb-label{
  font-family:var(--font-display);font-weight:500;
  font-size:.92rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-900);
}
.proc-mb-note{ font-size:.82rem;color:var(--ink-600); }

.proc-highlight-card{
  background:var(--copper-50);
  border:1px solid var(--copper-200);
  border-radius:12px;
  padding:clamp(28px,4vw,40px);
  text-align:center;
  box-shadow:0 30px 60px -28px rgba(106,58,36,.18);
}
.proc-card-icon{
  font-size:2rem;color:var(--copper-500);
  display:inline-block;margin-bottom:.6rem;
}
.proc-card-figure{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(2.4rem,5vw,3.2rem);
  color:var(--copper-700);
  line-height:1; margin:0;
  letter-spacing:.02em;
}
.proc-card-label{
  font-family:var(--font-body);font-size:.92rem;font-weight:600;
  color:var(--ink-800); margin:.8rem 0 .15rem;
}
.proc-card-note{
  font-family:var(--font-serif);font-style:italic;
  font-size:.95rem; color:var(--ink-500);
}
/* Quando o "figure" for textual (ex.: "Escultura direta") em vez de número,
   reduz a escala pra não disputar com o título da seção e respira melhor. */
.proc-card-figure-text{
  font-size:clamp(1.8rem,3.3vw,2.4rem);
  line-height:1.06;
  letter-spacing:.012em;
}

/* ----- Variante "anatomy" do card (implantes D2) ---------------------------
   Card claro com ilustração-anatomia do implante (Coroa · Pilar · Raiz)
   à esquerda e legenda alinhada à direita. SVG inline, paleta cobre/ink.
   Não compete com o título da seção — é um diagrama educativo, sóbrio. */
.proc-anatomy-card{
  /* Reaproveita o shell visual do .proc-highlight-card,
     mas com layout interno próprio (SVG + legendas). */
  background:var(--copper-50);
  border:1px solid var(--copper-200);
  border-radius:12px;
  padding:clamp(28px,3.4vw,40px) clamp(24px,3vw,36px);
  box-shadow:0 30px 60px -28px rgba(106,58,36,.18);
}
.proc-anatomy-eyebrow{
  display:block;
  font-family:var(--font-body);font-weight:700;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--copper-700);
  margin-bottom:1rem; text-align:center;
}
.proc-anatomy-grid{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(18px,2.6vw,32px);
  align-items:center;
}
.proc-anatomy-svg{
  width:clamp(120px,16vw,168px);
  height:auto;
  display:block;
}
.proc-anatomy-svg .organ{ fill:var(--white); stroke:var(--copper-600); stroke-width:1.6; }
.proc-anatomy-svg .organ-soft{ fill:var(--copper-50); stroke:var(--copper-500); stroke-width:1.4; }
.proc-anatomy-svg .organ-deep{ fill:var(--copper-700); }
.proc-anatomy-svg .organ-thread{ stroke:var(--white); stroke-width:1.1; fill:none; opacity:.65; }
.proc-anatomy-svg .bone{ stroke:var(--ink-300); stroke-width:1; stroke-dasharray:4 5; fill:none; }
.proc-anatomy-svg .bone-fill{ fill:rgba(155,105,70,.06); }
.proc-anatomy-svg .guide{ stroke:var(--copper-400); stroke-width:.9; fill:none; }
.proc-anatomy-svg .pin{ fill:var(--copper-500); }

.proc-anatomy-labels{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
  gap:clamp(10px,1.6vw,18px);
}
.proc-anatomy-labels li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.65rem;
  align-items:start;
}
.proc-anatomy-mark{
  display:inline-block;
  width:10px;height:10px;border-radius:50%;
  margin-top:.45rem;
  background:var(--copper-500);
  box-shadow:0 0 0 3px rgba(206,142,99,.14);
}
.proc-anatomy-mark.is-pilar{
  background:var(--copper-300);
  box-shadow:0 0 0 3px rgba(206,142,99,.10);
}
.proc-anatomy-mark.is-coroa{
  background:var(--white);
  border:1.5px solid var(--copper-600);
}
.proc-anatomy-title{
  display:block;
  font-family:var(--font-body);font-weight:700;
  font-size:.92rem;letter-spacing:.02em;
  color:var(--ink-900);
  line-height:1.2;
}
.proc-anatomy-desc{
  display:block;
  font-family:var(--font-serif);font-style:italic;
  font-size:.86rem;line-height:1.45;
  color:var(--ink-600);
  margin-top:.15rem;
}
@media (max-width:880px){
  .proc-anatomy-card{ margin-top:1.6rem; }
  .proc-anatomy-grid{
    grid-template-columns:1fr;
    justify-items:center;
    gap:1.4rem;
  }
  .proc-anatomy-svg{ width:clamp(140px,38vw,180px); }
  .proc-anatomy-labels{ width:100%; max-width:340px; }
}

/* ============================== DOBRA 3 — CHECKLIST 2x2 + HONESTY ========= */
.proc-checklist-2x2{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:16px;margin:0 auto 2rem;
  text-align:left;
  max-width:760px;
  list-style:none;padding:0;
}
.proc-check-card{
  background:var(--ink-800);
  border:1px solid var(--ink-700);
  border-radius:10px;
  padding:1.4rem 1.5rem;
  display:flex;gap:1rem;align-items:flex-start;
  transition:transform .4s var(--ease-out-expo),
             border-color .4s var(--ease-out-expo);
}
.proc-check-card:hover{
  transform:translateY(-2px);
  border-color:var(--copper-600);
}
.proc-check-icon{
  display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;
  background:rgba(206,142,99,.10);
  border:1px solid rgba(206,142,99,.35);
  color:var(--copper-300);
  box-shadow:0 0 12px rgba(206,142,99,.20);
  flex-shrink:0;
}
.proc-check-icon .iconify{ font-size:1.05rem; }
.proc-check-title{
  font-family:var(--font-body);font-weight:700;font-size:.98rem;
  color:var(--white-dim); margin:.15rem 0 .25rem;
}
.proc-check-note{
  font-family:var(--font-body);font-size:.84rem;line-height:1.55;
  color:var(--ink-400);
}

.proc-honesty{
  background:var(--ink-800);
  border-left:3px solid var(--copper-500);
  border-radius:0 10px 10px 0;
  padding:1.5rem 1.7rem;
  text-align:left;
  margin:2.4rem auto 0;
  max-width:760px;
}
.proc-honesty-eyebrow{
  font-family:var(--font-body);font-weight:700;
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--copper-300);margin-bottom:.6rem;
}
.proc-honesty-text{
  font-family:var(--font-body);font-size:.98rem;line-height:1.7;
  color:var(--ink-200);
}
.proc-honesty-text b{ color:var(--white); font-weight:600; }

.proc-cta-center{ margin-top:2.4rem; text-align:center; }
.proc-cta-center .btn-primary{ display:inline-flex; }
.proc-cta-micro{
  font-family:var(--font-serif);font-style:italic;
  color:var(--ink-400);font-size:.95rem;margin-top:.9rem;
}

/* Botão outline DARK (reuso) */
.btn-outline-dark{
  display:inline-flex;align-items:center;gap:.7rem;
  border:1px solid var(--copper-500);
  color:var(--copper-300); background:transparent;
  padding:.95rem 1.8rem;border-radius:var(--r-full);
  font-family:var(--font-body);font-size:.74rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  transition:background .35s var(--ease-out-expo),
             color .35s var(--ease-out-expo),
             box-shadow .35s var(--ease-out-expo);
}
.btn-outline-dark:hover,
.btn-outline-dark:focus-visible{
  background:var(--copper-500); color:var(--black);
  box-shadow:var(--glow-copper);
}
.btn-outline-dark.btn-tight{ padding:.7rem 1.2rem; font-size:.7rem; }

/* ============================== DOBRA 4 — TIMELINE (IMPLANTES) ============
   Jornada do implante em 4 etapas (01→04), elemento criativo exclusivo
   da página de implantes. Horizontal no desktop, vertical no mobile.
   Cada etapa: ícone cobre + numeral grande Jost vazado + título + micro.
   Conector tracejado cobre desenhado por gradient (não depende de JS). */
.proc-timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,3vw,36px);
  margin:clamp(36px,5vw,52px) auto 0;
  max-width:1040px;
  list-style:none;padding:0;
  text-align:center;
  isolation:isolate;
}
/* Conector tracejado: linha horizontal que passa por trás dos numerais */
.proc-timeline::before{
  content:"";
  position:absolute;
  top:88px; /* altinha do círculo do numeral — ajustar se mexer no tamanho do numeral */
  left:9%; right:9%;
  height:1px;
  background-image:linear-gradient(to right,
      var(--copper-300) 0,
      var(--copper-300) 6px,
      transparent 6px,
      transparent 14px);
  background-size:14px 1px;
  background-repeat:repeat-x;
  z-index:-1;
  opacity:.55;
}
.proc-timeline-step{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  padding:0 .4rem;
}
.proc-timeline-icon{
  display:grid;place-items:center;
  width:42px;height:42px;border-radius:50%;
  background:var(--white);
  border:1px solid var(--copper-200);
  color:var(--copper-600);
  margin-bottom:.7rem;
  box-shadow:0 6px 20px -10px rgba(106,58,36,.25);
}
.proc-timeline-icon .iconify{ font-size:1.15rem; }
.proc-timeline-num{
  display:grid;place-items:center;
  width:88px;height:88px;border-radius:50%;
  background:var(--copper-50);
  border:1px solid var(--copper-200);
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(2.2rem,4.4vw,2.9rem);
  color:transparent;
  -webkit-text-stroke:1.2px var(--copper-600);
          text-stroke:1.2px var(--copper-600);
  letter-spacing:.02em;
  margin-bottom:1rem;
  position:relative;
  /* ponto cobre cheio dentro (mira) */
}
.proc-timeline-num::after{
  content:"";
  position:absolute;
  width:6px;height:6px;border-radius:50%;
  background:var(--copper-500);
  bottom:-3px; left:50%; transform:translateX(-50%);
  box-shadow:0 0 0 3px var(--ink-50);
}
.proc-timeline-title{
  font-family:var(--font-body);font-weight:700;
  font-size:.95rem;letter-spacing:.02em;
  color:var(--ink-900);
  margin-bottom:.35rem;
  line-height:1.25;
}
.proc-timeline-desc{
  font-family:var(--font-body);font-size:.86rem;line-height:1.6;
  color:var(--ink-600);
  max-width:22ch;
  margin:0 auto;
}
.proc-timeline-closing{
  max-width:680px; margin:clamp(32px,4vw,48px) auto 0;
  font-family:var(--font-body);font-size:.98rem;line-height:1.7;
  color:var(--ink-600); text-align:center;
}
.proc-timeline-closing b{ color:var(--ink-900); font-weight:600; }
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .proc-timeline-step{ animation:none; }
}
/* Vertical no mobile: empilha e troca conector horizontal por vertical à esquerda */
@media (max-width:880px){
  .proc-timeline{
    grid-template-columns:1fr;
    gap:1.4rem;
    text-align:left;
    max-width:520px;
  }
  .proc-timeline::before{
    top:0; bottom:0; left:43px; right:auto;
    width:1px; height:auto;
    background-image:linear-gradient(to bottom,
        var(--copper-300) 0,
        var(--copper-300) 6px,
        transparent 6px,
        transparent 14px);
    background-size:1px 14px;
    background-repeat:repeat-y;
  }
  .proc-timeline-step{
    display:grid;
    grid-template-columns:88px 1fr;
    grid-template-rows:auto auto;
    column-gap:1rem; row-gap:.2rem;
    align-items:center;
    padding:0;
  }
  .proc-timeline-icon{
    grid-row:1; grid-column:1;
    align-self:center; justify-self:center;
    margin-bottom:0;
    /* Some o ícone no mobile pra dar respiro ao numeral (mantém só o número como âncora) */
    display:none;
  }
  .proc-timeline-num{
    grid-row:1 / span 2; grid-column:1;
    width:72px; height:72px;
    margin-bottom:0;
    align-self:center;
  }
  .proc-timeline-num::after{ display:none; }
  .proc-timeline-title{
    grid-row:1; grid-column:2;
    margin-bottom:.15rem;
  }
  .proc-timeline-desc{
    grid-row:2; grid-column:2;
    margin:0; max-width:none;
  }
}

/* ============================== DOBRA 4 — RESINA × PORCELANA =========== */
.proc-quickbox{
  display:inline-flex;align-items:flex-start;gap:.8rem;
  background:var(--copper-50);
  border:1px solid var(--copper-200);
  border-radius:10px;
  padding:1rem 1.4rem;
  max-width:720px; margin:0 auto 3rem;
  text-align:left;
}
.proc-quickbox .iconify{
  color:var(--copper-600);font-size:1.4rem;flex-shrink:0;margin-top:.1rem;
}
.proc-quickbox p{
  font-family:var(--font-body);font-size:.95rem;line-height:1.65;
  color:var(--ink-800);
}
.proc-quickbox b{ color:var(--ink-900);font-weight:600; }

.proc-compare{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:20px;
  text-align:left;
  margin:0 auto 2rem;
  max-width:920px;
}
.proc-compare-card{
  position:relative;
  background:var(--white);
  border:1px solid var(--ink-200);
  border-radius:14px;
  padding:1.8rem 1.7rem;
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease-out-expo),
             box-shadow .4s var(--ease-out-expo);
}
.proc-compare-card-featured{
  border:1.5px solid var(--copper-500);
  box-shadow:0 22px 50px -22px rgba(189,117,82,.35);
}
.proc-compare-card:hover{
  transform:translateY(-3px);
  box-shadow:0 28px 60px -22px rgba(11,10,9,.25);
}
.proc-compare-flag{
  position:absolute;top:-12px;left:1.5rem;
  background:var(--copper-50);
  color:var(--copper-700);
  font-family:var(--font-body);font-size:.6rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  padding:.35rem .7rem;border-radius:4px;
  border:1px solid var(--copper-200);
}
.proc-compare-head{ margin-bottom:1rem; }
.proc-compare-icon{
  font-size:1.6rem;color:var(--copper-500);
  margin-bottom:.4rem;display:inline-block;
}
.proc-compare-icon-neutral{ color:var(--ink-500); }
.proc-compare-title{
  font-family:var(--font-display);font-weight:500;
  font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-900); margin-bottom:.25rem;
}
.proc-compare-essence{
  color:var(--ink-500);font-size:.92rem;
}
.proc-compare-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:.6rem;
}
.proc-compare-list li{
  display:flex;gap:.6rem;align-items:flex-start;
  font-family:var(--font-body);font-size:.92rem;line-height:1.55;
  color:var(--ink-700);
}
.proc-compare-list .iconify{ font-size:1.1rem;flex-shrink:0;margin-top:.05rem; }
.proc-compare-list .iconify.ok{ color:var(--copper-600); }
.proc-compare-list .iconify.info{ color:var(--ink-400); }
.proc-compare-link{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:1.2rem;
  font-family:var(--font-body);font-weight:700;
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--copper-700);
  border-bottom:1px solid transparent;width:fit-content;
  transition:gap .3s ease, border-color .3s ease;
}
.proc-compare-link:hover{ gap:.7rem; border-bottom-color:var(--copper-700); }

.proc-compare-closing{
  max-width:760px;margin:1.4rem auto 0;
  font-family:var(--font-body);font-size:1rem;line-height:1.7;
  color:var(--ink-700); text-align:center;
}
.proc-compare-closing b{ color:var(--ink-900); font-weight:600; }
.proc-compare-closing .proc-text-link{ margin-top:.4rem; display:inline-block; }

/* ============================== DOBRA 5 — DIFERENCIAL / RETRATO ========= */
.proc-portrait{
  position:relative;
  width:100%;max-width:420px;
  margin:0 auto;
  aspect-ratio:4/5;
}
.proc-portrait-glow{
  position:absolute;inset:-8% -10% -2% -10%;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,
    rgba(206,142,99,.45), rgba(189,117,82,.15) 55%, transparent 72%);
  filter:blur(28px);
  animation:glowPulse 6s ease-in-out infinite;
  z-index:0;
}
.proc-portrait-frame{
  position:relative;z-index:1;
  width:100%;height:100%;
  border-radius:10px;overflow:hidden;
  border:1px solid var(--ink-700);
  box-shadow:0 30px 80px -28px rgba(0,0,0,.9);
}
.proc-portrait-frame img{
  width:100%;height:100%;object-fit:cover;object-position:center 20%;
  filter:saturate(1.02) contrast(1.02);
}
.proc-portrait-frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(11,10,9,.7) 100%);
}
.proc-portrait-cred{
  position:absolute;left:16px;bottom:16px;z-index:2;
  background:rgba(11,10,9,.75);
  border:1px solid var(--copper-600);
  color:var(--copper-300);
  font-family:var(--font-body);font-size:.6rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  padding:.4rem .7rem;border-radius:4px;
  backdrop-filter:blur(6px);
}
.proc-portrait-sig{
  text-align:center;margin-top:.9rem;
  font-family:var(--font-serif);font-style:italic;
  color:var(--copper-300);
  font-size:1.05rem;
}

.proc-pillars{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
  list-style:none;padding:0;margin-top:1.8rem;
}
.proc-pillars li{
  display:flex;gap:.7rem;align-items:flex-start;
}
.proc-pillars .iconify{
  font-size:1.5rem;color:var(--copper-400);flex-shrink:0;margin-top:.15rem;
}
.proc-pillars h4{
  font-family:var(--font-body);font-weight:700;font-size:.9rem;
  color:var(--white-dim);margin-bottom:.2rem;
  letter-spacing:.04em;text-transform:uppercase;
}
.proc-pillars p{
  font-size:.82rem;line-height:1.5;color:var(--ink-400);
}

.proc-pullquote{
  position:relative;z-index:1;
  max-width:880px;margin:3.2rem auto 1.6rem;
  text-align:center;padding:1.6rem 1rem;
  border-top:1px solid rgba(189,117,82,.25);
  border-bottom:1px solid rgba(189,117,82,.25);
}
.proc-pullquote p{
  font-family:var(--font-serif);font-style:italic;
  font-size:clamp(1.4rem,3vw,2.1rem);
  line-height:1.3;color:var(--copper-300);
  letter-spacing:.01em;
}

.proc-authority{
  position:relative;z-index:1;
  max-width:760px;margin:.4rem auto 0;
  text-align:center;
  font-family:var(--font-body);font-size:.92rem;color:var(--ink-300);
  display:flex;flex-wrap:wrap;gap:.4rem .8rem;
  justify-content:center;align-items:center;
}
.proc-authority .iconify{ color:var(--copper-400); font-size:1.1rem; }
.proc-authority b{ color:var(--white-dim);font-weight:600; }
.proc-authority-sep{ color:var(--ink-500); user-select:none; }

/* ============================== DOBRA 6 — ANTES & DEPOIS (showcase) ===== */
.proc-showcase{
  position:relative;
  max-width:760px;margin:0 auto 1.6rem;
  border-radius:12px;overflow:hidden;
  border:1px solid var(--ink-700);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
  aspect-ratio:4/3;
}
.proc-showcase img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.02) contrast(1.02);
}
.proc-showcase::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(11,10,9,.5) 100%);
}
.proc-showcase-badge{
  position:absolute;top:16px;left:16px;z-index:2;
  background:rgba(11,10,9,.75);
  border:1px solid var(--copper-600);
  color:var(--copper-300);
  font-family:var(--font-body);font-size:.6rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  padding:.4rem .8rem;border-radius:4px;
  backdrop-filter:blur(6px);
}
.proc-showcase-corner-left,
.proc-showcase-corner-right{
  position:absolute;bottom:14px;z-index:2;
  background:rgba(11,10,9,.65);
  color:var(--ink-100);
  font-family:var(--font-body);font-size:.62rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  padding:.35rem .7rem;border-radius:4px;
}
.proc-showcase-corner-left{ left:14px; }
.proc-showcase-corner-right{ right:14px; color:var(--copper-300); }

.proc-legal{
  font-family:var(--font-body);font-size:.78rem;line-height:1.65;
  color:var(--ink-400);
  max-width:680px;margin:0 auto 1.6rem;text-align:center;
}
.proc-legal b{ color:var(--ink-200); font-weight:600; }
.proc-legal-strong{ display:inline-block;color:var(--white-dim);font-weight:600;margin-top:.2rem; }

/* ============================== DOBRA 7 — FAQ (sticky side) ============= */
.proc-faq .proc-grid-faq > .proc-faq-side{
  position:sticky; top:calc(var(--nav-h) + 1.5rem);
  align-self:start;
}
.proc-faq-help{
  font-family:var(--font-body);font-size:.95rem;color:var(--ink-600);
  margin:.6rem 0 1.4rem;
}
.proc-faq-cta{ margin-bottom:1rem; }

/* Override leve do faq-item para o tema marfim das procedures
   (a home usa fundo marfim/branco — aqui mantemos o branco do card) */
.proc-faq-list .faq-item{
  background:var(--white);
  border:1px solid var(--ink-200);
  border-radius:10px;
  margin-bottom:.7rem;
  padding:0; /* sobrescreve possíveis paddings da home */
  border-bottom:1px solid var(--ink-200);
}
.proc-faq-list .faq-item.is-open{
  border-color:var(--copper-300);
  background:#fffaf3;
}
.proc-faq-list .faq-q{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.3rem;
  font-family:var(--font-body);font-weight:600;font-size:1rem;
  color:var(--ink-900);
  text-align:left;cursor:pointer;
  border:none;background:transparent;
  transition:color .3s ease;
}
.proc-faq-list .faq-q:hover,
.proc-faq-list .faq-q:focus-visible{ color:var(--copper-700); }
.proc-faq-list .faq-icon{
  position:relative;width:18px;height:18px;flex-shrink:0;
  display:inline-block;
}
.proc-faq-list .faq-icon-h,
.proc-faq-list .faq-icon-v{
  position:absolute;left:0;top:50%;width:100%;height:1.5px;
  background:var(--copper-500);transform-origin:center;
  transition:transform .35s var(--ease-out-expo);
}
.proc-faq-list .faq-icon-v{ transform:translateY(-50%) rotate(90deg); }
.proc-faq-list .faq-item.is-open .faq-icon-v{ transform:translateY(-50%) rotate(0); }
.proc-faq-list .faq-a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--ease-out-expo);
}
.proc-faq-list .faq-item.is-open .faq-a{ grid-template-rows:1fr; }
.proc-faq-list .faq-a-inner{
  overflow:hidden;
  padding:0 1.3rem;
}
.proc-faq-list .faq-item.is-open .faq-a-inner{
  padding:0 1.3rem 1.2rem;
}
.proc-faq-list .faq-a-inner p{
  font-family:var(--font-body);font-size:.94rem;line-height:1.7;
  color:var(--ink-700);
}

/* ----- D6 EXTRA: chips "o que mudou" (Forma · Cor · Espaços) -----
   Toque criativo da dobra Antes/Depois: micro-pills que conectam a prova
   visual às indicações da D3, educando sem sensacionalizar. */
.proc-changed{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px;
  margin:1.6rem auto 0;max-width:680px;
}
.proc-changed-label{
  font-family:var(--font-body);font-weight:700;
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--copper-300);
  margin-right:.2rem;
}
.proc-changed-chip{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--ink-800);
  border:1px solid var(--ink-700);
  border-radius:999px;
  padding:.42rem .85rem;
  font-family:var(--font-body);font-weight:600;
  font-size:.76rem;letter-spacing:.04em;
  color:var(--ink-200);
}
.proc-changed-chip .iconify{
  color:var(--copper-400);font-size:.95rem;
}

/* ----- D6 EXTRA (IMPLANTES): descritor clínico sóbrio (tipo + região) -----
   Toque criativo da dobra Antes/Depois da página de implantes — substitui
   os chips das estéticas. Informa o tipo de caso sem sensacionalismo:
   "Exemplo de caso: implante unitário · região anterior". */
.proc-clinical-descriptor{
  display:inline-flex;align-items:center;gap:.5rem;
  margin:1.4rem auto 0;
  font-family:var(--font-body);font-weight:600;
  font-size:.82rem;letter-spacing:.04em;
  color:var(--ink-300);
}
.proc-clinical-descriptor .iconify{
  color:var(--copper-400);font-size:1rem;
}
.proc-clinical-descriptor b{
  color:var(--copper-300);font-weight:600;
}

/* ----- D7 EXTRA: micro-ícone cobre por pergunta + realce da objeção-chave -----
   O ícone dá ritmo visual à varredura; o realce sinaliza "a gente sabe que
   essa é a sua maior dúvida" sem gritar. */
.proc-faq-list .faq-q{
  /* mantém o flex já existente; agora há um ícone à esquerda do texto */
  gap:.85rem;
}
.proc-faq-q-icon{
  flex-shrink:0;
  font-size:1.1rem;
  color:var(--copper-500);
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--copper-50);
  border:1px solid var(--copper-100,#f0d8c4);
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.proc-faq-list .faq-q-text{ flex:1; }
.proc-faq-list .faq-item:hover .proc-faq-q-icon,
.proc-faq-list .faq-item.is-open .proc-faq-q-icon{
  background:var(--copper-100,#f3dfca);
  color:var(--copper-700);
  border-color:var(--copper-300);
}

.proc-faq-item-highlight{
  position:relative;
  border-color:var(--copper-300) !important;
  box-shadow:0 18px 38px -22px rgba(189,117,82,.30);
}
.proc-faq-highlight-tag{
  position:absolute;top:-10px;right:18px;
  background:var(--copper-50);
  color:var(--copper-700);
  font-family:var(--font-body);font-weight:700;
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.32rem .65rem;border-radius:4px;
  border:1px solid var(--copper-200);
}

/* ============================== DOBRA 8 — CTA FINAL ===================== */
.proc-final-left{ position:relative; }
.proc-final-cta{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:1.6rem;
}
.proc-final-cta .contact-halo{
  position:absolute;inset:-30px;
  background:radial-gradient(circle, rgba(206,142,99,.45),transparent 65%);
  filter:blur(24px);
  animation:glowPulse 5s ease-in-out infinite;
  z-index:0;
  border-radius:50%;
}
.proc-final-cta .btn-primary{ position:relative; z-index:1; }

.btn-xl{
  font-size:.86rem !important;
  padding:1.25rem 2.8rem !important;
  letter-spacing:.24em !important;
}

.proc-final-micro{
  margin-top:1.2rem;
  font-family:var(--font-body);font-size:.82rem;color:var(--ink-400);
}
.proc-final-micro b{ color:var(--white-dim); font-weight:600; }

.proc-contact-card{
  background:var(--ink-800);
  border:1px solid var(--ink-700);
  border-radius:14px;
  padding:1.8rem 1.7rem;
}
.proc-contact-list{
  list-style:none;padding:0;margin:0 0 1rem;
  display:flex;flex-direction:column;gap:.95rem;
}
.proc-contact-list li{
  display:flex;gap:.85rem;align-items:flex-start;
  font-family:var(--font-body);font-size:.9rem;line-height:1.5;color:var(--ink-300);
}
.proc-contact-list .iconify{
  color:var(--copper-400);font-size:1.2rem;flex-shrink:0;margin-top:.1rem;
}
.proc-contact-list strong{ color:var(--white-dim);font-weight:600; display:block; }
.proc-contact-list span{ display:block;font-size:.84rem;color:var(--ink-400); }
.proc-contact-list a{ color:inherit; transition:color .3s ease; }
.proc-contact-list a:hover{ color:var(--copper-300); }
.proc-contact-cro{
  font-family:var(--font-body);font-size:.78rem;color:var(--ink-400);
  border-top:1px solid var(--ink-700);
  padding-top:.9rem;margin-top:.4rem;
}
.proc-map{
  display:block;margin-top:1.2rem;
  border-radius:8px;overflow:hidden;
  border:1px solid var(--ink-700);
}
.proc-map iframe{ display:block; filter:invert(.92) hue-rotate(180deg) brightness(.95) saturate(.85); }
.proc-directions{ width:100%;justify-content:center;margin-top:1rem; }

.proc-disclaimer{
  position:relative;z-index:1;
  margin:2rem auto 0;text-align:center;
  font-family:var(--font-body);font-size:.78rem;color:var(--ink-400);
  max-width:760px;
}

/* ============================== RESPONSIVO ============================== */
@media (max-width:1100px){
  .proc-grid-60-40,
  .proc-grid-portrait,
  .proc-grid-faq,
  .proc-grid-final{
    grid-template-columns:1fr;
  }
  .proc-portrait{ max-width:340px;margin:0 auto 1.4rem; order:-1; }
  .proc-pillars{ grid-template-columns:1fr; }
  .proc-faq .proc-grid-faq > .proc-faq-side{ position:static; }
}

@media (max-width:880px){
  .proc-section{ padding:clamp(56px,12vw,90px) 1.2rem; }
  .proc-checklist-2x2{ grid-template-columns:1fr; }
  .proc-compare{ grid-template-columns:1fr; }
  .proc-compare-card-featured{ order:-1; } /* destaque primeiro no mobile */
  .proc-microbenefits{ gap:1rem; }
  .proc-microbenefits li{ flex-direction:row;align-items:center;flex-wrap:wrap;gap:.6rem; }
  .proc-microbenefits .iconify{ margin-bottom:0; }
  .proc-highlight-card{ margin-top:1.6rem; }
  .proc-breadcrumb-inner{ font-size:.65rem; }
  .proc-final-cta .contact-halo{ inset:-18px; }
  .proc-hero-signature{ display:none; }
}

@media (max-width:640px){
  .proc-section{ padding:clamp(56px,12vw,90px) 1rem; }
  .proc-title{ font-size:clamp(1.7rem,7vw,2.4rem); }
  .proc-quickbox{ flex-direction:column; align-items:flex-start; }
  .proc-pullquote p{ font-size:1.2rem; }
  .btn-xl{ font-size:.78rem !important; padding:1.1rem 1.9rem !important; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  .proc-portrait-glow,
  .proc-final-cta .contact-halo,
  .proc-bg-aurora{ animation:none; }
}