/* /styles/polish.css — EloClinic
   Camada de melhoria de LAYOUT (carregada por último, sobrescreve o resto).
   Foco: ritmo de seções, cards com personalidade, telas emolduradas, densidade.
   Mantém a regra da marca: verde como base, vermelho só como acento.
   Tudo aqui é aditivo — pode ser ajustado/removido sem tocar nos outros CSS.
   ─────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   1. RITMO DE SEÇÕES
   Alterna fundos (branco / verde bem claro) pra acabar com a sensação
   de "branco infinito" e dar separação entre as seções.
═══════════════════════════════════════════════════════════════════ */

/* diferencial: tom verde claro */
#diferencial {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(144, 217, 176, 0.10), transparent 60%),
    var(--color-brand-50);
}

/* assistente: branco (sobrescreve o --muted, pra contrastar com o vizinho) */
#assistente.s-section--muted {
  background: var(--color-bg);
}

/* funcionalidades: tom verde claro (sobrescreve o radial sobre branco) */
#funcionalidades {
  background:
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(144, 217, 176, 0.10) 0%, transparent 50%),
    var(--color-brand-50);
}

/* Transição suave de cor entre seções claras adjacentes */
.s-section { position: relative; }

/* ═══════════════════════════════════════════════════════════════════
   2. CABEÇALHOS DE SEÇÃO — mais presença
═══════════════════════════════════════════════════════════════════ */

.s-section__header .c-h2 {
  font-size: clamp(1.75rem, 4vw, 2.625rem);
  letter-spacing: -0.025em;
}

.c-kicker {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-brand-100);
  border: 1px solid var(--color-brand-200);
}
.c-kicker--light {
  background: rgba(144, 217, 176, 0.12);
  border-color: rgba(144, 217, 176, 0.25);
}

/* Centraliza a linha de acento do h2 quando o header é centralizado */
.s-section__header h2::after { margin-left: auto; margin-right: auto; }

/* ═══════════════════════════════════════════════════════════════════
   3. MOLDURA DE NAVEGADOR nas telas do produto
   Dá ar de "janela de app": barra de título com 3 bolinhas no topo.
═══════════════════════════════════════════════════════════════════ */

.c-hero-image,
#funcionalidades .c-feature__media {
  position: relative;
}

/* Barra de título (mac-style) */
.s-hero__visual-inner::before,
#funcionalidades .c-feature__media::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  z-index: 2;
  background:
    radial-gradient(circle 4px at 18px 15px, #ff5f57 99%, transparent 0) no-repeat,
    radial-gradient(circle 4px at 36px 15px, #febc2e 99%, transparent 0) no-repeat,
    radial-gradient(circle 4px at 54px 15px, #28c840 99%, transparent 0) no-repeat,
    linear-gradient(180deg, #f8fafc, #eef2f6);
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

/* Empurra a imagem pra baixo da barra de título */
.s-hero__visual-inner { padding-top: 30px; background: #fff; }
#funcionalidades .c-feature__media { padding-top: 30px; background: #fff; }
#funcionalidades .c-feature__media img,
.s-hero__visual-inner .c-hero-image { display: block; width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════════════
   4. TELAS MAIORES em Funcionalidades (menos espaço morto)
═══════════════════════════════════════════════════════════════════ */

@media (min-width: 980px) {
  #funcionalidades .c-feature {
    grid-template-columns: minmax(0, 1fr) minmax(440px, 1.05fr);
    gap: var(--space-10);
    padding: var(--space-8);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   5. CARDS COM PERSONALIDADE (Para quem é)
   Barra de acento no topo + profundidade + lift no hover.
═══════════════════════════════════════════════════════════════════ */

.c-card--rich {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-20);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}
.c-card--rich::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-brand-500), var(--color-brand-300));
}
.c-card--rich:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(74, 158, 110, 0.18);
}
.c-card__icon {
  background: linear-gradient(135deg, var(--color-brand-100), var(--color-brand-50));
  box-shadow: 0 4px 12px rgba(74, 158, 110, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════
   6. PILARES (Diferencial / Assistente) — fora do template genérico
   Barra de acento, ícone com mais vida, hover mais perceptível.
═══════════════════════════════════════════════════════════════════ */

.c-pillar {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-20);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}
.c-pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--color-brand-500), var(--color-brand-300));
}
.c-pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(74, 158, 110, 0.18);
}
.c-pillar__icon {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, rgba(144, 217, 176, 0.45), var(--color-brand-50));
  box-shadow: 0 6px 18px rgba(74, 158, 110, 0.16);
}

/* ═══════════════════════════════════════════════════════════════════
   7. FAIXA DE SELOS — mais viva
═══════════════════════════════════════════════════════════════════ */

.c-trust-strip {
  box-shadow: 0 8px 30px rgba(74, 158, 110, 0.10);
  border-radius: var(--radius-20);
}
.c-trust-strip__item { transition: transform var(--dur-200) var(--ease-out); }
.c-trust-strip__item:hover { transform: translateY(-3px); }

/* ═══════════════════════════════════════════════════════════════════
   8. BOTÕES — brilho ao passar o mouse (microinteração)
═══════════════════════════════════════════════════════════════════ */

.c-button--primary, .c-button--cta { position: relative; overflow: hidden; }
.c-button--primary::after, .c-button--cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left var(--dur-500) var(--ease-out);
}
.c-button--primary:hover::after, .c-button--cta:hover::after { left: 130%; }

/* ═══════════════════════════════════════════════════════════════════
   9. SEGURANÇA DE MOVIMENTO
═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .c-card--rich:hover,
  .c-pillar:hover,
  .c-trust-strip__item:hover { transform: none; }
  .c-button--primary::after, .c-button--cta::after { display: none; }
}