/* ==================================================
   ESTILOS GENERALES PERSONALIZADOS
================================================== */

/* === Fuente base para todos los párrafos === */
p {
  font-size: 1.25rem; /* text-xl */
  color: #374151; /* text-gray-700 */
  margin-bottom: 1.5rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  font-family: "Inter", sans-serif; /* Tipo de fuente para los párrafos */
}

/* === Títulos personalizados === */
.hero-title {
  font-size: 3rem; /* Tamaño de fuente para títulos principales */
  font-weight: 800; /* Peso de la fuente */
  line-height: 1.2;
  text-align: center; /* Alineación centrada */
}
@media (min-width: 768px) {
  .hero-title {
    font-size: 4.5rem; /* Tamaño de fuente para pantallas más grandes */
  }
}
.hero-subtitle {
  font-size: 1.125rem; /* Tamaño de fuente para subtítulos */
  color: #e5e7eb; /* Color gris claro */
  text-align: center; /* Alineación centrada */
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .hero-subtitle {
    font-size: 1.25rem; /* Tamaño de fuente más grande en pantallas grandes */
  }
}

/* === Botones personalizados === */
.btn-verde {
  background-color: #16a34a; /* Fondo verde */
  color: white; /* Color de texto blanco */
  padding: 0.5rem 1.25rem; /* Espaciado interno del botón */
  border-radius: 0.5rem; /* Bordes redondeados */
  font-weight: 600; /* Peso de la fuente */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Sombra del botón */
  transition: all 0.2s; /* Transición para el cambio de fondo */
}
.btn-verde:hover {
  background-color: #15803d; /* Fondo verde más oscuro al pasar el mouse */
}

.btn-transparente {
  background-color: transparent; /* Fondo transparente */
  border: 1px solid rgba(255, 255, 255, 0.3); /* Borde blanco con opacidad */
  color: white; /* Color de texto blanco */
  padding: 0.5rem 1.25rem; /* Espaciado interno del botón */
  border-radius: 0.5rem; /* Bordes redondeados */
  transition: all 0.2s; /* Transición para el cambio de fondo */
}
.btn-transparente:hover {
  background-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* Fondo ligeramente blanco al pasar el mouse */
}

/* ==================================================
   CALCULADORA (Página específica)
================================================== */
.calculadora-page #mainHeader {
  background-color: transparent !important; /* Header transparente en la calculadora */
  -webkit-backdrop-filter: blur(8px); /* Efecto de difuminado en el fondo */
  backdrop-filter: blur(8px) !important; /* Efecto de difuminado en el fondo */
  box-shadow: none !important; /* Sin sombra en el header */
}

/* ==================================================
   ESTILOS UTILITARIOS (Clases rápidas)
================================================== */
.text-shadow {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Sombra de texto */
}
.drop-shadow-soft {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); /* Sombra suave */
}
.bg-blur {
  -webkit-backdrop-filter: blur(8px); /* Fondo difuminado */
  backdrop-filter: blur(8px) !important; /* Fondo difuminado */
}

/* ==================================================
   CLASES PERSONALIZADAS DE SECCIONES
================================================== */

.section-title {
  font-size: 2.25rem; /* Tamaño de fuente para títulos de secciones */
  font-weight: 800; /* Peso de la fuente */
  margin-bottom: 1rem; /* Espaciado inferior */
  color: #1f2937; /* text-gray-800 */
}
@media (min-width: 768px) {
  .section-title {
    font-size: 3.75rem; /* Tamaño de fuente más grande en pantallas grandes */
  }
}

.section-subtitle {
  font-size: 1.125rem; /* Tamaño de fuente para subtítulos */
  color: #6b7280; /* text-gray-500 */
  margin-bottom: 1.5rem; /* Espaciado inferior */
}

/* Esto lo podés agregar en tu custom.css */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px); /* Empezar desde abajo */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* Finaliza en la posición original */
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease-out both; /* Animación de entrada */
}