/* ============================================================
   Consultorio Adriana Pediatra — Estilos globales
   Tailwind cubre el grueso del diseño; aquí solo lo que
   Tailwind no resuelve de forma cómoda.
   ============================================================ */

/* ---- Variables de marca (referencia rápida) ---- */
:root {
  --clinic: #4A90C2;
  --mint:   #6FC9B0;
  --coral:  #F4798A;
  --teal:   #1FB5A8;
  --ink:    #33414E;
}

/* ---- Base ---- */
html {
  scroll-behavior: smooth;
  /* Compensa la altura del header fijo al saltar a una sección */
  scroll-padding-top: 5rem;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* ---- Scrollbar discreta (escritorio) ---- */
@media (min-width: 768px) {
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: var(--clinic-light, #EAF4FB); }
  ::-webkit-scrollbar-thumb {
    background: #c3d9e8;
    border-radius: 9999px;
  }
  ::-webkit-scrollbar-thumb:hover { background: #a9c6dc; }
}

/* ---- Accesibilidad: respeta usuarios que reducen movimiento ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Utilidades propias (se irán usando en fases siguientes) ---- */

/* Aparición suave al hacer scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}