/* Estilos para la sección CTA */
.web-index-cta-section {
  background-color: #f8f8f8; /* Fondo claro para resaltar el contenido */
  padding: 4rem 1.25rem; /* Espaciado interno usando unidades relativas (rem) */
  text-align: center; /* Centrar el contenido */
  border-top: 1px solid #e0e0e0; /* Borde superior sutil */
  border-bottom: 1px solid #e0e0e0; /* Borde inferior sutil */
}

.web-index-cta-container {
  max-width: 50rem; /* Ancho máximo para el contenido usando unidades relativas (rem) */
  margin: 0 auto; /* Centrar el contenedor */
}

.web-index-cta-h2 {
  font-size: 2rem; /* Tamaño grande para el título usando unidades relativas (rem) */
  color: #f1f1f1; /* Color oscuro para el texto */
  margin-bottom: 1.25rem; /* Espaciado inferior usando unidades relativas (rem) */
  font-weight: 700; /* Negrita */
}

.web-index-cta-description {
  font-size: 1.125rem; /* Tamaño mediano para la descripción usando unidades relativas (rem) */
  color: #666; /* Color gris para el texto */
  margin-bottom: 1.875rem; /* Espaciado inferior usando unidades relativas (rem) */
  line-height: 1.6; /* Mejor legibilidad */
}

.web-index-cta-button {
  display: inline-block; /* Hacer que el botón sea inline-block */
  padding: 0.9375rem 1.875rem; /* Espaciado interno usando unidades relativas (rem) */
  font-size: 1.125rem; /* Tamaño del texto usando unidades relativas (rem) */
  font-weight: 600; /* Negrita */
  color: #fff; /* Texto blanco */
  background-color: #f09133; /* Color principal (#f09133) */
  border-radius: 3.125rem; /* Bordes redondeados usando unidades relativas (rem) */
  text-decoration: none; /* Quitar subrayado */
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil para dar profundidad */
}

.web-index-cta-button:hover {
  background-color: #e07d22; /* Color más oscuro al hacer hover */
  transform: translateY(-0.1875rem); /* Efecto de levantar el botón usando unidades relativas (rem) */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada al hacer hover */
}

.web-index-cta-button:active {
  transform: translateY(0); /* Resetear el efecto al hacer clic */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Restaurar sombra al hacer clic */
}