@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

body {padding-top:95px;  }
html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, table, td, th  { font-family: "DM Sans", sans-serif;}

h1, h2, h3, h4 {font-family: "Playfair Display", serif;}

/* COLORES */
.playfair {font-family: "Playfair Display", serif;}
.text-primary {color:#0097a7 !important;}
.text-primary-hover:hover {color:#457a8b !important;}
.text-primary a {color:#0097a7 !important;}
.bg-primary {background-color:#0097a7 !important;}
.bg-grey {background-color:#eeeeee !important;}
.fs-mini {font-size:0.7rem;}
.fs-proximamente {font-size:0.7rem;}
.fs-6 {font-size:1rem;}
.fs-numeros {font-size:5rem; margin-bottom:0px; line-height:5rem}
.fs-numerosp{font-size:19px; margin-bottom:0px; line-height:21px}
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.7) !important; /* Fondo oscuro con 70% de opacidad */
}
.modal-backdrop.fade{opacity:1}

.custom-col:first-child {
    flex: 0 0 28%;
    max-width: 28%;
}

.custom-col:not(:first-child) {
    flex: 0 0 18%;
    max-width: 18%;
}

.container {width:85%; max-width:85%}
.logo {width:180px}
.header {position:fixed;}
.header ul.desktop li {display:inline-block; list-style:none; text-transform:uppercase; font-size:14px; letter-spacing:-0.01em; font-weight:600}
.header ul.desktop li ul li a{white-space:nowrap}
.header ul.desktop li ul li a:hover {background:#eeeeee; }
.header ul.desktop li ul li span:hover {background:#eeeeee; }
ul.mobile li {display:block; list-style:none; text-transform:uppercase; font-size:14px; letter-spacing:-0.01em; font-weight:600}
img.logopie{max-width:100%}


a {color:#000; text-decoration:none }
.pointer {cursor:pointer}


#carroVOLAN {
    position: fixed;
    top: 0px !important; 
    margin-top: 0px !important;
    z-index: 1000;
    width: 100% !important;
    left: 0  !important;
    margin-left: 0px  !important;
    display: none;
	}

/*LISTAS*/
.autores-foto {height:250px; }
span.lista-boton:hover {background-color:#0097a7  !important}
span.lista-boton:hover a {color:#fff }
span.lista-boton a{font-size:15px; }

.blog_post ul li {    color: #333;
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;}
.blog_post ul li strong{       font-weight: 700;}
.blog_post ul{margin-bottom:10px; padding-left:20px}
.blog_post p {margin-bottom:0px}
.header-buscador {padding-right: 3rem;}
.header-buscador-in {padding-right: 3rem;}

/* NAVEGADOR */


.menu-grande ul {position:relative !important}
.menu-grande ul li {display:block !important}

.menu-opciones {display:block}
.menu-opciones-mobile {display:none}
.menu-logo {justify-content: flex-start;}
.menu-buscador {justify-content: flex-start;padding-bottom:0px}
.col-especial {        flex: 0 0 auto;width: 25%; padding-bottom:0px}
.col-logo {        flex: 0 0 auto;width: 75%; }

 /* Estilo para quitar el borde del botón de hamburguesa al hacer clic */
 .navbar-toggler:focus {
            outline: none;
            box-shadow: none;
        }
        .offcanvas-start {
            width: 250px; /* Ajusta el ancho del offcanvas según sea necesario */
        }
        /* Cambiar el color del botón de hamburguesa a negro */
        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280, 0, 0, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        }
ul.menu li ul {position:absolute; bottom:auto; left:0px; display:none}
ul.menu li:hover ul {display:block}
.navbar-toggler:focus {
            outline: none;
            box-shadow: none;
        }

		ul.menu li {position:relative}


ul.menu li ul li ul {
  position: absolute;
  top: 0;
  left: 100%; /* desplaza el submenú a la derecha del elemento padre */
  display: none !important;
  min-width: 200px; /* opcional: ancho mínimo del menú */
  z-index: 999; /* asegúrate de que esté por encima de otros elementos */
}

ul.menu li ul li:hover > ul {
  display: block !important;
}
ul.menu li ul li ul li {
  display: block !important;
}



  display: block !important;

}

.menu-pc{display:block}
.menu-mobile{display:none}
.buscador-libros{width:160px !important}
.lupa {right:20px; top:10px}
.tornaItem ul{padding:0px; margin-bottom:0px;}
.tornaItem {
    position: absolute;
    bottom: auto;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 1000;
    text-align: left
}

.tornaItem ul {
    display: block;
    border: 1px solid #000;
    border-top: 0;
    max-height: 300px;
    overflow: auto
}

.tornaItem ul li {
    display: block
}

.tornaItem ul li a {
    display: table;
    width: 100%;
    padding: 5px
}

.tornaItem ul li a:hover {
    background: #ddd
}

.tornaItem ul li a span {
    font-size: 14px;
    color: #000;
    padding-top: 5px;
    display: block
}

.tornaItem ul li.cerrar {
    display: block;
    text-align: center;
    background: #eee;
    position: relative
}

.tornaItem ul li.cerrar a {
    display: block;
    padding: 5px;
    font-size: 15px;
    font-weight: 300;
    color: #333
}

.tornaItem ul li a img {
    float: left;
    padding-right: 10px
}

/* HOME */
.container-reducido {width:1000px}
.filtro-foto { filter: brightness(97%)}

/* CAROUSEL HOME */
 .carousel-item {
            transition: transform 0.5s ease, opacity 0.5s ease;
}


.icon-card {
    perspective: 1000px;
    margin-bottom: 30px;
    width: 100%;
    max-width: 400px; /* puedes ajustarlo o eliminarlo */
}

.icon-flip {
    position: relative;
    width: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    cursor: pointer;
    aspect-ratio: 400 / 206; /* relación de aspecto de tu imagen */
}

.icon-card:hover .icon-flip {
    transform: rotateY(180deg);
}

.icon-front, .icon-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

.icon-front {

    color: #000000;

}

.icon-back {
    background-color: #000000;
    color: white;
    transform: rotateY(180deg);
}

.icon-front img,
.icon-back img {
    max-width: 100%;
    height: auto;
    display: block;

}

.icon-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 10px 0 0;
}

.icon-card:hover .icon-front,
.icon-card:hover .icon-back {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.icon-card:hover .icon-back {
    transform: rotateY(180deg) translateY(-5px);
}



/* CAROUSEL AUTORS */
  .carousel-inner-wrapper {
            overflow: hidden;
        }
        .multi-carousel-inner {
            display: flex;
            transition: transform 0.5s ease;
        }
        .multi-carousel-item {
            min-width: 16.66%; /* 100% / 6 items */
            flex: 0 0 16.66%;
        }
   .carousel-inner-wrapper .carousel-control-prev, .carousel-inner-wrapper .carousel-control-next {
            width: 5%;  background-color: #0097a7; /* Color de las flechas */
            width: 40px;
            height: 40px;
            background-size: 100%, 100%;
            border-radius: 50%;
			top:50%; -webkit-transform:translate(0%,-50%);-ms-transform:translate(0%,-50%);transform:translate(0%,-50%);
        }

		.carousel-control-prev-icon{

background-color: #0097a7; border-radius: 50%;width: 40px; padding:10px;
            height: 40px; display:inline-block; background-size:70%
		}
		.carousel-control-next-icon{

background-color: #0097a7; border-radius: 50%;width: 40px; padding:10px;
            height: 40px; display:inline-block; background-size:70%
		}



.h-autores {height:250px; background-size:cover; background-position:center;}


@media (max-width: 1600px) {
.menu-opciones {display:none}
.menu-opciones-mobile {display:block}
.menu-logo {justify-content: center; }
.menu-buscador{justify-content: center; padding-bottom:20px}
.col-especial {        flex: 0 0 auto;width: 100%; padding-bottom:20px}
.col-logo {        flex: 0 0 auto;width: 100%; }
.user-card {top:20px;}
.header-buscador {padding-right: 0rem;}
.header-buscador-in {padding-right: 0rem;}

body {padding-top:0px;  }
.header {position:relative;}

}
@media (max-width: 1400px) {

.container {width:96%; max-width:96%}
}
@media (max-width: 1200px) {
.container-reducido {width:100%}
.multi-carousel-item {  flex: 0 0 33.33333%;            }

        }

@media (max-width: 992px) {
.container {width:100%; max-width:100%}

.h-autores {height:450px; background-size:cover;}
.menu-pc{display:none}
.menu-mobile{display:block}
img.logopie{width:auto}

.buscador-libros{width:280px !important}
.custom-col:first-child {
  flex: 0 0 100%;
        max-width: 100%;
}
.custom-col:not(:first-child) {
  flex: 0 0 100%;
        max-width: 100%;
}

.el_desplegable{background:#222222; color:#ffffff; margin-bottom:20px}
.el_desplegable a{color:#ffffff}

}

@media (max-width: 768px) {
.container {width:100%; max-width:100%}
.multi-carousel-item { flex: 0 0 100%; /* 100% / 2 items */}
.h-autores {height:450px; background-size:cover;}
.fs-mobile {font-size:13px;}
.fs-numeros {font-size:2rem; margin-bottom:0px; line-height:2rem}
.fs-numerosp{font-size:16px; margin-bottom:0px; line-height:17px}
.icon-card {max-width: 100%;}
}

@media (max-width: 640px) {
    #cesta {
         display: block; 
    }
	.fs-proximamente {font-size:0.8rem;}
	.responsive-shadow {
        box-shadow: none !important;
    }
}

@media (max-width: 480px) {
.h-autores {height:250px; background-size:cover;}
.logo {width:130px}
/* FONTS */
.fs-mini {font-size:0.9rem;}

/* LISTAS */
.article-llista h3 a{font-size:16px; }
.article-llista h2 a{font-size:16px; }
span.lista-boton a{font-size:14px !important; }

}