/* alPsicólogo — estilos custom encima de Tailwind CDN */

/* Suavizar transiciones globales para microinteracciones */
* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

/* Tipografía Inter ya cargada desde Google Fonts en header */
body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Prose ajustes para páginas estáticas */
.prose h2 { margin-top: 2.5rem; }
.prose p { line-height: 1.75; }
.prose ul { padding-left: 1.5rem; }
.prose a { color: #0d9488; text-decoration: underline; }
.prose a:hover { color: #0f766e; }

/* Tarjeta hover lift */
article.group { will-change: transform; }
article.group:hover { transform: translateY(-2px); }

/* Modal: scroll lock cuando está abierto */
body.modal-open { overflow: hidden; }

/* Focus visible para a11y */
:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* Animaciones suaves cuando aparece el cuestionario */
#modal-cuestionario { transition: opacity 0.2s ease; }
#cuestionario-cuerpo button[data-opt] { transition: all 0.15s ease; }
#cuestionario-cuerpo button[data-opt]:hover { transform: translateX(2px); }

/* Print-friendly perfil de psicólogo */
@media print {
  header, footer, [data-track-click], button { display: none !important; }
  body { background: white; }
  [role="dialog"], #cookie-banner { display: none !important; }
}

/* Contraste mínimo para placeholders (WCAG 1.4.3: 4.5:1) */
::placeholder { color: #64748b; opacity: 1; }  /* slate-500, ratio 4.8:1 sobre blanco */
::-webkit-input-placeholder { color: #64748b; opacity: 1; }

/* Movimiento reducido (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  article.group:hover { transform: none; }
  #cuestionario-cuerpo button[data-opt]:hover { transform: none; }
}

/* Sombra dinámica en header sticky al scrollear (mejor separación de fondo) */
header.has-scroll { box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.08); }