body{
    font-family: 'Times New Roman', Times, serif;
}

header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    padding-top: 12px;
    padding-bottom: 12px;
}

.logotipo{
    font-size: 45px;
    line-height: 50px;
    font-weight: bold;
}
.datos{
    font-size: 20px;
    text-align: center;
}


.cabecera{
    position: relative;
    background: url(../images/f0a.jpg) center / cover no-repeat;
    padding-top: 100px;
    padding-bottom: 100px;
}
.cabecera::before{
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(0px);
    background: rgba(255,255,255,.5);
}

.logotipo2{
    font-size: 22px;
}
.logotipo2 strong{
    color: #1d4948;
    font-weight: bold;
    font-size: 57px;
    line-height: 70px;
    text-shadow: 3px 3px 7px white;
}
.logotipo2 a, .logotipo2 b{
    color: white;
    font-weight: bold;
}

.con{
    color: #a46649;
    color: black;
    padding: 4px;
    border-radius: 6px;
    margin-bottom: 4px;
    display: inline-block;
}
.con a, .con b{
    font-size: 26px !important;
    color: #870522;
    color: black;
    font-weight: bold;
    text-decoration: none;
}


.imagenes img{
    width: 42%;

    box-shadow: 10px 10px 10px black;
}

.imagenes2{
    width:48.5% !important;
    margin-left: 4%;
}


.uno{
    position: relative;
    background: url("../images/f2.jpg") center / cover no-repeat;
}

.dos{
    position: relative;
    background: url("../images/f1.jpg") center / cover no-repeat;
}


.libro{
    font-size: 19px;
    line-height: 25px;
    padding-top: 120px !important;
    padding-bottom: 120px !important;
}
.libro::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.65);
}

.libro > *, .cabecera  > * {
    position: relative;
    z-index: 1;
    color: black;
}


footer{
    background: #1d4948;
    color: white;
    text-align: center;
    font-size: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
}
footer strong{
    font-size: 33px;
}






@media screen and (max-width:1400px){

}

@media screen and (max-width:1200px){

}

@media screen and (max-width:992px){

}

@media screen and (max-width:768px){

}

@media screen and (max-width:576px){
    .cabecera{
         background: url(../images/f0a.jpg) center left / cover no-repeat;
    }
    .con a, .con b{
        font-size: 18px !important;
    }
}


/* ====== Layout principal para que el texto rodee la imagen ====== */
.libro-detalle {
    line-height: 1.6;
}

.libro-detalle .imagen {
    float: left;
    width: 20%;                 /* Ajusta el ancho del bloque de imagen */
    max-width: 520px;           /* Límite opcional para pantallas grandes */
    margin: 0 30px 20px 0;      /* Espacio a la derecha y abajo */
}

/* Importante: el float necesita un "clearfix" */
.libro-detalle::after {
    content: "";
    display: block;
    clear: both;
}

/* Ajustes visuales del carrusel y elementos dentro de .imagen */
.libro-detalle .carousel {
    border-radius: 14px;
    overflow: hidden;
}

.libro-detalle .imagen span {
    display: block;
    margin: 12px 0 10px 0;
    font-weight: 700;
    text-align: center;
}

.libro-detalle .paypal {
    width: 170px;
    height: auto;
    display: inline-block;
}

/* Tipografía / separaciones del texto */
.libro-detalle strong {
    display: block;
    font-size: 2rem;
    margin: 10px 0 10px 0;
}

.libro-detalle p {
    font-size: 22px;
    margin: 0 0 14px 0;
}

.libro-detalle center p {
    margin-bottom: 12px;
}

.libro-detalle center b i {
    display: inline-block;
    margin-top: 10px;
}

/* ====== Responsive: en móvil, la imagen arriba y texto abajo ====== */
@media (max-width: 768px) {
    .libro-detalle .imagen {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 18px 0;
    }

    .libro-detalle strong {
        font-size: 1.35rem;
    }
}