/* Configuración general */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #0b1d3a;
    color: white;
}

/* Encabezado: Usando Flexbox para un centrado perfecto */
header {
    background-color: #1769e0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 50px;
    font-weight: bold;
}

header p {
    font-size: 18px;
}

/* Contenido principal */
main {
    width: 90%;
    max-width: 1100px;
    margin: auto;
}

/* Introducción: Optimizada con Flexbox */
.introduccion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    padding: 70px 0;
}

/* En lugar de usar width: 50%, flex: 1 permite que tomen el espacio equitativamente */
.texto,
.imagen {
    flex: 1; 
}

.texto h2 {
    color: #ffd21c;
    font-size: 36px;
}

.texto p {
    font-size: 18px;
    line-height: 1.6;
}

.imagen img {
    width: 100%;
    border-radius: 15px;
    display: block; /* Evita el margen inferior fantasma de las imágenes */
}

/* Botones */
a, button {
    display: inline-block;
    background-color: #ffd21c;
    color: #0b1d3a;
    text-decoration: none;
    padding: 15px 25px;
    margin-top: 15px;
    font-weight: bold;
    border: none;
    border-radius: 5px; /* Un borde redondeado para mejor estética */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Transición suave al pasar el mouse */
}

a:hover, button:hover {
    background-color: white;
}

/* Características */
.caracteristicas {
    padding: 40px 0 80px;
    text-align: center;
}

.caracteristicas h2 {
    color: #ffd21c;
    font-size: 32px;
}

/* Tarjetas: Implementación de CSS Grid */
.tarjetas {
    display: grid;
    /* Esto crea columnas automáticas que se adaptan al ancho disponible */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.tarjeta {
    background-color: #1769e0;
    padding: 25px;
    border-radius: 10px;
    /* Flexbox interno opcional para alinear el contenido de la tarjeta */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tarjeta h3 {
    color: #ffd21c;
}

.tarjeta p {
    line-height: 1.5;
}

/* Pie de página */
footer {
    background-color: #071226;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Adaptación para celular */
@media (max-width: 700px) {
    /* Solo necesitamos cambiar la dirección de flexión en la introducción */
    .introduccion {
        flex-direction: column;
        text-align: center;
    }

    /* Nota: Ya no necesitamos forzar las .tarjetas a flex-direction: column 
       porque CSS Grid con auto-fit y minmax lo hace automáticamente */
}