/*
 * tarjeta_proceso.css
 * Estilos específicos para las tarjetas de proceso de manufactura.
 */

/* Contenedor general de la grilla de procesos */
.procesos-grid-section {
    padding: 60px 0;
    background-color: var(--color-blanco-oscuro); /* Un fondo suave para la sección */
}

/* Contenedor de la grilla (flexbox para responsividad) */
.grid {
    display: flex; /* Se está utilizando Flexbox para la disposición de la grilla. */
    flex-wrap: wrap;
    justify-content: start; /* Centra las tarjetas cuando no llenan una fila completa */
    gap: 20px; /* Espacio entre las tarjetas */
    max-width: 1200px; /* Ancho máximo para la grilla */
    margin: 0 auto; /* Centrar la grilla */
    padding: 0 15px; /* Padding para evitar que las tarjetas toquen los bordes en móviles */
}

/* Definición de columnas de la grilla */
.grid-3-cols-lg {
    /* Por defecto, si el viewport es suficientemente grande, se usa esto */
    /* No se necesita definir aquí ya que flex-basis lo manejará */
}

/* Estilos para cada tarjeta de proceso */
.tarjeta-proceso {
    background-color: var(--color-blanco);
    border-radius: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* Asegura que la imagen no se desborde del borde redondeado de la tarjeta */
    display: flex;
    flex-direction: column; /* Apila la imagen, título y descripción */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto hover suave */
    max-width: 320px;
    flex: 1 1 calc(33.333% - 20px); /* Aproximadamente 3 columnas con espacio */
    box-sizing: border-box; /* Incluye padding y border en el tamaño total */
}

.tarjeta-proceso:hover {
    transform: translateY(-8px); /* Elevación sutil al pasar el ratón */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.tarjeta-proceso-imagen {
    width: 100%;
    height: 200px; /* Altura fija para las imágenes */
    /* Se quita overflow: hidden de aquí para evitar conflictos, ya está en .tarjeta-proceso */
    padding: 20px 20px 0 20px; /* Padding con unidades explícitas */
    box-sizing: border-box; /* Asegura que el padding no aumente el tamaño de la caja */
}

.tarjeta-proceso-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    display: block; /* Elimina espacio extra debajo de la imagen */
    transition: transform 0.3s ease; /* Efecto zoom en hover */
    border-radius: 20px; /* Border-radius de 20px a la imagen */
}

.tarjeta-proceso:hover .tarjeta-proceso-imagen img {
    transform: scale(1.05); /* Ligerísimo zoom al pasar el ratón */
}

.tarjeta-proceso-contenido {
    padding: 20px;
    flex-grow: 1; /* Permite que el contenido crezca para ocupar el espacio restante */
    display: flex;
    flex-direction: column;
    /* Se elimina justify-content: space-between; para que el título y descripción estén más juntos */
    /* Si es necesario un espaciado entre el contenido y el final de la tarjeta, se puede usar padding-bottom */
}

.tarjeta-proceso-titulo {
    font-family: 'Bilmond', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--color-azul-oscuro); /* Título en azul oscuro */
    margin-bottom: 5px; /* MODIFICADO: Reducido para acercar el título al texto */
    line-height: 1.2;
}

.tarjeta-proceso-descripcion {
    font-family: 'Bilmond', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--color-gris-oscuro);
    margin-bottom: 0; /* No margin-bottom si es el último elemento */
    line-height: 1.5;
}


/* --- Estilos para la Paginación --- */
.pagination-nav {
    margin-top: 40px;
    text-align: center;
}

.pagination {
    display: inline-flex; /* Para centrar los botones */
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 5px;
    overflow: hidden; /* Para que el border-radius se aplique a los bordes de los li */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.page-item {
    border: 1px solid var(--color-gris-claro);
    margin-left: -1px; /* Para que los bordes se superpongan */
}

.page-item:first-child {
    margin-left: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.page-item:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.page-link {
    display: block;
    padding: 10px 15px;
    color: var(--color-azul-oscuro);
    text-decoration: none;
    font-family: 'Bilmond', sans-serif;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.page-link:hover {
    background-color: var(--color-verde-principal);
    color: var(--color-blanco);
    border-color: var(--color-verde-principal);
}

.page-item.active .page-link {
    background-color: var(--color-azul-oscuro);
    color: var(--color-blanco);
    border-color: var(--color-azul-oscuro);
    cursor: default;
}

.page-item.active .page-link:hover {
    background-color: var(--color-azul-oscuro); /* Mantiene el color en hover si está activo */
    color: var(--color-blanco);
}


/* Mensajes de estado (no procesos, error) */
.no-procesos-message,
.error-message {
    text-align: center;
    font-family: 'Bilmond', sans-serif;
    font-size: 20px;
    color: var(--color-gris-oscuro);
    padding: 30px 0;
}

.error-message {
    color: #cc0000; /* Color rojo para errores */
    font-weight: 700;
}


/* --- Responsive para las tarjetas --- */

/* Para pantallas medianas (tablet, laptops pequeñas) - 2 columnas */
@media (max-width: 992px) {
    .grid {
        gap: 25px; /* Reducir un poco el espacio */
    }
    .tarjeta-proceso {
        flex: 1 1 calc(50% - 20px); /* 2 columnas */
        max-width: 400px;
    }
    .tarjeta-proceso-imagen {
        height: 180px; /* Ajustar altura de imagen */
    }
    .tarjeta-proceso-titulo {
        font-size: 22px;
    }
    .tarjeta-proceso-descripcion {
        font-size: 15px;
    }
}

/* Para pantallas pequeñas (móviles) - 1 columna */
@media (max-width: 768px) {
    .procesos-grid-section {
        padding: 40px 0;
    }
    .grid {
        gap: 20px; /* Más pequeño en móviles */
        padding: 0 10px;
    }
    .tarjeta-proceso {
        flex: 1 1 100%; /* Una columna completa */
        max-width: 350px;
        margin: 0 auto; /* Centrar la tarjeta */
    }
    .tarjeta-proceso-imagen {
        height: 220px; /* Puede ser más alta para mejor visualización en móvil */
    }
    .tarjeta-proceso-titulo {
        font-size: 20px;
        margin-bottom: 10px; /* Mantener un pequeño margen en móviles si es necesario */
    }
    .tarjeta-proceso-descripcion {
        font-size: 14px;
    }

    .pagination {
        flex-wrap: wrap; /* Permite que los botones de paginación se envuelvan */
        justify-content: center;
        margin-top: 30px;
    }

    .page-item {
        margin: 5px; /* Espacio entre botones en lugar de superponer */
        border-radius: 5px; /* Bordes individuales */
    }
    .page-item:first-child,
    .page-item:last-child {
        border-radius: 5px; /* Restablecer para que no haya bordes específicos */
    }
}