/* 
 * SERVICES.CSS - Estilos específicos para servicios
 * Contiene:
 * - Diseño de contenedores de servicios
 * - Estilos para imágenes y texto de servicios
 * - Efectos hover y transiciones
 * - Responsive para todas las pantallas
 */
 .servicio-container {
    display: flex;
    align-items: flex-start; /* Todos alineados al inicio (top) */
    justify-content: center; /* Centra el contenido horizontalmente */
    gap: 40px;
    margin: 40px auto; /* Centrado margen arriba/abajo del grid y automático */
    max-width: 1400px; /* Límite máximo para pantallas grandes */
    width: 100%;
    padding: 0 20px; /* Padding interno para evitar pegado en bordes */
}

/* Imágenes - Versión mejorada */
.servicio-imagen {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
    height: 300px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.servicio-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.servicio-imagen:hover img {
    transform: scale(1.03);
}

/* Contenedor de texto - Versión mejorada */
.servicio-texto {
    flex: 1;
    /*padding: 20px;
    padding: 0 20px;*/
    min-width: 300px; /* Ancho mínimo para buen equilibrio */
    max-width: 600px; /* Límite máximo para texto */
}

.servicio-texto h3 {
    color: var(--color-primario);
    margin-bottom: 15px;
    font-size: 1.8rem;
}

.servicio-texto ul {
    /*margin: 15px 0px; */
    padding-bottom: 20px;
}

.servicio-texto li {
    margin-bottom: 8px;
    color: var(--color-texto-claro);
}

.destacado {
    color: var(--color-terciario);
    font-weight: bold;
    margin-top: 15px;
}

/* PARA EL GRID */
.servicios-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 40px;
    max-width: 1400px;
    margin: 40px auto;
    padding: 0px 20px;    
}

.item1 { grid-column: 1; grid-row: 1; }
.item2 { grid-column: 2; grid-row: 1; }

.item3 { grid-column: 1; grid-row: 2; }
.item4 { grid-column: 2; grid-row: 2; }

.item5 { grid-column: 1; grid-row: 3; }
.item6 { grid-column: 2; grid-row: 3; }

/* revisar si sirve */
.servicios-grid img {
    display: block;
    margin: 0 auto;
}

/* ======== Desktop (grid con celdas fijas) ======== */
@media (min-width: 993px) {
    .servicios-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        gap: 40px;
        max-width: 1400px;
        margin: 40px auto;
        padding: 0 20px;
        align-items: start;
        justify-items: center;  /* Centrar imágenes dentro de la celda */
    }

    /* Posiciones fijas para cada celda */
    .item1 { grid-column: 1; grid-row: 1; }
    .item2 { grid-column: 2; grid-row: 1; }
    .item3 { grid-column: 1; grid-row: 2; }
    .item4 { grid-column: 2; grid-row: 2; }
    .item5 { grid-column: 1; grid-row: 3; }
    .item6 { grid-column: 2; grid-row: 3; }

    /* Imágenes centradas */
    .servicio-imagen img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        object-fit: cover;
        object-position: center;
        transition: transform 0.3s ease;
    }

    .servicio-imagen:hover img {
        transform: scale(1.03);
    }
}

/* ======== Móvil y Tablet (apilado vertical) ======== */
@media (max-width: 768px) { /*992px*/
    .servicios-grid {
        display: flex;
        flex-direction: column;
        max-width: 600px;
        margin: 0px auto; /*20px*/
        padding: 0 20px;
    }

    /* Quitar posiciones de grid para que fluya como flex */
    .item1, .item2, .item3, .item4, .item5, .item6 {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100%;
    }

    /* Ahora reordenamos los items para que quede imagen primero, luego texto por cada servicio */

    /* Servicio 1 */
    .item2 { order: 1; } /* imagen */
    .item1 { order: 2; } /* texto */

    /* Servicio 2 */
    .item3 { order: 3; } /* imagen */
    .item4 { order: 4; } /* texto */

    /* Servicio 3 */
    .item6 { order: 5; } /* imagen */
    .item5 { order: 6; } /* texto */

    /* Centramos imágenes y ajustamos tamaño */
    .servicio-imagen {
        width: 100%;
        max-width: 400px;
        margin: 0 auto 20px;
        height: auto; /* Ajusta la altura para que sea natural */
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        overflow: hidden;
    }

    .servicio-imagen img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
    }

    /* Texto ocupa todo el ancho */
    .servicio-texto {
        width: 100%;
        margin-bottom: 0px; /*20px*/
    }

    .servicio-texto ul {
        padding-bottom: 0px;
    }
}