/**
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: JWeb
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: This is my child theme by JWeb
Version: 4.8.2
*/

/* Estilo del contenedor principal */
.container-single {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Espacio entre las dos columnas */
}

/* Contenido del paquete: 60% de ancho */
.contenido-paquete {
    flex: 0 0 60%; /* Esto asegura que ocupe el 60% del contenedor */
}

/* Ajuste de la imagen dentro del contenido del paquete */
.contenido-paquete img {
    width: 100%;
    max-height: 300px; /* Limitar la altura máxima de la imagen */
    object-fit: cover; /* Ajustar la imagen sin deformarla */
}

/* Formulario: 40% de ancho */
.formulario-interes {
    flex: 0 0 40%; /* Esto asegura que ocupe el 40% del contenedor */
    padding: 20px;
    border-radius: 5px;
    background-color: #f9f9f9; /* Fondo claro */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición para el zoom */
}

/* Zoom suave al hacer hover en el formulario */
.formulario-interes:hover {
    transform: scale(1.03); /* Aumentar ligeramente el tamaño */
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15); /* Aumentar la sombra al hacer hover */
}

/* Ajustes generales para los inputs y textarea del formulario */
.formulario-interes input,
.formulario-interes textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.formulario-interes button {
    padding: 10px 15px;
    background-color: transparent;
    color: #178E79;;
    border: 1px solid;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Cambiar el color del botón al hacer hover */
.formulario-interes button:hover {
    color: white;
    background-color: #178E79;
}

.paquetes-iconos i {
    color: #178E79;
}


/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .container-single {
        flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
    }

    .contenido-paquete,
    .formulario-interes {
        flex: 0 0 100%; /* Ambos bloques ocupan el 100% del ancho en móvil */
    }
}