/* -------------------------------------- */
/* --- Estilos para la sección Features --- */
/* -------------------------------------- */

/* Contenedor principal de la sección */
.features-section {
    background-color: #0a011f; /* Mismo fondo oscuro que la sección 'about' */
    color: #fff; /* Mismo color de texto */
    padding: 80px 20px; /* Espaciado vertical y horizontal */
    text-align: center; /* Centra el título y el párrafo introductorio */
}

    /* Título principal de la sección */
    .features-section h2 {
        font-size: 36px; /* Tamaño consistente con el otro título */
        margin-bottom: 20px;
    }

        /* Estilo para la palabra resaltada en el título */
        .features-section h2 span {
            color: #ff6b00; /* Mismo color de acento morado */
        }

    /* Párrafo de introducción debajo del título */
    .features-section > p {
        font-size: 0.8em;
        line-height: 1.6;
        max-width: 1000px; /* Limita el ancho para mejor legibilidad */
        margin: 0 auto 50px auto; /* Centra el párrafo y añade espacio debajo */
    }

/* -------------------------------------- */
/* --- Cuadrícula de tarjetas (Grid) --- */
/* -------------------------------------- */

.features-grid {
    display: grid;
    /* Crea columnas flexibles: se ajustarán automáticamente.
       Cada columna tendrá un mínimo de 300px y un máximo de 1 fracción del espacio disponible.
       Esto hace la cuadrícula muy responsiva por defecto. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; /* Espacio entre las tarjetas */
    max-width: 1200px; /* Ancho máximo para la cuadrícula */
    margin: 0 auto; /* Centra la cuadrícula en la sección */
}

/* -------------------------------------- */
/* --- Estilo de cada tarjeta (Card) --- */
/* -------------------------------------- */

.feature-card {
    background-color: #1a0a3d; /* Un color ligeramente más claro para destacar las tarjetas */
    border: 1px solid #3a2c5f; /* Un borde sutil */
    border-radius: 15px; /* Bordes redondeados */
    padding: 10px;
    display: flex;
    flex-direction: column; /* Apila el contenido verticalmente */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave para el hover */
}

    .feature-card:hover {
        transform: translateY(-10px); /* Eleva la tarjeta al pasar el mouse */
        box-shadow: 0 10px 20px rgba(140, 82, 255, 0.2); /* Añade una sombra de color */
    }

    /* Imagen dentro de la tarjeta */
    .feature-card img {
        width: 100%; /* Asegura que la imagen ocupe todo el ancho de la tarjeta */
        height: 200px; /* Establece una altura fija para todas las imágenes */
        object-fit: contain; /* Ajusta la imagen para que quepa completa sin distorsionarse */
        border-radius: 10px; /* Redondea las esquinas de la imagen */
        margin-bottom: 10px;
    }

    /* Título de la tarjeta (h3) */
    .feature-card h3 {
        font-size: 1.2em;
        color: #fff;
        margin-bottom: 15px;
    }

    /* Párrafo de la tarjeta */
    .feature-card p {
        font-size: 0.6em;
        line-height: 1.6;
        flex-grow: 1; /* Hace que el párrafo ocupe el espacio disponible, empujando los botones hacia abajo */
        margin-bottom: 20px;
    }

/* -------------------------------------- */
/* --- Botones de las tarjetas --- */
/* -------------------------------------- */

.card-buttons {
    display: flex;
    justify-content: center; /* Centra los botones */
    gap: 15px; /* Espacio entre botones */
    margin-top: auto; /* Empuja los botones al final si flex-grow no es suficiente */
}

.btn {
    background-color: #8c52ff; /* Color de fondo del botón */
    color: #fff;
    padding: 6px 12px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn:hover {
        background-color: transparent;
        border-color: #8c52ff;
        color: #8c52ff;
    }


/* -------------------------------------- */
/* --- Media Queries para Responsive --- */
/* -------------------------------------- */

/* Para tabletas y pantallas más pequeñas */
@media (max-width: 992px) {
    .features-section {
        padding: 60px 20px;
    }

        .features-section h2 {
            font-size: 2.5em;
        }

        .features-section > p {
            font-size: 1.1em;
        }
}

/* Para móviles */
@media (max-width: 576px) {
    .features-section h2 {
        font-size: 2.2em;
    }

    /* Para que los botones se apilen en pantallas muy pequeñas si es necesario */
    .card-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%; /* Ocupa todo el ancho de la tarjeta */
        max-width: 250px;
    }
}

/*
=====================================================
--- AJUSTES RESPONSIVOS PARA MÓVILES Y TABLETAS ---
=====================================================
*/
@media (max-width: 768px) {
    .features-section {
        /* Reducimos el padding en pantallas más pequeñas */
        padding: 60px 15px;
    }

        .features-section h2 {
            /* Hacemos el título más pequeño para que no domine la pantalla */
            font-size: 28px;
        }

        .features-section > p {
            /* Ajustamos el tamaño del párrafo introductorio */
            font-size: 1em;
            margin-bottom: 40px; /* Reducimos el margen inferior */
        }

    .features-grid {
        /* Reducimos el espacio entre tarjetas en móviles */
        gap: 20px;
    }

    .feature-card {
        /* Quitamos el efecto hover en dispositivos táctiles donde no aplica */
        transform: none;
        box-shadow: none;
    }

        .feature-card:hover {
            /* Desactivamos explícitamente el hover para evitar estados pegajosos en móviles */
            transform: none;
            box-shadow: none;
        }

        .feature-card img {
            /* Reducimos la altura de la imagen para que las tarjetas no sean tan largas */
            height: 150px;
        }

    /* En pantallas muy pequeñas, apilamos los botones para que no se vean apretados */
    @media (max-width: 400px) {
        .card-buttons {
            flex-direction: column;
            align-items: center;
            gap: 10px; /* Espacio menor cuando están apilados */
        }

        .btn {
            width: 100%; /* Hacemos que los botones ocupen todo el ancho disponible */
            max-width: 250px;
        }
    }
}