.elementor-173 .elementor-element.elementor-element-f555a23:not(.elementor-motion-effects-element-type-background), .elementor-173 .elementor-element.elementor-element-f555a23 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-044b931 );}.elementor-173 .elementor-element.elementor-element-f555a23 > .elementor-background-overlay{background-image:url("https://ahrserviciosbiomedicos.com/wp-content/uploads/2025/01/servicios.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;opacity:0.7;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-173 .elementor-element.elementor-element-f555a23 > .elementor-container{max-width:720px;}.elementor-173 .elementor-element.elementor-element-f555a23{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:5em 0em 5em 0em;}.elementor-173 .elementor-element.elementor-element-5fc90ccd > .elementor-element-populated{padding:2em 2em 2em 2em;}.elementor-173 .elementor-element.elementor-element-28a3fb48{text-align:center;}.elementor-173 .elementor-element.elementor-element-28a3fb48 .elementor-heading-title{color:var( --e-global-color-text );}.elementor-173 .elementor-element.elementor-element-2cb3479{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-173 .elementor-element.elementor-element-48511b2{text-align:center;}.elementor-173 .elementor-element.elementor-element-3b6e8df{text-align:center;}.elementor-173 .elementor-element.elementor-element-c28200e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-173 .elementor-element.elementor-element-f555a23{padding:3em 0em 3em 0em;}}/* Start custom CSS for html, class: .elementor-element-3bb0736 *//* Contenedor principal del portafolio */
.portafolio-servicios {
    background-color: #f9f9f9;
    padding: 30px 20px; /* Ajuste de márgenes para móviles */
    color: #333;
    max-width: 1400px; /* Máximo ancho en pantallas grandes */
    margin: 0 auto;
}

/* Grid del portafolio */
.portafolio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas en escritorio */
    gap: 20px; /* Espaciado entre tarjetas */
    justify-items: center; /* Centrar tarjetas horizontalmente */
}

/* Estilos de las tarjetas */
.portafolio-tarjeta {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    width: 100%;
    max-width: 300px; /* Limitar ancho máximo de las tarjetas */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.portafolio-tarjeta:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.portafolio-tarjeta img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}
.portafolio-tarjeta h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}
.portafolio-tarjeta p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

/* Ajuste responsivo para pantallas medianas */
@media (max-width: 1200px) {
    .portafolio-grid {
        grid-template-columns: repeat(3, 1fr); /* Cambiar a 3 columnas */
    }
}

/* Ajuste responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    .portafolio-grid {
        grid-template-columns: repeat(2, 1fr); /* Cambiar a 2 columnas */
    }
}

/* Ajuste específico para pantallas de celulares */
@media (max-width: 576px) {
    .portafolio-grid {
        grid-template-columns: 1fr; /* Una tarjeta por fila */
        gap: 15px; /* Reducir el espacio entre tarjetas */
    }
    .portafolio-tarjeta {
        max-width: 100%; /* Las tarjetas ocupan todo el ancho disponible */
        padding: 15px; /* Reducir el padding interno */
    }
    .portafolio-tarjeta h3 {
        font-size: 16px; /* Ajustar el tamaño del título */
    }
    .portafolio-tarjeta p {
        font-size: 13px; /* Reducir el tamaño del texto para móviles */
    }
}/* End custom CSS */