/*
  Dr. Bautista — Prototipo de validación
  Estilos complementarios a Tailwind CSS (CDN).
  TODO (producción): este archivo debe fusionarse con la configuración
  compilada de Tailwind (CLI/PostCSS) en la versión final de WordPress/Elementor.
*/

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
}

/* Texto con degradado para titulares de alto impacto */
.text-gradient {
  background: linear-gradient(90deg, #0f3d54 0%, #14b8a6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Placeholder de imagen estilizado (blog, portadas de eBooks, avatar 3D, etc.) */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: repeating-linear-gradient(
    45deg,
    #e2e8f0,
    #e2e8f0 10px,
    #eef2f6 10px,
    #eef2f6 20px
  );
  color: #64748b;
}
.dark .img-placeholder {
  background-image: repeating-linear-gradient(
    45deg,
    #1e293b,
    #1e293b 10px,
    #273449 10px,
    #273449 20px
  );
  color: #94a3b8;
}

/* Tarjeta de testimonio placeholder — patrón diagonal para distinguirla
   visualmente de contenido real y evitar confusión con un testimonio auténtico */
.testimonial-placeholder {
  background-image: repeating-linear-gradient(
    135deg,
    #f8fafc,
    #f8fafc 12px,
    #f1f5f9 12px,
    #f1f5f9 24px
  );
}
.dark .testimonial-placeholder {
  background-image: repeating-linear-gradient(
    135deg,
    #1e293b,
    #1e293b 12px,
    #1a2333 12px,
    #1a2333 24px
  );
}

/* Scroll suave para anclas internas con offset por header sticky */
:target {
  scroll-margin-top: 6rem;
}

/* Utilidad simple de recorte de texto (fallback si el plugin line-clamp de Tailwind no carga desde el CDN) */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Botón flotante de WhatsApp — pequeña animación de pulso para llamar la atención sin ser intrusiva */
@keyframes pulse-whatsapp {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
  50% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
}
.whatsapp-float {
  animation: pulse-whatsapp 2.5s infinite;
}

/* ── Animaciones al hacer scroll ──────────────────────────────────────────
   Fade-in + slide-up sutil. El JS (Intersection Observer) agrega .is-visible
   cuando la sección entra en el viewport. Si prefers-reduced-motion está
   activo, el JS salta directo a .is-visible sin animar. */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Retrasos escalonados para animaciones "en cascada" (ej. stepper B2B) */
.reveal-delay-1 { transition-delay: 0.05s; }
.reveal-delay-2 { transition-delay: 0.18s; }
.reveal-delay-3 { transition-delay: 0.31s; }
.reveal-delay-4 { transition-delay: 0.44s; }

/* ── Pasos numerados (hover) ──────────────────────────────────────────────
   Transición suave para el efecto de acercamiento/atenuación que aplica main.js. */
[data-step] {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ── Cursor personalizado ─────────────────────────────────────────────────
   Usa una versión redimensionada a 32×32 del logo original (512×512 —
   demasiado grande para funcionar como cursor de navegador). Se aplica a
   nivel global; los campos de texto conservan el cursor de texto nativo
   para no afectar la usabilidad al escribir. */
body.custom-cursor,
body.custom-cursor a,
body.custom-cursor button {
  cursor: url('../fotos_dr_bautista/logo-mouse-cursor-32.png') 4 4, auto;
}
body.custom-cursor input,
body.custom-cursor textarea,
body.custom-cursor select,
body.custom-cursor [contenteditable="true"] {
  cursor: text;
}