/* ============================================================
 BANNER PROCEDIMENTOS - totalmente independente (prefixo hkb-)
 ============================================================ */
.hkb-secao,
.hkb-secao *{
box-sizing: border-box;
}

.hkb-secao{
--hkb-marrom: #3a2820;
--hkb-marrom-escuro: #241811;
--hkb-ouro: #e3b881;
--hkb-creme: #f8ecd9;
--hkb-rosa: #d7a3b8;
--hkb-raio: 30px;

position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 1800px;
min-height: 380px;
padding: 80px 24px;
margin: 30px auto;
overflow: hidden;
isolation: isolate;
border-radius: var(--hkb-raio);
background: var(--hkb-marrom-escuro);
font-family: "Sora", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Todas as camadas herdam o arredondamento */
.hkb-fundo,
.hkb-textura,
.hkb-orbes,
.hkb-poeira,
.hkb-faiscas,
.hkb-holofote,
.hkb-varredura{
border-radius: inherit;
}

/* ---------- Fundo com gradiente vivo ---------- */
.hkb-fundo{
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(125deg,
            #4a3427 0%,
            #2f2018 30%,
            #241811 55%,
            #3d2a20 80%,
            #2a1c15 100%);
background-size: 300% 300%;
animation: hkbGradiente 18s ease-in-out infinite;
}
@keyframes hkbGradiente{
0%, 100%{ background-position: 0% 50%; }
50%     { background-position: 100% 50%; }
}

/* ---------- Foto da clínica (opcional) ---------- */
.hkb-foto{
position: absolute;
inset: -8%;
z-index: 2;
pointer-events: none;
background-image: url('../images/banner-fundo.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: .16;
mix-blend-mode: soft-light;
transform: scale(1.06);
animation: hkbZoom 28s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes hkbZoom{
from{ transform: scale(1.04) translate3d(0,0,0); }
to  { transform: scale(1.2) translate3d(-2.5%,-3%,0); }
}

/* ---------- Textura de malha ---------- */
.hkb-textura{
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
opacity: .45;
background-image:
  linear-gradient(rgba(248,236,217,.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(248,236,217,.05) 1px, transparent 1px);
background-size: 60px 60px;
-webkit-mask-image: radial-gradient(75% 70% at 50% 50%, #000 0%, transparent 82%);
mask-image: radial-gradient(75% 70% at 50% 50%, #000 0%, transparent 82%);
animation: hkbDesliza 40s linear infinite;
}
@keyframes hkbDesliza{
from{ background-position: 0 0, 0 0; }
to  { background-position: 60px 60px, 60px 60px; }
}

/* ---------- Orbes de luz flutuando ---------- */
.hkb-orbes{
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
overflow: hidden;
}
.hkb-orbe{
position: absolute;
border-radius: 50%;
filter: blur(58px);
will-change: transform, opacity;
}
.hkb-orbe-a{
width: 380px; height: 380px;
top: -140px; left: -80px;
background: radial-gradient(circle, rgba(227,184,129,.80) 0%, rgba(227,184,129,0) 70%);
animation: hkbBoia1 13s ease-in-out infinite;
}
.hkb-orbe-b{
width: 440px; height: 440px;
bottom: -210px; right: -100px;
background: radial-gradient(circle, rgba(215,163,184,.62) 0%, rgba(215,163,184,0) 70%);
animation: hkbBoia2 17s ease-in-out infinite;
}
.hkb-orbe-c{
width: 300px; height: 300px;
top: 8%; left: 48%;
background: radial-gradient(circle, rgba(248,236,217,.42) 0%, rgba(248,236,217,0) 70%);
animation: hkbBoia3 11s ease-in-out infinite;
}
@keyframes hkbBoia1{
0%, 100%{ transform: translate3d(0,0,0) scale(1); opacity: .55; }
50%     { transform: translate3d(120px,70px,0) scale(1.35); opacity: 1; }
}
@keyframes hkbBoia2{
0%, 100%{ transform: translate3d(0,0,0) scale(1.15); opacity: .48; }
50%     { transform: translate3d(-140px,-60px,0) scale(1); opacity: 1; }
}
@keyframes hkbBoia3{
0%, 100%{ transform: translate3d(0,0,0) scale(.85); opacity: .28; }
50%     { transform: translate3d(-90px,55px,0) scale(1.4); opacity: .85; }
}

/* ---------- Poeira dourada ---------- */
.hkb-poeira{
position: absolute;
inset: 0;
z-index: 6;
width: 100%;
height: 100%;
pointer-events: none;
}

/* ---------- Faíscas cintilantes ---------- */
.hkb-faiscas{
position: absolute;
inset: 0;
z-index: 7;
pointer-events: none;
overflow: hidden;
}
.hkb-faisca{
position: absolute;
fill: var(--hkb-creme);
filter: drop-shadow(0 0 12px rgba(248,236,217,.9));
will-change: transform, opacity;
}
.hkb-faisca-1{ width: 28px; height: 28px; top: 18%; left: 10%;  animation: hkbCintila 4.4s ease-in-out infinite,      hkbSobeDesce 9s ease-in-out infinite; }
.hkb-faisca-2{ width: 15px; height: 15px; top: 68%; left: 20%;  animation: hkbCintila 3.3s ease-in-out infinite .6s,  hkbSobeDesce 11s ease-in-out infinite .9s; }
.hkb-faisca-3{ width: 32px; height: 32px; top: 16%; right: 12%; animation: hkbCintila 5.1s ease-in-out infinite 1.1s, hkbSobeDesce 8s ease-in-out infinite .4s; }
.hkb-faisca-4{ width: 14px; height: 14px; top: 74%; right: 22%; animation: hkbCintila 3.1s ease-in-out infinite 1.8s, hkbSobeDesce 12s ease-in-out infinite 1.5s; }
.hkb-faisca-5{ width: 20px; height: 20px; top: 44%; right: 6%;  animation: hkbCintila 4.2s ease-in-out infinite .3s,  hkbSobeDesce 10s ease-in-out infinite 2.1s; }
.hkb-faisca-6{ width: 18px; height: 18px; top: 38%; left: 5%;   animation: hkbCintila 3.8s ease-in-out infinite 2.4s, hkbSobeDesce 13s ease-in-out infinite .7s; }
@keyframes hkbCintila{
0%, 100%{ opacity: .18; transform: scale(.55) rotate(0deg); }
50%     { opacity: 1;   transform: scale(1.3) rotate(50deg); }
}
@keyframes hkbSobeDesce{
0%, 100%{ margin-top: 0; }
50%     { margin-top: -30px; }
}

/* ---------- Holofote que segue o mouse ---------- */
.hkb-holofote{
position: absolute;
inset: 0;
z-index: 8;
pointer-events: none;
opacity: 0;
transition: opacity .55s ease;
background: radial-gradient(circle 320px at var(--hkb-x, 50%) var(--hkb-y, 50%),
            rgba(248,236,217,.24) 0%,
            rgba(227,184,129,.13) 42%,
            transparent 72%);
}
.hkb-secao.hkb-ativo .hkb-holofote{ opacity: 1; }

/* ---------- Varredura de brilho ---------- */
.hkb-varredura{
position: absolute;
inset: 0;
z-index: 9;
pointer-events: none;
overflow: hidden;
}
.hkb-varredura::after{
content: "";
position: absolute;
top: -60%; left: -30%;
width: 15%; height: 220%;
transform: rotate(16deg);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
filter: blur(12px);
animation: hkbVarre 8s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes hkbVarre{
0%  { left: -30%; opacity: 0; }
10% { opacity: 1; }
78% { opacity: 1; }
100%{ left: 122%; opacity: 0; }
}

/* ---------- Fios de luz ---------- */
.hkb-fio{
position: absolute;
left: 12%; right: 12%;
height: 1px;
z-index: 10;
pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(227,184,129,.95), transparent);
animation: hkbBrilha 4.2s ease-in-out infinite;
}
.hkb-fio-topo{ top: 0; }
.hkb-fio-base{ bottom: 0; animation-delay: 2.1s; }
@keyframes hkbBrilha{
0%, 100%{ opacity: .18; transform: scaleX(.55); }
50%     { opacity: 1;   transform: scaleX(1); }
}

/* ---------- Cantos técnicos ---------- */
.hkb-canto{
position: absolute;
width: 40px; height: 40px;
z-index: 11;
pointer-events: none;
border-color: rgba(227,184,129,.55);
animation: hkbCanto 4s ease-in-out infinite;
}
.hkb-canto-se{ top: 28px; left: 28px;     border-top: 2px solid;    border-left: 2px solid;  border-top-left-radius: 12px; }
.hkb-canto-sd{ top: 28px; right: 28px;    border-top: 2px solid;    border-right: 2px solid; border-top-right-radius: 12px; animation-delay: .5s; }
.hkb-canto-ie{ bottom: 28px; left: 28px;  border-bottom: 2px solid; border-left: 2px solid;  border-bottom-left-radius: 12px; animation-delay: 1s; }
.hkb-canto-id{ bottom: 28px; right: 28px; border-bottom: 2px solid; border-right: 2px solid; border-bottom-right-radius: 12px; animation-delay: 1.5s; }
@keyframes hkbCanto{
0%, 100%{ opacity: .28; transform: scale(1); }
50%     { opacity: 1;   transform: scale(1.12); }
}

/* ---------- Miolo ---------- */
.hkb-miolo{
position: relative;
z-index: 20;
width: 100%;
max-width: 820px;
text-align: center;
}

/* Selo */
.hkb-selo{
display: flex;
width: fit-content;
margin-left: auto;
margin-right: auto;
align-items: center;
gap: 10px;
padding: 9px 20px;
margin-bottom: 24px;
border: 1px solid rgba(248,236,217,.2);
border-radius: 40px;
background: rgba(248,236,217,.07);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: rgba(255,255,255,.88);
font-size: 12px;
font-weight: 500;
letter-spacing: 2.4px;
text-transform: uppercase;
opacity: 0;
transform: translateY(16px);
animation: hkbEntra .9s cubic-bezier(.22,.61,.36,1) forwards .2s;
}
.hkb-selo-ponto{
width: 8px; height: 8px;
border-radius: 50%;
background: var(--hkb-ouro);
flex: 0 0 auto;
animation: hkbPonto 2.2s ease-out infinite;
}
@keyframes hkbPonto{
0%  { box-shadow: 0 0 0 0 rgba(227,184,129,.8); }
70% { box-shadow: 0 0 0 14px rgba(227,184,129,0); }
100%{ box-shadow: 0 0 0 0 rgba(227,184,129,0); }
}
@keyframes hkbEntra{
to{ opacity: 1; transform: translateY(0); }
}

/* Título */
.hkb-titulo{
position: relative;
display: inline-block;
margin: 0 0 18px;
padding: 0;
font-family: "Marcellus", Georgia, "Times New Roman", serif;
font-size: clamp(34px, 5.4vw, 68px);
font-weight: 400;
line-height: 1.12;
letter-spacing: 1px;
background: linear-gradient(100deg,
            #ffffff 0%,
            var(--hkb-creme) 28%,
            var(--hkb-ouro) 50%,
            var(--hkb-creme) 72%,
            #ffffff 100%);
background-size: 260% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: hkbBrilhoTexto 6.5s ease-in-out infinite, hkbEntra 1s cubic-bezier(.22,.61,.36,1) forwards .35s;
opacity: 0;
transform: translateY(20px);
transition: letter-spacing .65s cubic-bezier(.22,.61,.36,1);
}
@keyframes hkbBrilhoTexto{
0%, 100%{ background-position: 0% center; }
50%     { background-position: 100% center; }
}
.hkb-secao:hover .hkb-titulo{ letter-spacing: 4px; }
.hkb-titulo::after{
content: "";
position: absolute;
left: 50%; bottom: -10px;
width: 0; height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, var(--hkb-ouro), transparent);
transform: translateX(-50%);
transition: width .75s cubic-bezier(.22,.61,.36,1);
}
.hkb-secao:hover .hkb-titulo::after{ width: 100%; }

/* Frase */
.hkb-frase{
max-width: 540px;
margin: 14px auto 30px;
padding: 0;
color: rgba(255,255,255,.68);
font-size: 16px;
line-height: 1.75;
opacity: 0;
transform: translateY(16px);
animation: hkbEntra .95s cubic-bezier(.22,.61,.36,1) forwards .65s;
}

/* Trilha */
.hkb-trilha-area{
opacity: 0;
transform: translateY(16px);
animation: hkbEntra .95s cubic-bezier(.22,.61,.36,1) forwards .85s;
}
.hkb-trilha{
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 12px 28px;
list-style: none;
border: 1px solid rgba(248,236,217,.22);
border-radius: 40px;
background: rgba(248,236,217,.07);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
font-size: 14px;
letter-spacing: .5px;
transition: border-color .45s ease, background .45s ease, box-shadow .45s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.hkb-trilha:hover{
border-color: rgba(227,184,129,.85);
background: rgba(248,236,217,.14);
box-shadow: 0 14px 40px rgba(227,184,129,.3);
}
.hkb-trilha li{
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
.hkb-trilha a{
position: relative;
color: rgba(255,255,255,.8);
text-decoration: none;
transition: color .3s ease;
}
.hkb-trilha a::after{
content: "";
position: absolute;
left: 0; bottom: -4px;
width: 100%; height: 1px;
background: var(--hkb-ouro);
transform: scaleX(0);
transform-origin: right;
transition: transform .35s ease;
}
.hkb-trilha a:hover{ color: var(--hkb-ouro); }
.hkb-trilha a:hover::after{ transform: scaleX(1); transform-origin: left; }
.hkb-trilha .hkb-sep{ color: rgba(255,255,255,.35); }
.hkb-trilha span{ color: var(--hkb-ouro); }

/* ---------- Responsivo ---------- */
@media (max-width: 1199px){
.hkb-secao{ margin: 0 20px 50px; }
}
@media (max-width: 991px){
.hkb-secao{
  --hkb-raio: 24px;
  min-height: 300px;
  padding: 64px 20px;
  margin: 0 16px 40px;
}
.hkb-orbe-a{ width: 250px; height: 250px; }
.hkb-orbe-b{ width: 280px; height: 280px; }
.hkb-orbe-c{ display: none; }
.hkb-faisca-2, .hkb-faisca-4, .hkb-faisca-6{ display: none; }
.hkb-canto{ width: 28px; height: 28px; }
.hkb-canto-se, .hkb-canto-sd{ top: 18px; }
.hkb-canto-ie, .hkb-canto-id{ bottom: 18px; }
.hkb-canto-se, .hkb-canto-ie{ left: 18px; }
.hkb-canto-sd, .hkb-canto-id{ right: 18px; }
}
@media (max-width: 575px){
.hkb-secao{
  --hkb-raio: 18px;
  min-height: 250px;
  padding: 52px 16px;
  margin: 0 12px 32px;
}
.hkb-selo{ font-size: 10px; letter-spacing: 1.6px; padding: 7px 15px; margin-bottom: 18px; }
.hkb-frase{ font-size: 14px; margin: 12px auto 24px; }
.hkb-textura{ background-size: 38px 38px; }
.hkb-canto{ display: none; }
}

@media (prefers-reduced-motion: reduce){
.hkb-fundo, .hkb-foto, .hkb-textura, .hkb-orbe,
.hkb-faisca, .hkb-varredura::after, .hkb-fio, .hkb-canto,
.hkb-titulo, .hkb-selo-ponto{
  animation: none !important;
}
.hkb-selo, .hkb-titulo, .hkb-frase, .hkb-trilha-area{
  opacity: 1 !important;
  transform: none !important;
}
}

/* ---------- Alinhamento ----------
 Base: acompanha .bg-section (largura total, teto de 1800px).
 A classe hkb-tema acrescenta as margens laterais do custom.css.
------------------------------------------------------------ */
@media only screen and (max-width: 1800px){
.hkb-secao.hkb-tema{
  width: calc(100% - 100px);
  max-width: 100%;
  margin-left: 50px;
  margin-right: 50px;
}
}
@media only screen and (max-width: 1560px){
.hkb-secao.hkb-tema{
  width: calc(100% - 30px);
  margin-left: 15px;
  margin-right: 15px;
}
}
@media only screen and (max-width: 991px){
.hkb-secao{
  margin: 0 0 20px;
  width: 100%;
  border-radius: 20px;
}
}
@media only screen and (max-width: 767px){
.hkb-secao{
  border-radius: 0;
}
}