/* Small helpers on top of Tailwind CDN */

:root {
  --header-offset: 88px;
}

html {
  scroll-behavior: smooth;
}

/* Avoid smooth scroll for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.reveal--in {
  opacity: 1;
  transform: translateY(0);
}

/* Details marker cleanup */
summary::-webkit-details-marker {
  display: none;
}

/* Better focus visibility in some browsers */
:focus-visible {
  outline: 2px solid rgba(220, 38, 38, 0.4);
  outline-offset: 2px;
}

/* Service cards: premium accent + consistent layout */
.service-card {
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: #dc2626; /* brand-600 */
}

/* Botón Ver detalle - garantizar visibilidad */
button[data-open-service] {
  background-color: #DC2626 !important;
  color: white !important;
  border: 2px solid #DC2626 !important;
}

button[data-open-service]:hover {
  background-color: #B91C1C !important;
  border-color: #B91C1C !important;
}

/* Botón WhatsApp - garantizar texto visible (rojo) */
a[data-wa]:not([data-wa-context="Floating"]) {
  color: #DC2626 !important;
  border-color: #DC2626 !important;
}

a[data-wa]:not([data-wa-context="Floating"]):hover {
  color: #B91C1C !important;
  border-color: #B91C1C !important;
}

/* Botón flotante WhatsApp - verde característico (SOLO este) */
a[data-wa][data-wa-context="Floating"] {
  background-color: #25D366 !important;
  color: white !important;
  border-color: #25D366 !important;
}

a[data-wa][data-wa-context="Floating"]:hover {
  background-color: #128C7E !important;
  border-color: #128C7E !important;
}

/* Asegurar que los elementos rojos se vean bien */
.bg-red-600 {
  background-color: #DC2626 !important;
}

.bg-red-700 {
  background-color: #B91C1C !important;
}

.text-red-600 {
  color: #DC2626 !important;
}

.border-red-600 {
  border-color: #DC2626 !important;
}