/* ==========================================================================
   ESTILOS PERSONALIZADOS
   Complementan a Tailwind (utilidades) con detalles que Tailwind CDN
   no puede resolver por sí solo: scroll, foco accesible, microinteracciones
   y animaciones de aparición al hacer scroll.
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

@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;
    scroll-behavior: auto !important;
  }
}

body {
  background-color: rgb(var(--color-cream));
  color: rgb(var(--color-ink));
}

/* Selección de texto en tonos de marca */
::selection {
  background-color: rgb(var(--color-sage-100));
  color: rgb(var(--color-ink));
}

/* Foco accesible y visible en todos los elementos interactivos */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgb(var(--color-sage-dark));
  outline-offset: 3px;
  border-radius: 4px;
}

/* Scrollbar sutil acorde a la paleta (navegadores WebKit) */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: rgb(var(--color-sand));
}
::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-sage-light));
  border-radius: 999px;
  border: 2px solid rgb(var(--color-sand));
}

/* Sombra cálida reutilizable para tarjetas y bloques elevados */
.shadow-warm {
  box-shadow: 0 20px 45px -20px rgba(var(--color-ink), 0.25);
}

/* ---------- Animación de aparición al hacer scroll (progresiva) ----------
   Los elementos [data-reveal] son totalmente visibles sin JavaScript.
   Solo si el navegador soporta IntersectionObserver, main.js añade
   la clase .reveal-pending para animarlos al entrar en el viewport. */
[data-reveal].reveal-pending {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Botón flotante de WhatsApp: anillo de pulso suave */
.whatsapp-pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background-color: var(--color-whatsapp);
  opacity: 0.55;
  animation: whatsapp-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes whatsapp-ping {
  0% {
    transform: scale(1);
    opacity: 0.45;
  }
  75%,
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

/* Menú móvil: transición de altura/opacidad */
#mobile-menu {
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform-origin: top;
}
#mobile-menu[data-open="false"] {
  opacity: 0;
  transform: scaleY(0.96);
  pointer-events: none;
}
#mobile-menu[data-open="true"] {
  opacity: 1;
  transform: scaleY(1);
  pointer-events: auto;
}