/*
  Centro da Dor — Premium UI Layer
  Micro-interações, glassmorphism, sombras premium, ícones animados
  Carregado após style.css — não sobrescreve estrutura nem responsividade
*/

/* ============================================================
   TOKENS ESTENDIDOS
   ============================================================ */
:root {
  --shadow-blue-sm:  0 2px 10px rgba(74,144,255,.12);
  --shadow-blue-md:  0 8px 28px  rgba(74,144,255,.22);
  --shadow-blue-lg:  0 20px 52px rgba(74,144,255,.32);
  --shadow-green-md: 0 8px 28px  rgba(31,138,91,.28);
  --r-xl:  16px;
  --r-2xl: 24px;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */

/* Varredura brilhante nos botões */
@keyframes shimmer-sweep {
  0%   { left: -65%; opacity: 0; }
  4%   { opacity: 1; }
  100% { left: 130%;  opacity: 0; }
}

/* Micro-bounce suave nos ícones */
@keyframes icon-bob {
  0%,100% { transform: translateY(0)    rotate(0deg);  }
  30%      { transform: translateY(-4px) rotate(-6deg); }
  65%      { transform: translateY(-2px) rotate(3deg);  }
}

/* Pulso suave no CTA principal */
@keyframes cta-breathe {
  0%,100% { box-shadow: 0 4px 14px rgba(31,138,91,.30); }
  50%      { box-shadow: 0 8px 32px rgba(31,138,91,.52),
                         0 0 0 5px  rgba(31,138,91,.07); }
}

/* Pop suave ao final do contador */
@keyframes counter-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.10); }
  100% { transform: scale(1); }
}

/* Brilho suave nos números dos passos */
@keyframes num-glow {
  0%,100% { box-shadow: 0 0 0 6px rgba(74,144,255,.10),
                        0 10px 32px -6px rgba(74,144,255,.42); }
  50%      { box-shadow: 0 0 0 8px rgba(74,144,255,.14),
                        0 14px 38px -6px rgba(74,144,255,.58); }
}

/* ============================================================
   BOTÕES — SHIMMER + CTA PULSE
   ============================================================ */
.btn {
  isolation: isolate;
}
.btn::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: -65%;
  width: 38%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,.26) 50%,
    transparent 80%
  );
  transform: skewX(-10deg);
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
}
.btn:hover::after {
  animation: shimmer-sweep .6s ease-out forwards;
}

/* CTA principal da hero respira suavemente */
.hero-ctas .btn-wa {
  animation: cta-breathe 3.6s ease-in-out infinite;
}
.hero-ctas .btn-wa:hover {
  animation: none;
}

/* ============================================================
   ÍCONES — CÍRCULOS PREMIUM COM GRADIENTE
   ============================================================ */

/* Hero badge */
.hero-badge .icn {
  background: linear-gradient(145deg, var(--brand-100) 0%, rgba(74,144,255,.08) 100%);
  border: 1px solid rgba(74,144,255,.22);
  box-shadow: 0 2px 12px rgba(74,144,255,.14),
              inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.hero-badge:hover .icn {
  transform: scale(1.06) rotate(-6deg);
  box-shadow: 0 4px 20px rgba(74,144,255,.24);
}

/* Why cards (fundo escuro) */
.why-card .icn {
  background: linear-gradient(145deg, rgba(74,144,255,.20) 0%, rgba(74,144,255,.07) 100%);
  border: 1px solid rgba(74,144,255,.22);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(74,144,255,.10);
  transition: transform .35s var(--ease-out),
              background .35s var(--ease-out),
              box-shadow .35s var(--ease-out);
}
.why-card:hover .icn {
  background: linear-gradient(145deg, rgba(74,144,255,.32) 0%, rgba(74,144,255,.14) 100%);
  box-shadow: 0 0 22px rgba(74,144,255,.30);
  transform: scale(1.10) rotate(-4deg);
}

/* Trust strip — micro-bounce no hover */
.trust-inner > span:not(.trust-divider) svg {
  transition: color .25s var(--ease-out), transform .3s var(--ease-out);
}
.trust-inner > span:not(.trust-divider):hover svg {
  color: var(--brand-500);
  animation: icon-bob .55s ease-in-out;
}

/* Trust strip — glow sutil no hover (sem padding que afeta layout flex) */
.trust-inner > span:not(.trust-divider) {
  cursor: default;
  transition: color .25s var(--ease-out);
}
.trust-inner > span:not(.trust-divider):hover {
  color: var(--brand-700);
}

/* Trust strip — gap responsivo para viewports médios (evita quebra de linha) */
@media (min-width: 641px) and (max-width: 1100px) {
  .trust-inner { gap: 14px; }
  .trust-divider { display: none; }
}

/* ============================================================
   CARDS — HOVER PREMIUM COM GLOW
   ============================================================ */

/* Case cards */
.case {
  transition: box-shadow .38s var(--ease-out),
              transform .38s var(--ease-out),
              border-color .38s var(--ease-out);
  border-radius: 10px;
}
.case:hover {
  box-shadow: 0 28px 60px -16px rgba(10,45,110,.22),
              0 0 0 1.5px rgba(74,144,255,.18),
              0 10px 22px -10px rgba(10,45,110,.10);
  transform: translateY(-8px);
  border-color: rgba(74,144,255,.22);
}

/* Tag badge dentro da imagem do case */
.case-img .tag {
  border: 1px solid rgba(255,255,255,.5);
  transition: background .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.case:hover .case-img .tag {
  background: rgba(255,255,255,.99);
  box-shadow: 0 4px 12px rgba(10,45,110,.12);
}

/* Why cards */
.why-card {
  border-radius: 12px;
  transition: border-color .38s var(--ease-out),
              background .38s var(--ease-out),
              transform .38s var(--ease-out),
              box-shadow .38s var(--ease-out);
}
.why-card:hover {
  border-color: rgba(74,144,255,.50);
  background: linear-gradient(145deg,
    rgba(74,144,255,.10) 0%,
    rgba(74,144,255,.03) 100%);
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px rgba(74,144,255,.22),
              0 24px 52px rgba(10,45,110,.26),
              inset 0 1px 0 rgba(255,255,255,.06);
}

/* Doctor creds — sem transform para evitar blur de texto */
.doctor-creds .item {
  background: linear-gradient(145deg, #ffffff 0%, var(--brand-050) 100%);
  transition: border-color .32s var(--ease-out),
              box-shadow .32s var(--ease-out);
}
.doctor-creds .item:hover {
  border-color: var(--brand-300);
  box-shadow: 0 8px 24px -8px rgba(74,144,255,.18),
              0 0 0 1px rgba(74,144,255,.10);
}

/* ============================================================
   GLASSMORPHISM — HERO BADGE & FLOAT PILLS
   ============================================================ */
.hero-badge {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 12px;
  box-shadow: 0 20px 64px -12px rgba(10,45,110,.28),
              inset 0 1px 0 rgba(255,255,255,.95),
              0 0 0 1px rgba(74,144,255,.04);
}

.float-pill {
  background: #ffffff;
  /* backdrop-filter removido — causa flickering durante a animação de float */
  border: 1px solid rgba(200,215,240,.60);
  box-shadow: 0 8px 28px -6px rgba(10,45,110,.20),
              0 2px 8px rgba(10,45,110,.08);
}

/* Dot verde das pills */
.float-pill .dot {
  box-shadow: 0 0 0 3px rgba(31,138,91,.18),
              0 0 0 6px rgba(31,138,91,.06);
}

/* ============================================================
   HERO PORTRAIT WRAP — pills fora do overflow:hidden do portrait
   ============================================================ */

/* Wrapper que serve de âncora para as float-pills, sem overflow hidden */
.hero-portrait-wrap {
  position: relative;
}
/* hero-floats agora referencia o wrap, pode ultrapassar a borda da foto */
.hero-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

/* ============================================================
   HERO PORTRAIT — BORDA INTERNA SUTIL
   ============================================================ */
.hero-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  pointer-events: none;
}

/* ============================================================
   STEP NUMBERS — GRADIENTE PREMIUM NO HOVER
   ============================================================ */
.step .num {
  transition: all .38s var(--ease-out);
}
.step:hover .num {
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
  color: #fff;
  border-color: transparent;
  animation: num-glow 1.8s ease-in-out infinite;
}

/* ============================================================
   COMPARE TABLE — COLUNA DESTAQUE
   ============================================================ */
.compare-row.header .col-ours {
  background: linear-gradient(145deg, var(--brand-600) 0%, var(--brand-800) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
/* Linha lateral sutil na nossa coluna */
.compare-row:not(.header) .col-ours {
  border-inline: 1px solid rgba(74,144,255,.12);
  background: linear-gradient(180deg, rgba(74,144,255,.04) 0%, transparent 100%);
}

/* ============================================================
   DOCTOR — NOME EM LINHA ÚNICA + CREDS LEGÍVEIS
   ============================================================ */

/* Nome cabe em uma linha em desktops */
.doctor-name-h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Em mobile volta ao normal */
@media (max-width: 880px) {
  .doctor-name-h2 {
    white-space: normal;
    font-size: clamp(26px, 5vw, 36px);
  }
}

/* Labels dos creds — mais visíveis */
.doctor-creds .item .lbl {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--brand-700);       /* azul no lugar do cinza */
  font-weight: 700;
  margin-bottom: 10px;
}

/* Valores — Manrope bold para máxima legibilidade */
.doctor-creds .item .val {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.2;
}

/* Subtexto dos creds — maior, mais escuro, renderização nítida */
.doctor-creds .item .val small {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-600);
  font-weight: 500;
  margin-top: 5px;
  letter-spacing: 0;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   CONTACT INFO — HOVER COM GLOW
   ============================================================ */
.info-item .icn {
  border: 1px solid rgba(255,255,255,.10);
  transition: background .32s var(--ease-out),
              transform .32s var(--ease-out),
              box-shadow .32s var(--ease-out);
}
.info-item a:hover .icn {
  background: rgba(74,144,255,.24);
  box-shadow: 0 0 20px rgba(74,144,255,.24);
  transform: scale(1.08) rotate(-5deg);
}

/* ============================================================
   FOOTER — ÍCONES PREMIUM
   ============================================================ */
.foot-card .ic-circle {
  border: 1px solid rgba(74,144,255,.10);
  transition: transform .28s var(--ease-out),
              box-shadow .28s var(--ease-out),
              background .28s var(--ease-out);
}
.foot-card li a:hover .ic-circle {
  transform: scale(1.12) rotate(-6deg);
  box-shadow: 0 4px 16px rgba(74,144,255,.22);
  background: var(--brand-100);
}
.foot-card .ic-wa   { border-color: rgba(31,138,91,.12); }
.foot-card li a:hover .ic-wa {
  background: #d8eee3;
  box-shadow: 0 4px 16px rgba(31,138,91,.22);
}
.foot-card .ic-pin  { border-color: rgba(192,71,63,.10); }
.foot-card li a:hover .ic-pin {
  background: #fae5e4;
  box-shadow: 0 4px 16px rgba(192,71,63,.18);
}

/* ============================================================
   HEADER SCROLLED — SOMBRA REFINADA
   ============================================================ */
.site-header.is-scrolled {
  box-shadow: 0 1px 0 rgba(10,45,110,.04),
              0 4px 20px -4px rgba(10,45,110,.10),
              0 14px 44px -18px rgba(10,45,110,.12);
}

/* ============================================================
   NAV LINKS — UNDERLINE COM GRADIENTE
   ============================================================ */
.nav-links a::after {
  background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
  height: 2px;
  border-radius: 999px;
}

/* ============================================================
   HERO EYEBROW LINE — ANIMAÇÃO HOVER
   ============================================================ */
.section-eyebrow::before,
.section-eyebrow::after {
  transition: width .4s var(--ease-out);
}
.section-head:hover .section-eyebrow::before,
.section-head:hover .section-eyebrow::after {
  width: 40px;
}

/* ============================================================
   CONTADOR — POP AO TERMINAR
   ============================================================ */
.is-counted {
  display: inline-block;
  animation: counter-pop .45s var(--ease-out);
}

/* ============================================================
   QUOTE SECTION — SOMBRA DE TEXTO
   ============================================================ */
.quote-body {
  text-shadow: 0 2px 24px rgba(0,0,0,.10);
}

/* ============================================================
   MAP PIN — PULSE DUPLO
   ============================================================ */
.map-pin .dot::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: rgba(74,144,255,.06);
  animation: pin-pulse 2.2s ease-in-out infinite .6s;
}

/* ============================================================
   WILL-CHANGE — PERFORMANCE GPU
   ============================================================ */
.case,
.why-card,
.step .num,
.hero-badge,
.info-item .icn,
.foot-card .ic-circle {
  will-change: transform;
}
/* float-pill usa GPU via animation, will-change separado evita conflito */
.float-pill {
  transform: translateZ(0);
}

/* Doctor creds sem will-change — evita blur de texto por GPU layer */
.doctor-creds .item {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}