/* ==========================================================================
   ESTILOS GLOBAIS & ACESSIBILIDADE - SITE OFTALMOLOGIA
   ========================================================================== */

:root {
  --base-font-size: 16px;
  --color-primary: #0284c7;
  --color-primary-dark: #0369a1;
  --color-secondary: #0d9488;
  --color-bg-light: #f8fafc;
  --color-text-main: #1e293b;
  --color-text-muted: #64748b;
}

html {
  font-size: var(--base-font-size);
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  color: var(--color-text-main);
  background-color: #ffffff;
}

/* Modos de Escala de Fonte para Acessibilidade */
html.font-sm {
  --base-font-size: 14px;
}
html.font-md {
  --base-font-size: 16px;
}
html.font-lg {
  --base-font-size: 18px;
}
html.font-xl {
  --base-font-size: 20px;
}

/* ==========================================================================
   MODO DE ALTO CONTRASTE (Para baixa visão / conformidade de acessibilidade)
   ========================================================================== */
body.high-contrast {
  background-color: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast * {
  border-color: #ffffff !important;
}

body.high-contrast .bg-white,
body.high-contrast .bg-slate-50,
body.high-contrast .bg-slate-100,
body.high-contrast .bg-sky-50,
body.high-contrast .bg-cyan-50,
body.high-contrast .bg-teal-50,
body.high-contrast nav,
body.high-contrast header,
body.high-contrast footer,
body.high-contrast .card {
  background-color: #0d0d0d !important;
  color: #ffffff !important;
}

body.high-contrast a,
body.high-contrast button {
  color: #facc15 !important; /* Amarelo ouro de alto contraste */
}

body.high-contrast .btn-primary,
body.high-contrast button[type="submit"] {
  background-color: #facc15 !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

body.high-contrast p,
body.high-contrast span,
body.high-contrast li {
  color: #f1f5f9 !important;
}

body.high-contrast .text-sky-600,
body.high-contrast .text-sky-700,
body.high-contrast .text-teal-600,
body.high-contrast .text-slate-600,
body.high-contrast .text-slate-500 {
  color: #38bdf8 !important;
}

/* ==========================================================================
   SIMULADOR DE VISÃO - EFEITOS ÓPTICOS
   ========================================================================== */
.simulator-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  background: #000;
  min-height: 380px;
}

.simulator-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.4s ease, transform 0.4s ease;
  display: block;
}

/* Efeito de Catarata: opacidade leitosa, saturação amarelada, perda de contraste e nitidez */
.effect-cataract {
  filter: blur(5px) sepia(0.35) contrast(0.65) brightness(0.95);
}

/* Efeito de Glaucoma: visão tubular (mancha preta nas bordas / perda de campo periférico) */
.simulator-overlay-glaucoma {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 18%, rgba(0,0,0,0.85) 55%, #000000 85%);
  transition: opacity 0.4s ease;
}

/* Efeito de DMRI (Degeneração Macular): mancha escura e distorção no centro */
.simulator-overlay-macular {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(10, 10, 10, 0.95) 0%, rgba(20, 20, 20, 0.75) 25%, transparent 60%);
  transition: opacity 0.4s ease;
}

/* Efeito de Miopia: desfoque de profundidade */
.effect-myopia-low {
  filter: blur(3px);
}
.effect-myopia-high {
  filter: blur(8px);
}

/* Efeito de Astigmatismo: leve desfoque anisotrópico e sombra dupla */
.effect-astigmatism {
  filter: blur(2.5px);
  text-shadow: 2px 0 3px rgba(0,0,0,0.4);
  transform: scaleX(1.02);
}

/* Efeito de Olho Seco: perda sutil de nitidez com irritação e reflexos espalhados */
.effect-dry-eye {
  filter: contrast(0.85) brightness(1.1) blur(1.5px);
}

/* ==========================================================================
   BOTÃO FLUTUANTE WHATSAPP & VOLTAR AO TOPO
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
  transition: all 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

.back-to-top {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   ANIMAÇÕES E COMPONENTES MODERNOS
   ========================================================================== */
.badge-cfm {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  background-color: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

/* Transições suaves para modais e accordions */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out;
}

.faq-content.open {
  max-height: 400px;
}

/* Imagens em formato hero com corte sutil */
.hero-gradient {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.05) 0%, rgba(13, 148, 136, 0.08) 100%);
}