@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

*{
    box-sizing:border-box;
}
body{
    margin:0;
    background:#e9eff8;
    color:#08234a;
    font-family:'Nunito','Segoe UI',arial,sans-serif;
}
a{
    color:inherit;
    text-decoration:none;
}
#contenedor{
    min-height:100vh;
}
header{
    background:#1f385f;
    color:white;
    box-shadow:0 5px 18px #0002;
}
.arriba{
    max-width:1180px;
    margin:auto;
    padding:22px 22px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.logo{
    text-transform:none !important;
    font-family:'Lora',georgia,serif;
    font-size:34px;
    font-weight:700;
    color:white;
    letter-spacing:.3px;
}
.logo:first-letter{
    color:#e5c36e;
}
.contacto{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:18px;
    color:#eef5ff;
    font-size:14px;
    font-weight:700;
}
.carritoicono{
    background:#e3b350;
    color:#10284b;
    padding:8px 14px;
    border-radius:30px;
    font-weight:800;
}
nav{
    background:#314b7b;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    padding:10px 16px;
}
nav a{
    text-transform:none !important;
    color:#f3f7ff;
    padding:10px 16px;
    border-radius:22px;
    font-weight:800;
    font-size:14px;
}
nav a:hover,
nav .activo{
    color:#10284b;
    background:#e3b350;
}
section{
    max-width:1180px;
    margin:auto;
    padding:42px 22px;
}
h1,h2,h3{
    font-family:'Lora',georgia,serif;
}
button{
    border:0;
    background:#e2b251;
    color:#10284b;
    padding:10px 18px;
    border-radius:24px;
    font-weight:800;
    cursor:pointer;
    font-family:'Nunito','Segoe UI',arial,sans-serif;
    box-shadow:0 7px 16px #18305524;
}
button:hover{
    background:#edc76d;
}
.inicio{
    min-height:500px;
    border-radius:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:46px;
    background:linear-gradient(#102748d5,#102748d5),url('../photo/fondo-libros.jpg');
    background-size:cover;
    background-position:center;
    box-shadow:0 18px 38px #24344d30;
}
.frase{
    max-width:830px;
    text-align:center;
    color:white;
}
.frase h1{
    text-transform:none !important;
    font-size:48px;
    line-height:1.12;
    margin:0 0 18px;
}
.frase p{
    text-transform:none !important;
    font-size:20px;
    line-height:1.7;
    margin:0 0 24px;
}
.bloque,
.llamada{
    background:#f8faff;
    border-radius:28px;
    padding:36px;
    margin:34px 0;
    text-align:center;
    box-shadow:0 14px 34px #30415f20;
}
.bloque p,
.llamada p{
    max-width:850px;
    margin:14px auto;
    line-height:1.8;
}
.bloques{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin:34px 0;
}
.bloques article,
.sobre article{
    background:#f8faff;
    border-radius:28px;
    padding:32px;
    box-shadow:0 14px 34px #30415f20;
}
.titulo{
    text-transform:none !important;
    font-size:44px;
    text-align:center;
    margin:6px 0 34px;
}
.productos{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(225px,1fr));
    gap:26px;
}
.producto{
    background:#f8faff;
    border-radius:28px;
    padding:18px;
    text-align:center;
    box-shadow:0 14px 34px #30415f20;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.producto img{
    width:100%;
    height:280px;
    object-fit:cover;
    object-position:center;
    border-radius:20px;
    background:#d9e2f1;
    box-shadow:0 8px 18px #0002;
}
.producto h3{
    margin:8px 0 0;
    min-height:48px;
}
.autor{
    margin:0;
    color:#48668f;
}
.precio{
    font-weight:800;
    color:#142f58;
    font-size:20px;
}
.comprar{
    background:#f0d58b;
    box-shadow:none;
}
.ficha{
    background:#f8faff;
    border-radius:30px;
    padding:34px;
    display:grid;
    grid-template-columns:360px 1fr;
    gap:38px;
    align-items:start;
    box-shadow:0 14px 34px #30415f20;
}
.foto img{
    width:100%;
    border-radius:24px;
    background:#d9e2f1;
    box-shadow:0 10px 22px #0002;
}
.datos h1{
    margin-top:0;
    font-size:38px;
}
.datos p{
    line-height:1.8;
}
.grande{
    font-size:30px;
}
input,
select,
textarea{
    width:100%;
    padding:11px;
    border:1px solid #c6d3e6;
    border-radius:14px;
    margin:7px 0;
    font-family:'Nunito','Segoe UI',arial,sans-serif;
    background:white;
}
textarea{
    min-height:90px;
}
.datos input[type=number]{
    width:90px;
}
.carrito{
    display:flex;
    flex-direction:column;
    gap:18px;
}
.linea{
    background:#f8faff;
    border-radius:26px;
    padding:18px;
    display:grid;
    grid-template-columns:90px 1fr 150px 110px 100px;
    gap:18px;
    align-items:center;
    box-shadow:0 14px 34px #30415f20;
}
.linea img{
    width:90px;
    height:122px;
    object-fit:cover;
    border-radius:16px;
    box-shadow:0 7px 15px #0002;
}
.cantidad{
    display:flex;
    align-items:center;
    gap:9px;
}
.cantidad form{
    display:inline;
}
.cantidad span{
    font-weight:800;
    min-width:22px;
    text-align:center;
}
.total{
    text-align:right;
    background:#f8faff;
    padding:26px;
    border-radius:26px;
    box-shadow:0 14px 34px #30415f20;
}
.sobre.solo{
    max-width:560px;
    margin:0 auto 50px;
}
.icono{
    font-size:42px;
}
.login{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e9eff8;
    padding:20px;
}
.login form{
    background:#f8faff;
    padding:34px;
    border-radius:28px;
    width:340px;
    box-shadow:0 14px 34px #30415f25;
    text-align:center;
}
.login a{
    display:block;
    margin-top:18px;
}
.formulario{
    background:#f8faff;
    padding:26px;
    border-radius:26px;
    margin-top:32px;
    box-shadow:0 14px 34px #30415f20;
}
table{
    width:100%;
    border-collapse:collapse;
    background:#f8faff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 14px 34px #30415f20;
}
th,td{
    padding:13px;
    border-bottom:1px solid #d8e2f1;
    text-align:left;
}
th{
    background:#20385f;
    color:white;
}
.aviso{
    background:#dff0df;
    padding:13px;
    border-radius:14px;
}
footer{
    background:#20385f;
    color:#dce8ff;
    margin-top:45px;
    padding:36px 22px;
}
footer .pie{
    max-width:1180px;
    margin:auto;
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr 1fr;
    gap:28px;
}
footer h3{
    color:white;
    margin:0 0 12px;
}
footer p{
    margin:8px 0;
    line-height:1.5;
}
footer a:hover{
    color:#e0ae4f;
}
@media(max-width:900px){
    section{
        padding:30px 16px;
    }
    .arriba{
        flex-direction:column;
        text-align:center;
    }
    .contacto{
        justify-content:center;
        flex-wrap:wrap;
    }
    .bloques,
    .ficha,
    footer .pie{
        grid-template-columns:1fr;
    }
    .linea{
        grid-template-columns:90px 1fr;
    }
    .total{
        text-align:center;
    }
}
@media(max-width:560px){
    .arriba{
        padding:18px 14px 12px;
    }
    .logo{
    text-transform:none !important;
        font-size:28px;
    }
    .contacto{
        gap:10px;
        font-size:13px;
    }
    .contacto span{
        display:none;
    }
    nav{
        justify-content:flex-start;
        overflow-x:auto;
        flex-wrap:nowrap;
        padding:9px;
    }
    nav a{
    text-transform:none !important;
        white-space:nowrap;
        padding:9px 13px;
        font-size:13px;
    }
    .inicio{
        min-height:390px;
        padding:25px;
        border-radius:22px;
    }
    .frase h1{
    text-transform:none !important;
        font-size:34px;
    }
    .frase p{
    text-transform:none !important;
        font-size:16px;
    }
    .titulo{
    text-transform:none !important;
        font-size:34px;
    }
    .bloque,
    .llamada,
    .bloques article,
    .sobre article,
    .ficha{
        padding:24px;
    }
    .productos{
        grid-template-columns:1fr;
    }
    .producto img{
        height:360px;
        object-fit:contain;
        background:#edf2fa;
    }
    .linea{
        grid-template-columns:1fr;
        text-align:center;
    }
    .linea img{
        margin:auto;
        width:120px;
        height:165px;
    }
    .cantidad{
        justify-content:center;
    }
    table{
        display:block;
        overflow-x:auto;
    }
}

.cliente{
    color:#ffffff;
    background:#294a7c;
    padding:8px 12px;
    border-radius:20px;
}
.enlacecliente{
    background:#edf3ff;
    color:#18345c;
    padding:8px 12px;
    border-radius:20px;
    font-weight:800;
}
.ayuda{
    color:gray;
    font-size:14px;
    line-height:1.5;
}
.login input{
    width:100%;
    margin:8px 0;
    padding:11px;
    border:1px solid #c9d5e8;
    border-radius:16px;
    font-family:'Nunito','Segoe UI',arial,sans-serif;
}
.login button{
    width:100%;
    margin-top:10px;
}