/* ==========================================================================
   Picada Framework
   Framework CSS próprio, sem dependências, prefixo `pk-` em todas as
   classes. Tokens (variáveis) + base (reset/tipografia) + layout
   (container/seção/grid) + componentes (botão, badge, cartão, navbar,
   formulário, rodapé). Não editar — customizações do site vivem em
   clinica.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens — paleta, tipografia e espaçamento do consultório.
   -------------------------------------------------------------------------- */

:root {
  /* --- cor --- */
  --pk-blue: #678cb1; /* cor primária — CTAs, ícones, links */
  --pk-blue-tint: #8fadc7; /* hover / estados sutis */
  --pk-blue-shade: #4e7093; /* texto sobre fundo claro quando precisa de mais contraste */
  --pk-white: #ffffff;
  --pk-gray: #646464; /* texto de corpo secundário */
  --pk-navy: #24384a; /* fundo escuro / base dos painéis de vidro — próximo do azul primário */
  --pk-navy-elevated: #32506a; /* tom mais claro do navy, topo do degradê das seções escuras */

  --pk-surface: var(--pk-white);
  --pk-surface-alt: var(--pk-navy);
  --pk-gradient-section: linear-gradient(
    180deg,
    var(--pk-white) 0%,
    #eef3f7 100%
  );
  --pk-gradient-section-dark: linear-gradient(
    180deg,
    var(--pk-navy-elevated) 0%,
    var(--pk-navy) 100%
  );

  --pk-text-heading: var(--pk-navy);
  --pk-text-body: var(--pk-gray);
  --pk-text-on-dark: var(--pk-white);
  --pk-text-on-dark-muted: rgba(255, 255, 255, 0.72);

  /* --- vidro --- */
  --pk-glass-light-bg: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.55) 40%,
    rgba(255, 255, 255, 0.38) 100%
  );
  --pk-glass-light-border: rgba(255, 255, 255, 0.5);
  --pk-glass-light-border-gradient: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.15) 45%,
    rgba(103, 140, 177, 0.45)
  );
  /* Degradê alinhado (quase vertical) com o fundo da seção escura
     (--pk-gradient-section-dark, também vertical) — mantém a sensação de
     volume/vidro sem cruzar direções com o degradê de trás, que era o que
     lia como uma faixa estranha no meio do card. */
  --pk-glass-dark-bg: linear-gradient(
    170deg,
    rgba(255, 255, 255, 0.26) 0%,
    rgba(255, 255, 255, 0.12) 35%,
    rgba(255, 255, 255, 0.12) 65%,
    rgba(255, 255, 255, 0.04) 100%
  );
  --pk-glass-dark-border: rgba(255, 255, 255, 0.22);
  --pk-glass-dark-border-gradient: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.06) 45%,
    rgba(143, 173, 199, 0.4)
  );
  --pk-glass-shadow:
    0 8px 32px rgba(103, 140, 177, 0.22), 0 0 36px rgba(103, 140, 177, 0.22),
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset -1px -1px 0 rgba(103, 140, 177, 0.28);
  --pk-glass-shadow-dark:
    0 8px 32px rgba(0, 0, 0, 0.35), 0 0 32px rgba(143, 173, 199, 0.16),
    inset 1px 1px 0 rgba(255, 255, 255, 0.35),
    inset -1px -1px 0 rgba(103, 140, 177, 0.32);
  --pk-blur: 16px;

  /* --- tipografia --- */
  --pk-font-display: "Cormorant", serif;
  --pk-font-sans: "Mulish", sans-serif;

  --pk-size-display-1: clamp(2.75rem, 5vw, 4.5rem);
  --pk-size-display-2: clamp(2rem, 3.5vw, 3rem);
  --pk-size-heading-1: clamp(1.5rem, 2.2vw, 2rem);
  --pk-size-heading-2: 1.25rem;
  --pk-size-body-lg: 1.125rem;
  --pk-size-body: 1rem;
  --pk-size-small: 0.875rem;
  --pk-size-label: 0.8125rem;

  --pk-weight-display: 300;
  --pk-weight-heading: 400;
  --pk-weight-body: 300;
  --pk-weight-emphasis: 500;

  --pk-leading-display: 1.1;
  --pk-leading-heading: 1.3;
  --pk-leading-body: 1.7;

  --pk-tracking-label: 0.08em;

  /* --- espaçamento --- */
  --pk-space-1: 4px;
  --pk-space-2: 8px;
  --pk-space-3: 12px;
  --pk-space-4: 16px;
  --pk-space-5: 24px;
  --pk-space-6: 32px;
  --pk-space-7: 48px;
  --pk-space-8: 64px;
  --pk-space-9: 96px;
  --pk-space-10: 128px;

  --pk-radius-sm: 8px;
  --pk-radius-md: 16px;
  --pk-radius-lg: 24px;
  --pk-radius-pill: 999px;

  --pk-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --pk-duration-fast: 150ms;
  --pk-duration-base: 280ms;

  --pk-container-max: 1200px;
}

/* --------------------------------------------------------------------------
   Base — reset mínimo + tipografia. Aplicar as classes .pk-display-1 etc a
   qualquer elemento (h1, h2, p, div) — não dependem da tag.
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--pk-surface);
  color: var(--pk-text-body);
  font-family: var(--pk-font-sans);
  font-weight: var(--pk-weight-body);
  font-size: var(--pk-size-body);
  line-height: var(--pk-leading-body);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto; /* preserva a proporção dos atributos width/height do <img> */
  display: block;
}

a {
  color: var(--pk-blue);
  text-decoration: none;
  transition: color var(--pk-duration-fast) var(--pk-ease);
}
a:hover {
  color: var(--pk-blue-shade);
}

ul.pk-list-plain {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- tipografia --- */

.pk-display-1 {
  font-family: var(--pk-font-display);
  font-weight: var(--pk-weight-display);
  font-size: var(--pk-size-display-1);
  line-height: var(--pk-leading-display);
  color: var(--pk-text-heading);
  margin: 0;
}
.pk-display-2 {
  font-family: var(--pk-font-display);
  font-weight: var(--pk-weight-display);
  font-size: var(--pk-size-display-2);
  line-height: var(--pk-leading-display);
  color: var(--pk-text-heading);
  margin: 0;
}
.pk-heading-1 {
  font-family: var(--pk-font-sans);
  font-weight: var(--pk-weight-heading);
  font-size: var(--pk-size-heading-1);
  line-height: var(--pk-leading-heading);
  color: var(--pk-text-heading);
  margin: 0;
}
.pk-heading-2 {
  font-family: var(--pk-font-sans);
  font-weight: var(--pk-weight-heading);
  font-size: var(--pk-size-heading-2);
  line-height: var(--pk-leading-heading);
  color: var(--pk-text-heading);
  margin: 0;
}
.pk-body-lg {
  font-family: var(--pk-font-sans);
  font-weight: var(--pk-weight-body);
  font-size: var(--pk-size-body-lg);
  line-height: var(--pk-leading-body);
  margin: 0;
}
.pk-body {
  font-family: var(--pk-font-sans);
  font-weight: var(--pk-weight-body);
  font-size: var(--pk-size-body);
  line-height: var(--pk-leading-body);
  margin: 0;
}
.pk-small {
  font-family: var(--pk-font-sans);
  font-weight: var(--pk-weight-body);
  font-size: var(--pk-size-small);
  line-height: var(--pk-leading-body);
  margin: 0;
}
.pk-label {
  font-family: var(--pk-font-sans);
  font-weight: var(--pk-weight-emphasis);
  font-size: var(--pk-size-label);
  letter-spacing: var(--pk-tracking-label);
  text-transform: uppercase;
  margin: 0;
}

.pk-text-muted {
  color: var(--pk-text-body);
}
.pk-text-on-dark {
  color: var(--pk-text-on-dark);
}
.pk-text-on-dark-muted {
  color: var(--pk-text-on-dark-muted);
}
.pk-text-center {
  text-align: center;
}

/* --------------------------------------------------------------------------
   Layout — container, seções e grid. Seções alternam no máximo entre
   claro, gradiente e navy — não introduzir outros fundos de seção.
   -------------------------------------------------------------------------- */

.pk-container {
  max-width: var(--pk-container-max);
  margin: 0 auto;
  padding: 0 var(--pk-space-8);
}
@media (max-width: 900px) {
  .pk-container {
    padding: 0 var(--pk-space-5);
  }
}

.pk-section {
  position: relative;
  padding: var(--pk-space-9) 0;
  background: var(--pk-gradient-section);
  --pk-section-bleed: var(--pk-white);
}
.pk-section--tight {
  padding: var(--pk-space-7) 0;
}
.pk-section--gradient {
  background: var(--pk-gradient-section);
}
.pk-section--dark {
  background: var(--pk-gradient-section-dark);
  color: var(--pk-text-on-dark-muted);
  --pk-section-bleed: var(--pk-navy-elevated);
}
.pk-section--dark .pk-display-2,
.pk-section--dark .pk-display-1,
.pk-section--dark .pk-heading-1,
.pk-section--dark .pk-heading-2 {
  color: var(--pk-text-on-dark);
}

/* Transição suave entre seções: cada seção esmaece a própria cor de cima
   para baixo, "vazando" um pouco sobre o rodapé da seção anterior — em vez
   de um corte seco na fronteira entre as duas. */
.pk-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  transform: translateY(-100%);
  background: linear-gradient(to bottom, transparent, var(--pk-section-bleed));
  pointer-events: none;
}

@media (max-width: 900px) {
  .pk-section {
    padding: var(--pk-space-8) 0;
  }
  .pk-section--tight {
    padding: var(--pk-space-6) 0;
  }
}

.pk-grid {
  display: grid;
  gap: var(--pk-space-5);
}
.pk-grid > * {
  /* sem isso, um item com conteúdo largo (ex: imagem com max-width fixo)
     recusa encolher abaixo do próprio conteúdo e estoura a coluna 1fr,
     desalinhando a grade inteira para a direita. */
  min-width: 0;
}
.pk-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.pk-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.pk-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
  .pk-grid--3,
  .pk-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .pk-grid--2,
  .pk-grid--3,
  .pk-grid--4 {
    grid-template-columns: 1fr;
  }
}

.pk-flex {
  display: flex;
  gap: var(--pk-space-3);
}
.pk-flex--wrap {
  flex-wrap: wrap;
}
.pk-flex--center {
  align-items: center;
}
.pk-flex--between {
  justify-content: space-between;
}
.pk-flex--col {
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   Componentes — botão, badge, cartão de vidro, navbar, campo de formulário,
   placeholder de imagem e rodapé.
   -------------------------------------------------------------------------- */

/* --- Botão --- */
.pk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pk-space-2);
  padding: 14px 28px;
  border-radius: var(--pk-radius-pill);
  border: 1px solid transparent;
  font-family: var(--pk-font-sans);
  font-weight: var(--pk-weight-emphasis);
  font-size: var(--pk-size-body);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--pk-duration-fast) var(--pk-ease),
    color var(--pk-duration-fast) var(--pk-ease),
    border-color var(--pk-duration-fast) var(--pk-ease),
    opacity var(--pk-duration-fast) var(--pk-ease);
}
.pk-btn--primary {
  background: var(--pk-blue);
  color: var(--pk-white);
}
.pk-btn--primary:hover {
  background: var(--pk-blue-tint);
}

.pk-btn--ghost {
  background: transparent;
  color: var(--pk-blue);
  border-color: var(--pk-blue);
}
.pk-btn--ghost:hover {
  background: rgba(103, 140, 177, 0.08);
}

.pk-btn--glass {
  background: var(--pk-glass-light-bg);
  backdrop-filter: blur(var(--pk-blur));
  -webkit-backdrop-filter: blur(var(--pk-blur));
  border-color: var(--pk-glass-light-border);
  color: var(--pk-blue-shade);
}
.pk-btn--glass:hover {
  background: rgba(255, 255, 255, 0.75);
}

.pk-btn--glass-dark {
  background: var(--pk-glass-dark-bg);
  backdrop-filter: blur(var(--pk-blur));
  -webkit-backdrop-filter: blur(var(--pk-blur));
  border-color: var(--pk-glass-dark-border);
  color: var(--pk-white);
}
.pk-btn--glass-dark:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* --- Badge --- */
.pk-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: var(--pk-radius-pill);
  font-family: var(--pk-font-sans);
  font-weight: var(--pk-weight-emphasis);
  font-size: var(--pk-size-label);
  letter-spacing: var(--pk-tracking-label);
  background: var(--pk-blue);
  color: var(--pk-white);
}
.pk-badge--outline {
  background: transparent;
  color: var(--pk-blue-shade);
  border: 1px solid var(--pk-blue-tint);
}

/* --- Cartão de vidro --- */
.pk-card {
  border-radius: var(--pk-radius-lg);
  padding: var(--pk-space-6);
}
.pk-card--glass-light {
  background:
    var(--pk-glass-light-bg) padding-box,
    var(--pk-glass-light-border-gradient) border-box;
  border: 1px solid transparent;
  backdrop-filter: blur(var(--pk-blur));
  -webkit-backdrop-filter: blur(var(--pk-blur));
  box-shadow: var(--pk-glass-shadow);
}
.pk-card--glass-dark {
  background:
    var(--pk-glass-dark-bg) padding-box,
    var(--pk-glass-dark-border-gradient) border-box;
  border: 1px solid transparent;
  backdrop-filter: blur(var(--pk-blur));
  -webkit-backdrop-filter: blur(var(--pk-blur));
  box-shadow: var(--pk-glass-shadow-dark);
}
.pk-card--flat {
  background: var(--pk-white);
  border: 1px solid #eaeff3;
}

/* marcador de ícone de traço fino usado nos cards de serviço */
.pk-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--pk-blue);
}

/* --- Placeholder de imagem --- */
.pk-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e4ecf2, #eef3f7);
  color: var(--pk-blue-shade);
  font-family: var(--pk-font-sans);
  font-size: var(--pk-size-small);
  text-align: center;
  overflow: hidden;
}
.pk-placeholder--rounded {
  border-radius: var(--pk-radius-md);
}
.pk-placeholder--circle {
  border-radius: 50%;
}

/* --- Campo de formulário --- */
.pk-field {
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-2);
}
.pk-field__label {
  font-family: var(--pk-font-sans);
  font-weight: var(--pk-weight-emphasis);
  font-size: var(--pk-size-label);
  letter-spacing: var(--pk-tracking-label);
  color: var(--pk-text-heading);
}
.pk-input,
.pk-textarea {
  font-family: var(--pk-font-sans);
  font-size: var(--pk-size-body);
  font-weight: var(--pk-weight-body);
  color: var(--pk-text-heading);
  padding: 13px 18px;
  border-radius: var(--pk-radius-sm);
  border: 1px solid var(--pk-glass-light-border);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(var(--pk-blur));
  -webkit-backdrop-filter: blur(var(--pk-blur));
  outline: none;
  transition: border-color var(--pk-duration-fast) var(--pk-ease);
}
.pk-input::placeholder,
.pk-textarea::placeholder {
  color: rgba(100, 100, 100, 0.55);
}
.pk-input:focus,
.pk-textarea:focus {
  border-color: var(--pk-blue);
}
.pk-textarea {
  resize: vertical;
  min-height: 120px;
}

/* --- Navbar --- */
.pk-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--pk-glass-light-bg);
  backdrop-filter: blur(var(--pk-blur));
  -webkit-backdrop-filter: blur(var(--pk-blur));
  border-bottom: 1px solid var(--pk-glass-light-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  transition: box-shadow var(--pk-duration-base) var(--pk-ease);
}
.pk-navbar.is-scrolled {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 8px 24px rgba(26, 39, 51, 0.12);
}
.pk-navbar__inner {
  max-width: var(--pk-container-max);
  margin: 0 auto;
  padding: var(--pk-space-4) var(--pk-space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pk-navbar__logo {
  font-family: var(--pk-font-display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--pk-text-heading);
}
.pk-navbar__links {
  display: flex;
  align-items: center;
  gap: var(--pk-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pk-navbar__link {
  font-family: var(--pk-font-sans);
  font-weight: var(--pk-weight-emphasis);
  font-size: var(--pk-size-small);
  color: var(--pk-text-heading);
}
.pk-navbar__link:hover {
  color: var(--pk-blue);
}
.pk-navbar__toggle {
  display: none;
}

@media (max-width: 860px) {
  .pk-navbar__links {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pk-space-4);
    padding: var(--pk-space-5) var(--pk-space-5) var(--pk-space-6);
    background: var(--pk-glass-light-bg);
    backdrop-filter: blur(var(--pk-blur));
    -webkit-backdrop-filter: blur(var(--pk-blur));
    border-bottom: 1px solid var(--pk-glass-light-border);
    display: none;
  }
  .pk-navbar__links.is-open {
    display: flex;
  }
  .pk-navbar__toggle {
    display: inline-flex;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
  }
  .pk-navbar__toggle span {
    height: 2px;
    background: var(--pk-text-heading);
    border-radius: 2px;
  }
}

/* --- Rodapé --- */
.pk-footer {
  background: var(--pk-navy);
  color: var(--pk-text-on-dark-muted);
  text-align: center;
  padding: var(--pk-space-6) var(--pk-space-5);
  font-family: var(--pk-font-sans);
  font-size: var(--pk-size-small);
}