/* style.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    background-color: #f8f0e5;
    color: #4d4055;

    font-family: Georgia, serif;

    padding: 30px;

    background-image:
    radial-gradient(#d8c8bb 1px, transparent 1px);

    background-size: 25px 25px;

}


/* CABECERA */

header {

    text-align: center;
    max-width: 1200px;
    margin: auto;

}


header h1 {

    font-size: 45px;
    font-weight: normal;

    letter-spacing: 5px;

    margin-bottom: 25px;

}



nav {

    border-top: 2px solid #9b7bb5;
    border-bottom: 2px solid #9b7bb5;

    padding: 15px;

    margin-bottom: 30px;

}



nav a {

    text-decoration: none;

    color: #4d4055;

    margin: 0 12px;

}



nav a:hover {

    color: #9b7bb5;

}



/* CONTENEDOR */

main {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 22px;

}



/* TARJETAS */

.tarjeta {

    background: #fffaf5;

    border: 2px solid #9b7bb5;

    border-radius: 8px;

    padding: 25px;

    box-shadow:
    0 8px 20px rgba(90,70,110,.15);

}



.tarjeta h2 {

    font-size: 20px;

    font-weight: normal;

    margin-bottom: 15px;

    color: #4d4055;

}



.tarjeta p {

    line-height: 1.7;

}



/* ENTRADA PRINCIPAL */

.entrada {

    min-height: 400px;

}



/* IMÁGENES */

img {

    max-width: 100%;

    border-radius: 5px;

}



/* BOTÓN */

a {

    color: #9b7bb5;

}



section a {

    display: inline-block;

    margin-top: 15px;

    padding: 10px 20px;

    border: 2px solid #9b7bb5;

    border-radius: 20px;

    text-decoration: none;

}



section a:hover {

    background: #9b7bb5;

    color: white;

}



/* PIE */

footer {

    text-align: center;

    margin-top: 40px;

}



/* MÓVIL */

@media(max-width:800px) {


    body {

        padding: 15px;

    }


    main {

        display: flex;

        flex-direction: column;

    }


    header h1 {

        font-size: 32px;

    }


    nav a {

        display: inline-block;

        margin: 7px;

    }

}