/* Fonts 
***********************************/
@import url('/static/font-roboto/css/roboto.css');
@import url('/static/font-roboto/css/Roboto-Bold.css');
@import url('/static/font-roboto/css/Roboto-Italic.css');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* header */
.header-middle {
    background-color: #fff;
    padding: 0px
}
.header-middle li a {
    color: #333;
}
.header-middle .slogan h2 { color: #CCC; margin-top: 20px;}

/* menu */
.nav > ul > li {
    margin: 0 4px 0 32px;
    font-size: 0.9em;
    list-style-type: square;
    color: #ccc;
}
.nav-list > li > a {
    color: #333;
    font-weight: bold;
}

/* Vars
***********************************/
:root {
    --color1: #000;
    --font1: 'roboto-bold';
    --social-facebook: #3b5998;
    --social-x: #000000;
    --social-linkedin: #0a66c2;
    --social-youtube: #cc181e;
    --social-instagram: #ec0075;
    --social-pinterest: #bd081c;
}

*{
    font-family: 'roboto';
}

/* Social
***********************************/

.social {
    margin: 30px 0 -30px;
    padding: 40px;
    background-color: #ededed;
}
.social {
    margin-top: 0;
}
.social ul {
    text-align: center;
}
.social ul li {
    display: inline-block;
    width: 80px;
    margin-left: -1px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.social ul li i {
    font-size: 25px;
    color: #424242;
}
.social-facebook:hover{
    color: var(--social-facebook);
}
.social-x:hover{
    color: var(--social-x);
}
.social-linkedin:hover{
    color: var(--social-linkedin);
}
.social-youtube:hover{
    color: var(--social-youtube);
}
.social-instagram:hover{
    color: var(--social-instagram);
}

.social-pinterest:hover{
    color: var(--social-pinterest);
}

/* footer*/
.footer-top {
    margin: 0;
    padding: 80px 0 50px;
    background: #333;
}
.footer-blocks li[class*="span"] {
    padding-left: 0;
}
.footer-top h5,
.footer-top a,
.footer-top p,
.footer-top span,
.footer-top li {
    color: #fff;
}
.footer-top h5 {
    margin-top: 0;
    font-size: 16px;
    font-weight: 500;
    color: #999;
    display: block;
    text-decoration: none;
    border-bottom: 1px solid #666;
    line-height: 34px;
}
.footer-top .address p, 
.footer-top .address span,
.footer-top a,
.footer-top ul li {
    font-size: 14px;
    font-weight: 300;
}
.footer-top ul {
    overflow: hidden;
}
.footer-top .nav-footer li {
    width: 100%;
}
.footer-blocks i {
    color: var(--color2);
}
.footer-top .nav-footer a {
    display: block;
    text-decoration: none;
    border-bottom: 1px solid #666;
    font-size: 15px;
    line-height: 34px;
}
.footer-top .nav-footer li:last-child a {
    border: 0;
}
.footer-info {
    display: block;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 0;
    text-align: center;
    font-size: 15px;
    color: #999 !important;
}
footer {
    padding: 15px 0;
    background-color: #ededed;
}
.bottom-banners li {
    width: calc(100% / 8);
    margin-left: 0;
}
.bottom-banners .banner {
    max-width: 126px;
}

/* Responsive
***********************************/
@media(max-width:1100px) {
    .social,
    .footer-top {
        margin-left: -24px !important;
        margin-right: -24px !important;
    }
}

@media(max-width:991px) {
	.five-cols li {
        width: calc(100% / 4);
    }
  	.bottom-banners .banner {
        max-width: 100px;
    }
}

@media(max-width:768px) {
	.five-cols li {
        width: calc(100% / 3);
    }
    .three-cols li {
        width: calc(100% / 2);
    }
  	.social {
        margin: 30px 0 0;
    }
    .social ul li {
        width: 60px;
    }
  .bottom-banners li {
        width: calc(100% / 4);
        margin-left: 0 !important;
    }
    .bottom-banners .banner {
        max-width: 130px;
    }
    .footer-top {
        padding: 50px 0;
        text-align: center;   
    }
    .footer-blocks li[class*="span"] {
        padding: 0;
        margin-bottom: 30px;
    }
    .footer-top .nav-footer a {
        display: inline-block;
    }
    .footer-top .nav-footer a, 
    .footer-top h5 {
        border: 0;
    }
}

@media(max-width:480px) {
	.five-cols li{
       width: calc(100% / 2);
  	}
  	.three-cols li {
        text-align: center;
    }
  	.social ul li {
        width: 50px;
    }
  	footer {
        padding: 15px 0 0;
    }
    .bottom-banners {
        margin-top: 15px;
    }
    .bottom-banners li {
        width: calc(100% / 2);
    }
    .bottom-banners .banner {
        max-width: 135px;
    }
  
}
/* Logo X */
.social .fa.fa-twitter::before {
	display: none;
}
.social ul li:nth-child(2) > a {
	background-image: url('/media/agandincul/images/logo-x-gray.png');
  	height: 19px;
    width: 20px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all 0.4s;
    display: block;
    margin: 0 auto;
}
.social ul li:nth-child(2) > a:hover {
	background-image: url('/media/agandincul/images/logo-x-black.png');
}


.book-price{
    font-size: 15px;
}
/* Layout interno flexible y adaptativo */
/* Layout interno flexible y adaptativo con centrado vertical */
.book-inner-flex {
    display: flex;
    align-items: stretch; /* Mantiene las columnas con la misma altura */
    gap: 1px; 
}

.book-cover-wrapper {
    flex: 0 0 auto; 
    max-width: 45%;
    display: flex; /* Necesario para centrar el contenido interno */
    flex-direction: column;
}

.book-cover-link {
    display: flex;
    flex-direction: column;
    justify-content: center; /* CENTRADO VERTICAL: Mueve la imagen al centro si el texto es muy largo */
    align-items: center;    /* CENTRADO HORIZONTAL: Por si el contenedor es más ancho que la imagen */
    height: 100%;
    width: 100%;
}

.book-cover {
    height: 100%;
    width: auto; 
    max-height: 100%; /* Asegura que no desborde */
    object-fit: contain;
    object-position: center center; /* CENTRADO INTERNO: Alinea la imagen en el centro del canvas */
    display: block;
}

.book-content {
    flex: 1;
    min-width: 0;
}

/* Fallback responsive */
@media (max-width: 767px) {
    .book-inner-flex {
        flex-direction: column;
        align-items: center; /* Centra todo el bloque en móvil */
    }
    .book-cover-wrapper {
        max-width: 100%;
        margin-bottom: 15px;
    }
}

.add_cart{
    margin: 0;
    display: inline-block;
}

.book-price {
    display: flex;
    justify-content: space-between; /* Empuja el precio a la izquierda y el botón a la derecha */
    align-items: center;           /* Alinea verticalmente ambos elementos */
    width: 100%;
    margin-top: 10px;
}

.share-link-x {
    display: flex;         
    align-items: center;    
    text-decoration: none;          
}

.x-link-square {
    background: url('../images/logo_x_square.png') no-repeat;
    padding-left: 35px;
}


.x-link-square-white {
    background: url('../images/logo_x_square_white.png') no-repeat;
    padding-left: 35px;

}
.fa-facebook-square:before{
    padding: 0px;
}
.fa-whatsapp:before{
    padding: 0px;
}

.header-top-nav>li a {

font-size: 14px;

}

dd, dt, li {

line-height: 25px;

}

.header-top {

background-color: #000000;

color: #000000;

}

.header-top-nav>li a i{

color: #ffa544;

}

.header-top-nav>li a:hover{

color: #ffa544;

}

a {

color: #000000;

}

a:hover {

color: #0b9b96;

}

.main-menu .nav>li>a:hover, .main-menu .nav>li>a:focus, .main-menu .nav>li>a.selected {

background-color: rgba(0, 0, 0, 0);

color: inherit;

border-bottom-style: solid;

border-bottom-width: 3px;

border-bottom-color: #0b9b96;

}



.nav-pills>li>a {

color: #333;

padding: 14px 12px 14px;

font-size: 16px;

font-weight: 600;

letter-spacing: .8px;

}



.fa-cart-plus:before {

content: "\f07a";

}

.btn-primary {

color: #fff;

text-shadow: none;

background-color: #0b9b96;

border: 1px solid #0b9b96;

background-image: none;

}

.cart-actions .btn {

margin-left: 8px;

color: #000000;

}



.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {

color: #fff;

text-shadow: none;

background-color: #0b9b96a6;

border: 1px solid #0b9b96a6;

background-image: none;

}

.shopping-steps.nav-pills>.active b, .shopping-steps.nav-pills>li>a:hover b {

background-color: #0b9b96;

}

#slides .slidesjs-pagination-item a.active {

border: 1px solid #0b9b96;

background: #0b9b96;

}

.goToPrevSlide:hover, .goToNextSlide:hover {

color: #0b9b96;

}

.image-logo{
	height: auto !important; 
}


/* 1. El contenedor que envuelve TODA la fila del footer (logos + textos) */
.footer-row, .footer-inner { 
    display: flex;
    align-items: center;      /* <--- ESTO centra verticalmente los logos con los textos */
    justify-content: space-between; 
    flex-wrap: wrap;
    padding: 30px 0;
}

/* 2. La lista de logos */
.footer-logos {
    display: flex;
    flex-direction: column;   /* Uno sobre otro */
    justify-content: center;  /* Centra los logos internamente si hay espacio */
    align-items: flex-start;  /* Mantiene la línea roja a la izquierda que querías */
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 3. Ajuste para el logo vertical (Agandincul) */
.logo-vertical {       /* Limitamos la altura para que el centrado luzca mejor */
    width: auto;
    display: block;
}