/* ============================================================
   Estilos propios de ELA (El Llamado del Agua)
   Se cargan DESPUÉS de las librerías CDN (Tailwind/DaisyUI/FontAwesome)
   para poder sobreescribir variables y componentes puntuales.
   ============================================================ */

:root {
  --primary-color: #0b3d5c;
  --accent-color: #1c8fd6;
  --accent-hover: #1678b3;
  --accent-soft: #e5f2fb;
  --background-color: #ffffff;
  --surface-color: #f5f8fa;
  --text-color: #17202a;
  --text-muted: #5b6b76;
  --border-color: #e2e8ef;
  --error-color: #d64545;
  --radius-xl: 1.25rem;
  --shadow-card: 0 10px 30px rgba(11, 61, 92, 0.08);
  --shadow-soft: 0 6px 18px rgba(11, 61, 92, 0.06);
  --font-heading: 'Merriweather', serif;
  --font-body: 'Inter', sans-serif;
}

/* Animación de aparición al hacer scroll (ver js/ui/reveal.js) */
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-up { transform: translateY(24px); }
.reveal-left { transform: translateX(-24px); }
.reveal-right { transform: translateX(24px); }
.reveal-scale { transform: scale(0.96); }

.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

.animate-fade-up {
  animation: fadeUp 0.7s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.floating {
  animation: floaty 4s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.hero-band {
  background: linear-gradient(180deg, var(--accent-soft) 0%, #ffffff 70%);
}

.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
}

.lead-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.climate-service-card {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  background: #ffffff;
}

.climate-service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  border-radius: 0.9rem;
  background: var(--accent-soft);
  color: var(--accent-color);
}

.service-card {
  padding: 1.25rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  background: #ffffff;
}

.service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 0.9rem;
  background: var(--accent-soft);
  color: var(--accent-color);
}

.trust-pill {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.review-card {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-xl);
  background: #ffffff;
}

.contact-tile {
  display: flex;
  gap: 0.85rem;
  padding: 1rem;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.06);
}
.contact-tile h3 {
  font-weight: 800;
  font-size: 0.95rem;
}
.contact-tile p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.25rem;
}

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

[x-cloak] { display: none !important; }