.elementor-5448 .elementor-element.elementor-element-172ef81.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-5448 .elementor-element.elementor-element-57d8745{--divider-border-style:solid;--divider-color:#00000000;--divider-border-width:1px;}.elementor-5448 .elementor-element.elementor-element-57d8745 .elementor-divider-separator{width:100%;}.elementor-5448 .elementor-element.elementor-element-57d8745 .elementor-divider{padding-block-start:50px;padding-block-end:50px;}@media(max-width:767px){.elementor-5448 .elementor-element.elementor-element-172ef81{width:var( --container-widget-width, 267px );max-width:267px;--container-widget-width:267px;--container-widget-flex-grow:0;}.elementor-5448 .elementor-element.elementor-element-57d8745 .elementor-divider{padding-block-start:2px;padding-block-end:2px;}}/* Start custom CSS for html, class: .elementor-element-1d2c7a8 *//* --- ADAPTACIÓN MÓVIL EXACTA --- */
@media (max-width: 768px) {
    /* 1. Forzar el contenedor principal al ancho de pantalla sin espacios */
    #mi-seccion-blog {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-top: 20px !important;
        width: 100% !important;
    }

    /* 2. Reducir los textos para que quepan bien */
    .animacion-titulo h1 span:first-child { font-size: 2.2rem !important; }
    .animacion-titulo h1 span:last-child { font-size: 3rem !important; }
    
    /* 3. Ajustar la caja de la imagen para que tenga curvas y no fondo gris */
    #mi-seccion-blog > div:last-child {
        width: 100% !important;
        height: 300px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        background: transparent !important; /* Elimina el fondo gris */
        border-radius: 30px !important;      /* Curvas perfectas */
    }

    /* 4. Asegurar que la imagen respete las curvas */
    #imagen-carrusel {
        border-radius: 30px !important;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cd4a3ae *//* Ajuste para dispositivos móviles: apilado y dimensiones fijas */
@media (max-width: 768px) {
    .flex-container-apple {
        flex-direction: column; /* Apila las cajas una sobre otra */
        align-items: center;    /* Las centra horizontalmente */
    }

    .card-apple {
        width: 304.3px !important;
        height: 301.0px !important;
        min-height: 301.0px !important;
    }

    /* Ajuste interno para que el contenido quepa en el nuevo tamaño */
    .card-image-container-apple {
        height: 140px; /* Reducimos la altura de la imagen para dejar espacio al texto */
    }
    
    .card-text-content-apple {
        padding: 15px;
    }

    .card-title-apple {
        font-size: 16px; /* Ajustamos el tamaño de fuente si es necesario */
        margin: 5px 0;
    }
}
@media (max-width: 768px) {
    /* Ajuste para el modal: ahora con 50px de margen superior total */
    .modal-content-apple {
        margin-top: 50px; 
        flex-direction: column;
        height: calc(80vh - 30px); /* Ajustamos la altura para no perder espacio abajo */
    }
    
    .modal-left-apple {
        width: 100%;
        height: 200px;
    }
    
    .modal-right-apple {
        width: 100%;
        padding: 20px;
    }
    
    .close-btn-apple {
        top: 10px;
        right: 10px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-be0be02 */<style>
    .force-full-width-bg {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 40px 20px;
        box-sizing: border-box;
    }

    .contenedor-tarjetas {
        display: flex;
        justify-content: center; /* Centra las tarjetas horizontalmente */
        flex-wrap: wrap;         /* Permite que bajen si no caben */
        gap: 20px;               /* Espacio reducido entre tarjetas */
        width: 100%;
        max-width: 1050px;       /* Reducimos el ancho máximo global */
    }

    .card {
        width: 320px;            /* Tamaño más pequeño y compacto */
        display: flex;
        flex-direction: column;
        background-color: #ffffff;
        border-radius: 18px;
        cursor: pointer;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        transition: transform 0.2s;
    }

    .card:hover { transform: scale(1.02); }

    .img-box {
        width: 100%;
        height: 160px;          /* Altura ajustada al nuevo tamaño */
        overflow: hidden;
    }

    .img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .content-box {
        padding: 16px;          /* Padding un poco más pequeño */
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    h3 {
        font-size: 17px;        /* Título ligeramente más pequeño */
        font-weight: 600;
        color: #1d1d1f;
        margin: 0 0 10px 0;
    }

    .date {
        font-size: 13px;
        color: #6e6e73;
        margin-top: auto;
    }

    /* --- Media Query para Móvil (Mantiene lo anterior) --- */
    @media (max-width: 768px) {
        .card { width: 100%; max-width: 350px; }
        .modal-content { flex-direction: column; }
        .modal-img { width: 100%; height: 200px; }
        .modal-scroll { width: 100%; }
    }

    /* Modal styles remain the same... */
</style>/* End custom CSS */