/* Ajustes para Móvil */
@media (max-width: 767px) {
    /* Ajustar los márgenes interiores y asegurar que el contenido baje hacia abajo */
    .e-con, .e-flexbox {
        padding: 20px 15px !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    
    /* Forzar que el grid pase a una sola columna en móviles */
    .e-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
    }
    
    /* Evitar anchos fijos que rompen el responsive */
    .elementor-element {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Reducir el tamaño de las tipografías principales */
    .elementor-widget-e-heading h1,
    .elementor-widget-e-heading h2,
    .elementor-widget-e-heading h3,
    .elementor-heading-title,
    .elementor-widget-heading .elementor-heading-title {
        font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
        line-height: 1.2 !important;
        text-align: center !important; /* Centrar títulos en móvil */
    }
    
    /* Evitar que las imágenes desborden la pantalla */
    .elementor-widget-e-image img,
    .elementor-widget-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto 15px;
        display: block;
    }
    
    /* Ajustes generales de espaciado en párrafos y listados */
    .elementor-widget-e-paragraph,
    .elementor-widget-text-editor,
    .elementor-icon-list-item {
        font-size: 1rem !important;
        text-align: center !important;
    }

    /* Centrar botones en móvil */
    .elementor-button-wrapper,
    .elementor-widget-e-button,
    .elementor-widget-button {
        text-align: center !important;
        justify-content: center !important;
        width: 100% !important;
    }
}

/* Ajustes para Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .e-con, .e-flexbox {
        padding: 40px 30px !important;
    }
    
    .e-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
    }

    .elementor-widget-e-heading h1,
    .elementor-widget-e-heading h2,
    .elementor-widget-heading .elementor-heading-title {
        font-size: clamp(1.8rem, 4vw, 2.5rem) !important;
    }
}