/* =========================================================
   Design Tokens — Dr. Daniel Fortes
   Baseado em /ui-guide/guia-ui-webdesign-daniel-fortes.md
   ========================================================= */

:root {
  /* Paleta oficial 60/30/10 */
  --color-base: #f2f2f2;
  --color-structure: #212121;
  --color-accent: #1f353a;

  /* Cores funcionais */
  --color-surface-dark: #1a1a1a;
  --color-surface-mid: #2e2e2e;
  --color-accent-hover: #2a4650;
  --color-accent-active: #162830;
  --color-accent-light: rgba(31, 53, 58, 0.10);
  --color-border: #e0e0e0;
  --color-text-primary: #212121;
  --color-text-secondary: #5a5a5a;
  --color-text-inverse: #f2f2f2;
  --color-success: #2d6a4f;
  --color-error: #b91c1c;

  /* Tipografia */
  --font-display: 'Brandon Grotesque', 'Gill Sans', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  /* Alias retrocompatível */
  --font-sans: var(--font-body);
}

/* Reset tipográfico */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background-color: var(--color-base);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Escala tipográfica
   Brandon Grotesque → títulos e labels (uppercase com variações de peso)
   Archivo           → corpo de texto */
.t-hero   { font-family: var(--font-display); font-size: clamp(2.5rem, 2.6vw + 0.5rem, 3.4rem); line-height: 1.05; font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase; }
.t-h1     { font-family: var(--font-display); font-size: clamp(1.875rem, 2.4vw + 1rem, 2.75rem); line-height: 1.12; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.t-h2     { font-family: var(--font-display); font-size: clamp(1.5rem, 1.4vw + 1rem, 2rem);     line-height: 1.18; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.t-h3     { font-family: var(--font-display); font-size: 1.275rem; line-height: 1.3;  font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
.t-label  { font-family: var(--font-display); font-size: 0.6875rem; line-height: 1.2; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }

.t-body-lg{ font-size: 1.0625rem; line-height: 1.4;  font-weight: 400; }
.t-body   { font-size: 1rem;      line-height: 1.3; font-weight: 400; }
.t-small  { font-size: 0.875rem;  line-height: 1.55; font-weight: 400; }
.t-micro  { font-size: 0.75rem;   line-height: 1.45; font-weight: 400; }

/* Êncora visual: frase curta em uppercase com peso variado para destacar dentro do corpo */
.emph        { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.emph-light  { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 300; }

/* Destaque interno de títulos: palavras-chave em peso 700 + cor verde-acento.
   Aplicado dentro de .t-hero, .t-h1, .t-h2 — mantém família display e uppercase herdados do título. */
.title-emph  { font-weight: 700; color: var(--color-accent); }

/* Marca decorativa de seção
   Triângulo pequeno em verde-acento — deriva da geometria triangular do logo.
   Substitui o traço horizontal clássico para diferenciar de outras marcas médicas
   que usam hairlines (luxo silencioso, mas com identidade própria). */
.accent-line {
  display: block;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 11px solid var(--color-accent);
  margin-bottom: 1.5rem;
}

/* Marcador de item: barrinha vertical fina em vez de horizontal */
.bullet-mark {
  display: inline-block;
  width: 2px;
  height: 14px;
  background-color: var(--color-accent);
  flex-shrink: 0;
}

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 1rem 1.875rem;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-accent);
}
.btn-primary:hover  { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn-primary:active { background-color: var(--color-accent-active); }

.btn-secondary {
  background-color: transparent;
  color: var(--color-structure);
  border: 1px solid var(--color-structure);
  padding: calc(1rem - 2px) calc(2rem - 2px);
}
.btn-secondary:hover { background-color: rgba(33, 33, 33, 0.06); }

.btn-ghost {
  background-color: transparent;
  color: var(--color-text-inverse);
  border: 1px solid rgba(242, 242, 242, 0.4);
  padding: calc(1rem - 2px) calc(2rem - 2px);
}
.btn-ghost:hover { background-color: rgba(242, 242, 242, 0.08); }

.btn-sm { padding: 0.625rem 1.125rem; font-size: 0.75rem; letter-spacing: 0.1em; }
.btn-sm.btn-secondary, .btn-sm.btn-ghost { padding: calc(0.625rem - 1px) calc(1.125rem - 1px); }

/* Navbar */
.nav {
  position: fixed; inset: 0 0 auto 0;
  height: 72px;
  z-index: 50;
  display: flex; align-items: center;
  transition: background-color 300ms ease, backdrop-filter 300ms ease, height 300ms ease, box-shadow 300ms ease, color 200ms ease;
  background-color: transparent;
  color: var(--color-structure);
}
.nav.is-scrolled {
  background-color: var(--color-surface-dark);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--color-text-inverse);
}
.nav-link {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: currentColor;
  transition: color 150ms ease, opacity 150ms ease;
}
.nav-link:hover { color: var(--color-accent); }
.nav.is-scrolled .nav-link:hover { color: #b9d2d8; }

/* Logo: por padrão (hero clara) mostra versão escura; ao rolar para fundo escuro, troca para clara */
.nav-logo-dark  { display: block; }
.nav-logo-light { display: none; }
.nav.is-scrolled .nav-logo-dark  { display: none; }
.nav.is-scrolled .nav-logo-light { display: block; }



/* Cards de especialidade */
.card {
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 2rem;
  transition: box-shadow 250ms ease, border-color 250ms ease, transform 250ms ease;
}
.card:hover {
  box-shadow: 0 4px 20px rgba(31, 53, 58, 0.08);
  border-color: rgba(31, 53, 58, 0.4);
}

/* Variante destacada (card largo da seção Especialidades) */
.card--featured {
  background-color: rgba(31, 53, 58, 0.05);
  border-color: rgba(31, 53, 58, 0.22);
}
.card--featured:hover {
  background-color: rgba(31, 53, 58, 0.07);
  border-color: rgba(31, 53, 58, 0.45);
}

/* CTA em texto com seta (elegante, inline em cards) */
.cta-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  text-decoration: none;
  transition: color 250ms ease;
}
.cta-arrow:hover { color: var(--color-accent-hover); }
.cta-arrow svg {
  transition: transform 280ms ease;
}
.cta-arrow:hover svg { transform: translateX(4px); }

/* \u00cdcone das especialidades \u2014 moldura quadrada angular, traço fino, cor de acento */
.spec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(31, 53, 58, 0.25);
  border-radius: 2px;
  color: var(--color-accent);
  background-color: rgba(31, 53, 58, 0.04);
  transition: border-color 250ms ease, background-color 250ms ease;
}
.card:hover .spec-icon {
  border-color: rgba(31, 53, 58, 0.55);
  background-color: rgba(31, 53, 58, 0.08);
}
.spec-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Cards flutuantes (formação sobreposta à foto do Sobre) */
.float-card {
  position: relative;
  z-index: 1;
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  padding: 0.875rem 1rem;
  border-radius: 6px;
  transition:
    transform 420ms ease-out,
    background-color 800ms ease-out,
    box-shadow 420ms ease-out;
}
.float-card:hover {
  z-index: 2;
  transform: scale(1.04);
  background-color: #25434a;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.20);
}
@media (min-width: 1024px) {
  .float-card {
    background-color: rgba(31, 53, 58, 0.72);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
  }
  .float-card:hover {
    background-color: rgba(31, 53, 58, 0.88);
  }
}
@media (prefers-reduced-motion: reduce) {
  .float-card { transition: background-color 200ms ease; }
  .float-card:hover { transform: none; }
}

/* Inputs */
.field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-structure);
  margin-bottom: 6px;
}
.field-input, .field-select {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 14px 16px;
  font: 400 1rem var(--font-sans);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color 150ms ease;
}
.field-input::placeholder { color: rgba(90, 90, 90, 0.6); }
.field-input:focus, .field-select:focus { border-color: var(--color-accent); }
.field-input.is-error, .field-select.is-error { border-color: var(--color-error); }
.field-error {
  display: none;
  font-size: 0.75rem;
  color: var(--color-error);
  margin-top: 6px;
}
.field-error.is-visible { display: block; }
.field-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%231f353a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0 0 0 auto;
  width: min(85vw, 320px);
  background-color: var(--color-surface-dark);
  color: var(--color-text-inverse);
  transform: translateX(100%);
  transition: transform 300ms ease;
  z-index: 60;
  padding: 5rem 2rem 2rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.drawer.is-open { transform: translateX(0); }
.drawer a { color: var(--color-text-inverse); font-size: 1rem; font-weight: 500; letter-spacing: 0.05em; }
.drawer a:hover { color: #b9d2d8; }
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 300ms ease;
  z-index: 55;
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Footer */
.footer-inner {
  text-align: left;
}
.footer-logo {
  display: block;
  width: min(240px, 72vw);
  height: auto;
  margin-left: 0;
  margin-right: auto;
}
.footer-legal {
  display: grid;
  gap: 1rem;
  max-width: 100%;
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.footer-legal-text {
  color: rgba(242, 242, 242, 0.5);
}
.footer-credit {
  display: block;
}
@media (min-width: 1024px) {
  .footer-inner {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: center;
    gap: 4rem;
  }
  .footer-legal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 4rem;
    margin-top: 0;
    text-align: left;
  }
  .footer-legal-text:last-child {
    text-align: right;
  }
  .footer-credit {
    display: inline;
  }
  .footer-credit::before {
    content: " \00b7  ";
  }
}

/* Links de contato na seção Sobre */
.about-contact-link {
  color: var(--color-accent);
  opacity: 0.85;
  transition: color 150ms ease, opacity 150ms ease;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.about-contact-link:hover { color: var(--color-accent-hover); opacity: 1; }

/* Acessibilidade — skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-accent); color: #fff;
  padding: 0.75rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0; }

/* Foco visível geral */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}