/* Estilos custom complementarios a Tailwind */

:root {
  --azul-solar: #0284C7;
  --azul-profundo: #0F172A;
  --amarillo-sol: #F59E0B;
  --verde-ahorro: #16A34A;
  --gris-claro: #F1F5F9;
  --gris-texto: #334155;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

.font-display {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* Animaciones de entrada */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.animate-fade-up { animation: fade-up 0.7s ease-out both; }
.animate-fade-in { animation: fade-in 0.6s ease-out both; }
.animate-slide-in-right { animation: slide-in-right 0.6s ease-out both; }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slider de la calculadora */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: linear-gradient(to right, #0284C7, #F59E0B);
  border-radius: 999px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #0284C7;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.4);
  transition: transform 0.15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); }
input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #0284C7;
  cursor: pointer;
}

/* Detalles (FAQ accordion) */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Botón flotante WhatsApp */
.whatsapp-float {
  animation: fade-up 0.8s ease-out both;
}
@keyframes ping-slow {
  0% { transform: scale(1); opacity: 0.5; }
  75%, 100% { transform: scale(1.7); opacity: 0; }
}

/* Sticky CTA mobile padding bottom para no tapar contenido */
@media (max-width: 1023px) {
  body { padding-bottom: 70px; }
}

/* Imágenes con aspect-ratio fallback */
img { max-width: 100%; height: auto; }

/* Mejor rendering de íconos FA */
.fa-solid, .fa-brands { vertical-align: middle; }

/* Print: ocultar elementos interactivos */
@media print {
  .whatsapp-float, header, footer { display: none !important; }
}

/* Focus accesible */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid #0284C7;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Contenido prosa de páginas */
.prose-content h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.prose-content p { margin-bottom: 1rem; }