/* =================================================================
   PÁGINAS INTERNAS — molde compartilhado (procedimentos, capilar,
   a-clínica, contato, blog). Depende de main.css.
   ================================================================= */

/* ---------- HERO INTERNO (com ken burns lento) ---------- */
.ihero {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  min-height: clamp(58vh, 68vh, 78vh);
  padding: calc(var(--header-h) + clamp(2.5rem,7vh,5rem)) 0 clamp(2.8rem,7vh,5rem);
}
.ihero-bg { position: absolute; inset: -24px; z-index: 0; }
.ihero-bg .hero-kb { position: absolute; inset: 0; animation: heroBreath 16s ease-in-out infinite alternate; will-change: transform; }
.ihero-bg .hero-kb > * { width: 100%; height: 100%; }
.ihero-bg::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(25,24,23,.5) 0%, rgba(25,24,23,.35) 40%, rgba(25,24,23,.92) 100%); }
.ihero .container { position: relative; z-index: 2; }
.ihero .breadcrumb { margin-bottom: 1.4rem; }
.ihero .eyebrow { margin-bottom: 1.3rem; }
.ihero .accent-line { margin: 0 0 1.5rem; }
.ihero .headline { max-width: 18ch; }
.ihero-dek { margin-top: 1.6rem; max-width: 56ch; color: var(--on-dark-sec); font-size: 1.12rem; }
.ihero-actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1.3rem 1.8rem; align-items: center; }

/* ---------- CABEÇALHO DE SEÇÃO ---------- */
.sec-head { max-width: 62ch; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head .eyebrow { margin-bottom: 1rem; }
.sec-head p.lead { margin-top: 1.3rem; }
.sec-head.center .lead { margin-inline: auto; }

/* ---------- CARDS DE INDICAÇÃO ("você se reconhece?") ---------- */
.indic { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.2rem; }
.indic li { background: var(--graphite-panel); border: 1px solid var(--border-dark); border-radius: 2px;
  padding: 1.4rem 1.5rem; display: flex; gap: .9rem; align-items: flex-start;
  transition: border-color .5s var(--ease-luxe); }
.indic li:hover { border-color: var(--champagne); }
.indic li::before { content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-top: .55em;
  border: 1px solid var(--champagne); transform: rotate(45deg); }
.indic li span { color: var(--on-dark-sec); font-size: 15px; }
.section-light .indic li { background: #fff; border-color: var(--border-light); }
.section-light .indic li span { color: var(--on-light-body); }
@media (max-width: 720px){ .indic { grid-template-columns: 1fr; } }

/* ---------- ETAPAS NUMERADAS ---------- */
.steps { display: grid; gap: 1.5rem; counter-reset: step; }
.steps.cols { grid-template-columns: repeat(4,1fr); }
.step { position: relative; padding-top: 1.4rem; border-top: 1px solid var(--border-dark); }
.section-light .step { border-top-color: var(--border-light); }
.step .step-num { font-family: var(--font-voice); font-size: 2.6rem; line-height: 1; color: var(--champagne); display: block; margin-bottom: .8rem; }
.step h3 { color: var(--on-dark-title); font-size: 1.15rem; margin-bottom: .5rem; }
.section-light .step h3 { color: var(--on-light-title); }
.step p { font-size: 14px; color: var(--on-dark-sec); }
.section-light .step p { color: var(--on-light-body); }
@media (max-width: 860px){ .steps.cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .steps.cols { grid-template-columns: 1fr; } }

/* ---------- FASES DE RECUPERAÇÃO (timeline) ---------- */
.phases { display: grid; gap: 1.2rem; }
.phase { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: baseline;
  padding-bottom: 1.2rem; border-bottom: 1px solid var(--border-dark); }
.section-light .phase { border-bottom-color: var(--border-light); }
.phase:last-child { border-bottom: 0; }
.phase .when { font-family: var(--font-voice); font-size: 1.25rem; color: var(--champagne); min-width: 7.5rem; }
.phase .what { color: var(--on-dark-sec); font-size: 15px; }
.section-light .phase .what { color: var(--on-light-body); }
@media (max-width: 560px){ .phase { grid-template-columns: 1fr; gap: .3rem; } }

/* ---------- BANDA DE DESTAQUE (diferencial / "por que cirurgião") ---------- */
.feature-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; margin-top: 2.6rem; }
.feature-list .fi { }
.feature-list .fi .k { font-family: var(--font-voice); font-size: 1.5rem; color: var(--on-dark-title); margin-bottom: .5rem; }
.feature-list .fi .v { font-size: 14px; color: var(--on-dark-sec); }
@media (max-width: 760px){ .feature-list { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ---------- CALLOUT "IMPORTANTE" ---------- */
.callout { background: var(--graphite-panel); border: 1px solid var(--border-dark);
  border-left: 2px solid var(--champagne); border-radius: 2px; padding: 1.6rem 1.8rem; }
.callout .k { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--champagne); margin-bottom: .6rem; }
.callout p { color: var(--on-dark-sec); font-size: 15px; }
.section-light .callout { background: #fff; border-color: var(--border-light); border-left-color: var(--champagne); }
.section-light .callout p { color: var(--on-light-body); }

/* ---------- FAQ ACORDEÃO ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--border-dark); }
.section-light .faq-item { border-bottom-color: var(--border-light); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.5rem 0; text-align: left; font-family: var(--font-voice); font-size: 1.3rem;
  color: var(--on-dark-title); transition: color .35s; }
.section-light .faq-q { color: var(--on-light-title); }
.faq-q:hover { color: var(--champagne); }
.faq-q .ic { flex: 0 0 auto; width: 18px; height: 18px; position: relative; }
.faq-q .ic::before, .faq-q .ic::after { content: ''; position: absolute; background: var(--champagne); transition: transform .4s var(--ease-luxe); }
.faq-q .ic::before { top: 8px; left: 0; width: 18px; height: 1.5px; }
.faq-q .ic::after { left: 8px; top: 0; width: 1.5px; height: 18px; }
.faq-q[aria-expanded="true"] .ic::after { transform: scaleY(0); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .5s var(--ease-luxe); }
.faq-a-inner { padding: 0 0 1.5rem; color: var(--on-dark-sec); font-size: 15px; line-height: 1.8; max-width: 70ch; }
.section-light .faq-a-inner { color: var(--on-light-body); }

/* ---------- CTA DE SEÇÃO (meio/fim) ---------- */
.cta-band { text-align: center; }
.cta-band .headline { margin-inline: auto; max-width: 20ch; }
.cta-band .lead { margin: 1.4rem auto 0; }
.cta-band .btn { margin-top: 2.2rem; }

/* ---------- CANAIS DE CONTATO ---------- */
.channel { display: flex; gap: 1rem; align-items: flex-start; }
.channel .icon { color: var(--champagne); margin-top: .15rem; }
.channel .k { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--on-dark-mut); margin-bottom: .3rem; }
.channel a, .channel p { color: var(--on-dark-title); font-size: 1.05rem; }
.channel a:hover { color: var(--champagne); }

/* ---------- MAPA ---------- */
.map-card { border: 1px solid var(--border-dark); border-radius: 3px; overflow: hidden; background: var(--graphite-panel); }
.map-card iframe { display: block; width: 100%; height: clamp(280px, 42vw, 440px); border: 0; filter: grayscale(.3) contrast(.95); }

/* ---------- FORMULÁRIO DE PRÉ-AVALIAÇÃO ---------- */
.form-grid { display: grid; gap: 1.7rem; }
.field label { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--on-dark-mut); margin-bottom: .55rem; }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--border-dark);
  color: var(--on-dark-title); padding: .6rem 0; font-size: 1rem; font-family: var(--font-sans);
  transition: border-color .4s var(--ease-luxe); }
.field input::placeholder, .field textarea::placeholder { color: var(--on-dark-mut); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--champagne); }
.field textarea { resize: vertical; min-height: 96px; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--champagne) 50%), linear-gradient(135deg, var(--champagne) 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 9px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field select option { background: var(--graphite-panel); color: var(--on-dark-title); }
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: 13px; line-height: 1.6; color: var(--on-dark-sec); }
.consent input { width: auto; margin-top: .2rem; accent-color: var(--champagne); flex: 0 0 auto; }
.consent a { color: var(--champagne); }
.form-note { font-size: 12px; color: var(--on-dark-mut); margin-top: -.4rem; }
.form-status { font-size: 14px; min-height: 1.3em; }
.form-status.ok { color: var(--champagne); }
.form-status.err { color: #c98b7a; }

/* ---------- ÍNDICE DE PROCEDIMENTOS (cards agrupados) ---------- */
.group { margin-top: clamp(2.5rem,6vw,4rem); }
.group-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.6rem; }
.group-head .eyebrow { margin: 0; }
.group-head h3 { font-family: var(--font-voice); font-weight: 400; font-size: clamp(1.5rem,3vw,2rem); color: var(--on-dark-title); }
.section-light .group-head h3 { color: var(--on-light-title); }
.cardlink { display: flex; flex-direction: column; }
.cardlink .go { margin-top: 1.2rem; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--champagne); }
.cardlink .go span { display: inline-block; transition: margin-left .4s var(--ease-luxe); }
.cardlink:hover .go span { margin-left: .4rem; }

/* ---------- FICHA TÉCNICA (sutura silhouette etc.) ---------- */
.spec { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; margin-top: 2.4rem;
  border-block: 1px solid var(--border-dark); padding-block: 1.8rem; }
.section-light .spec { border-block-color: var(--border-light); }
.spec .si .k { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--on-dark-mut); margin-bottom: .4rem; }
.spec .si .v { font-family: var(--font-voice); font-size: 1.3rem; color: var(--champagne); line-height: 1.15; }
.section-light .spec .si .v { color: var(--on-light-strong); }
@media (max-width: 720px){ .spec { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

/* ---------- FAIXA DE DESTAQUE (pioneirismo etc.) ---------- */
.highlight { background: var(--graphite-panel); border: 1px solid var(--border-dark);
  border-radius: 3px; padding: clamp(1.8rem,4vw,2.6rem); display: flex; gap: 1.4rem; align-items: flex-start; }
.highlight .badge { flex: 0 0 auto; width: 30px; height: 30px; color: var(--champagne); }
.highlight .k { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--champagne); margin-bottom: .5rem; }
.highlight h3 { font-family: var(--font-voice); font-weight: 400; font-size: clamp(1.4rem,3vw,1.9rem); color: var(--on-dark-title); margin-bottom: .5rem; }
.highlight p { color: var(--on-dark-sec); font-size: 15px; max-width: 60ch; }

/* tags reaproveitadas em páginas internas (já existe .tags/.tag em home.css;
   redeclaradas aqui de forma idêntica para não depender de home.css) */
.tagrow { display: flex; flex-wrap: wrap; gap: .6rem; }
.tagrow .tag { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--on-dark-sec);
  border: 1px solid var(--border-dark); border-radius: 100px; padding: .55em 1.1em; transition: border-color .4s, color .4s; }
.tagrow .tag:hover { border-color: var(--champagne); color: var(--champagne); }