/* 1. ESTILOS GENERALES */
@font-face {
    font-family: "Lexend";
    src: url(../media/fonts/Lexend-VariableFont_wght.ttf) format('woff');
    font-weitght:normal;
    font-style:normal;
}
body {
    font-family:Lexend; /*fuente*/
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center; /*centré todo*/
}
.seccionCuadros {
    display: flex; /*hijos en fila*/
    gap: 30px; /*espacio entre cada cuadro*/
    flex-wrap: wrap; /* si no caben los cuadros en la pantalla, bajan a la siguiente línea*/
    justify-content: center; /*centra los cuadros horizontalmente*/
    max-width: 1200px; /*que no se estire tanto en pantallas grandes, responsive*/
}
.cuadro {
    border: 1px solid #000; /*boorde y anchura*/
    border-radius: 20px; /*quita el borde feo*/
    padding: 20px;
    width: 300px;          
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 4. LA IMAGEN */
.cuadro img {
    width: 100%;           
    height: auto;         
    margin-bottom: 20px;
}

/* 5. EL TEXTO */
.cuadro h3 {
    font-size: 18px;
    margin-bottom: 20px;
    min-height: 60px;    
}

/* 6. EL BOTÓN */
.cuadro button {
    background-color: #9EF07A;
    border: none; /*quita el borde que tiene*/
    padding: 15px 30px;       
    border-radius: 50px;       
    font-weight: bold;        
    font-size: 16px;
    font-family:Lexend;
    cursor: pointer;          
    transition: transform 0.2s; /*efecto al tocarlo*/
}
.cuadro button:hover {
    transform: scale(1.05);
}