/* =====================================================================
   procedimentos.css · Dr. Fabio Salomão
   Layout específico da página Procedimentos: hero de conversão,
   seção de acordeões por grupo, CTA final. Cor só via var(--…).
   ===================================================================== */

/* ===== Hero (Marfim, foco em texto e conversão) ===== */
.proc-hero{position:relative;overflow:hidden;background:var(--marfim);border-bottom:1px solid var(--areia-escuro-01);padding:150px 0 110px}
.proc-hero .wrap{position:relative;z-index:1}
.proc-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.proc-hero-copy{max-width:760px}
.proc-hero h1{margin-bottom:26px;max-width:14ch}
.proc-hero .lead{max-width:62ch;color:var(--grafite);margin-bottom:20px}
.proc-hero .support{max-width:60ch;color:var(--grafite);margin-bottom:34px}
.proc-hero-ctas{display:flex;flex-wrap:wrap;gap:14px}

/* mancha Azul Névoa de baixa opacidade + linha inferior Areia */
.proc-hero .bg-layers{z-index:0}
.proc-hero .blob-nevoa{position:absolute;width:520px;height:520px;top:-160px;right:-140px;border-radius:50%;background:radial-gradient(circle at 40% 40%,var(--nevoa),transparent 70%);opacity:.5;filter:blur(2px);pointer-events:none}

/* elemento visual abstrato (camadas translúcidas, currentColor) */
.proc-hero-visual{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.proc-hero-visual svg{width:100%;height:auto;color:var(--azul-profundo);opacity:.9}

/* ===== Seção de acordeões (Areia Mineral Claro 01) ===== */
.proc-list{background:var(--areia-claro-01);border-top:1px solid var(--marfim-escuro-01)}
.proc-list .sec-head{margin-bottom:44px}
.proc-list .sec-head h2{max-width:22ch}
.proc-list .sec-head p{max-width:58ch}

/* grupo de procedimentos: título + contexto + acordeão */
.proc-group{margin-bottom:56px}
.proc-group:last-of-type{margin-bottom:0}
.proc-group-head{margin-bottom:22px;max-width:60ch}
.proc-group-head h3{color:var(--azul-profundo);margin-bottom:8px}
.proc-group-head p{color:var(--grafite);font-size:16px;line-height:1.55}

/* acordeões: skin do design system (.acc/.acc-item…) já cobre estados */
.proc-group .acc-panel-inner p{color:var(--grafite);max-width:64ch}
.proc-group .acc-panel-inner p + p{margin-top:12px}

/* ===== Bloco de interligações (discreto, antes do CTA final) ===== */
.proc-links{background:var(--marfim);border-top:1px solid var(--marfim-escuro-01)}
.proc-links .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.proc-link-card{border:1px solid var(--areia-escuro-01);border-radius:var(--radius-tag);padding:28px 26px;background:var(--areia-claro-01);display:flex;flex-direction:column}
.proc-link-card h3{font-size:clamp(18px,1.6vw,21px);color:var(--azul-profundo);margin-bottom:10px}
.proc-link-card p{font-size:15px;line-height:1.55;color:var(--grafite);margin-bottom:auto}
.proc-link-card a{margin-top:20px;font-weight:700;font-size:15px;color:var(--azul-profundo);display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px}
.proc-link-card a svg{transition:transform .35s var(--ease)}
.proc-link-card a:hover svg{transform:translateX(4px)}

/* ===== CTA final (Azul Profundo Clínico, centralizado) ===== */
.proc-cta-final{background:var(--azul-profundo);color:var(--marfim);text-align:center}
.proc-cta-final .wrap{max-width:860px}
.proc-cta-final h2{color:var(--marfim);max-width:22ch;margin:0 auto 20px}
.proc-cta-final p{color:var(--azul-claro-02);max-width:720px;margin:0 auto 34px}
.proc-cta-final .btn-light:hover{background:var(--nevoa);color:var(--azul-escuro-02)}

/* ===== Empilhamento mobile ===== */
@media (max-width:860px){
  .proc-hero-grid{grid-template-columns:1fr;gap:48px}
  .proc-hero-visual{order:-1;max-width:380px;margin:0 auto}
  .proc-links .wrap{grid-template-columns:1fr;gap:16px}
}
@media (max-width:560px){
  .proc-hero{padding:120px 0 80px}
  .proc-hero-ctas{flex-direction:column;align-items:stretch}
  .proc-hero-ctas .btn{width:100%}
  .proc-group{margin-bottom:44px}
}