@font-face {
    font-family: 'Montserrat-Bold';
    src: url(../fuentes/Montserrat/Montserrat-Bold.ttf) format('truetype');
}

@font-face {
    font-family: 'Montserrat-Medium';
    src: url(../fuentes/Montserrat/Montserrat-Medium.ttf) format('truetype');
}

@font-face {
    font-family: 'Montserrat-Light';
    src: url(../fuentes/Montserrat/Montserrat-Light.ttf) format('truetype');
}

@font-face {
    font-family: 'Merriweather-Bold';
    src: url(../fuentes/Merriweather/Merriweather-Bold.ttf) format('truetype');
}

@font-face {
    font-family: 'Merriweather-Light';
    src: url(../fuentes/Merriweather/Merriweather-Light.ttf) format('truetype');
}

@font-face {
    font-family: 'Merriweather-Medium';
    src: url(../fuentes/Merriweather/Merriweather-Medium.ttf) format('truetype');
}

@font-face {
    font-family: 'Italic';
    src: url(../fuentes/Italic/lucida-calligraphy-italic.ttf) format('truetype');
}

:root {
    /*################ TIPOGRAFIA DE TEXTO ################*/
    /*################ TIPOGRAFIA DE TEXTO ################*/
    --fs-h1: clamp(1.375rem, 1.6vw + 1rem, 3.75rem);
    --fs-h2: clamp(1.25rem, 1.5vw + 0.75rem, 3rem);
    --fs-h3: clamp(1.125rem, 1.4vw + 0.5rem, 2.25rem);
    --fs-h4: clamp(1rem, 1.2vw + 0.25rem, 1.75rem);
    --fs-big-body: clamp(0.95rem, 1vw + 0.65rem, 1.45rem);
    --fs-body: clamp(0.95rem, 1vw + 0.5rem, 1.5rem);
    --fs-small-md: clamp(0.90rem, 0.85vw + 0.35rem, 1.3rem);
    --fs-md: clamp(0.925rem, 0.9vw + 0.4rem, 1.4rem);
    --fs-small: clamp(0.875rem, 0.8vw + 0.25rem, 1.2rem);
    --fs-xs: clamp(0.75rem, 0.6vw + 0.2rem, 1rem);

    /*################ NEGRILLA AL TEXTO ################*/
    /*################ NEGRILLA AL TEXTO ################*/
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    /*################## MARGENES ##################*/
    /*################## MARGENES ##################*/
    --mb-1: .5rem;
    --mb-2: 1rem;
    --mb-3: 1.5rem;
    --mb-4: 2rem;
    --mb-5: 2.5rem;
    --mb-6: 3rem;
    /*################## z-index ##################*/
    /*################## z-index ##################*/
    --toolkid: 100;
    --index-1: 10;
    --index-2: 30;
    --index-3: 60;
    --index-4: 90;

    /*######## Color Fondo Principal ########*/
    /*######## Color Fondo Principal ########*/
    --body-color: #ebeff1;
    /*######## Colores Segundarios ########*/
    /*######## Colores Segundarios ########*/
    --color-principal: #3e4a61;
    --color-segundario: #4e6b50;
    --color-terciario: #009100;
}

/*########################## PÁGINA PRINCIPAL ##########################*/
/*########################## PÁGINA PRINCIPAL ##########################*/
/*########################## PÁGINA PRINCIPAL ##########################*/
/*########################## PÁGINA PRINCIPAL ##########################*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-style: normal;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


body {
    background: var(--body-color);
    overflow-x: hidden;
}

.animate-item {
    opacity: 0;
    visibility: hidden;
}

.animate-item.is-animated {
    opacity: 1;
    visibility: visible;
}

a {
    text-decoration: none;
    color: white;
    font-family: 'Montserrat-Bold';
}

ul {
    list-style: none;
}

.section-banner-book-collection {
    min-height: 40vh;
    background-image: url(/img/fondos/background-book.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-banner-book-collection .detail-collection h2 {
    font-size: var(--fs-h1);
    font-family: 'Montserrat-Bold';
    color: white;
}

.section-general-description {
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 1rem 0rem 0rem 0rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*###################### ESTILO MEER MEGAZINE ######################*/
/*###################### ESTILO MEER MEGAZINE ######################*/
/*###################### ESTILO MEER MEGAZINE ######################*/
/*###################### ESTILO MEER MEGAZINE ######################*/

.section-general-description .container-description {
    width: 80%;
}

.section-general-description .container-description .title-description {
    font-size: var(--fs-h3);
    font-family: 'Montserrat-Bold';
    padding-bottom: 8px;
}

/*####### ESTILOS PRIMER PARRAFO #######*/
/*####### ESTILOS PRIMER PARRAFO #######*/
.section-general-description .container-description p {
    font-size: var(--fs-body);
    line-height: 1.65;
}

.section-general-description .container-description p em {
    font-style: italic;
    font-size: var(--fs-big-body);
}

/*####### ESTILOS DE LOS LINKS #######*/
.section-general-description .container-description .meer-links {
    margin-top: 20px;
    width: 100%;
}

/* LINK COMO TARJETA INDEPENDIENTE */
.section-general-description .container-description .meer-links a {
    position: relative;
    display: block;
    padding: 12px 14px 12px 36px;
    margin-bottom: 12px;
    background-color: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 6px;
    font-size: var(--fs-small);
    font-weight: 500;
    color: #1f3a5f;
    text-decoration: none;
    word-break: break-word;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.section-general-description .container-description .meer-links a::before {
    content: "🔗";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    opacity: 0.6;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.section-general-description .container-description .meer-links a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    border-color: var(--color-segundario);
    color: var(--color-segundario);
}

.section-general-description .container-description .meer-links a:hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.section-general-description .container-description .meer-links a:last-child {
    margin-bottom: 0;
}

/*####### ESTILOS SEGUNDO PARRAFO #######*/
/*####### ESTILOS SEGUNDO PARRAFO #######*/
.section-general-description .meer-profile-editorial {
    margin-top: 30px;
    width: 80%;
}

.meer-profile-editorial .meer-photo-float {
    float: left;
    width: 300px;
    margin: 0 20px 10px 0;
}

.meer-profile-editorial p {
    font-size: var(--fs-body);
    line-height: 1.65;
}

.meer-profile-editorial p em {
    font-style: italic;
    font-size: var(--fs-big-body);
}

.meer-profile-editorial .meer-profile-editorial::after {
    content: "";
    display: block;
    clear: both;
}

/*###################### ESTILO DESCRIPCION ABL ######################*/
/*###################### ESTILO DESCRIPCION ABL ######################*/
/*###################### ESTILO DESCRIPCION ABL ######################*/
/*###################### ESTILO DESCRIPCION ABL ######################*/
.section-general-description .container-abl {
    width: 80%;
}

.section-general-description .container-abl .title-mbl {
    font-size: var(--fs-h1);
    font-family: 'Montserrat-Bold';
    padding-bottom: var(--mb-1);
}

.section-general-description .container-abl .title-mbl i {
    font-style: italic;
}

.container-abl .abl-float {
    float: left;
    width: 360px;
    margin: 15px 20px 10px 0px;
}

.container-abl .float-center {
    width: 100%;
    object-fit: cover;
    margin: 0 auto;
}

.container-abl .abl-float-vertical {
    float: left;
    width: 680px;
    margin: 15px 20px 10px 0px;
}

.container-abl p {
    font-size: var(--fs-body);
    line-height: 1.65;
}

.container-abl p em {
    font-style: italic;
    font-size: var(--fs-big-body);
}

/*####### ESTILOS DE LOS LINKS #######*/
.section-general-description .container-abl .links-float {
    margin-top: 20px;
    overflow: hidden;
}

/* LINK COMO TARJETA INDEPENDIENTE */
.section-general-description .container-abl .links-float a {
    position: relative;
    display: block;
    padding: 12px 14px 12px 36px;
    margin-bottom: 12px;
    background-color: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 6px;
    font-size: var(--fs-small);
    font-weight: 500;
    color: #1f3a5f;
    text-decoration: none;
    word-break: break-word;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.section-general-description .container-abl .links-float a::before {
    content: "🔗";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    opacity: 0.6;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.section-general-description .container-abl .links-float a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    border-color: var(--color-segundario);
    color: var(--color-segundario);
}

.section-general-description .container-abl .links-float a:hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

/*####### ESTILOS LINK INDEPENDIENTE #######*/
/*####### ESTILOS LINK INDEPENDIENTE #######*/
/*####### ESTILOS LINK INDEPENDIENTE #######*/
/*####### ESTILOS LINK INDEPENDIENTE #######*/
/*####### ESTILOS DE LOS LINKS #######*/
.links-float {
    margin-top: 20px;
    overflow: hidden;
}

/* LINK COMO TARJETA INDEPENDIENTE */
.links-float a {
    position: relative;
    display: block;
    padding: 12px 14px 12px 36px;
    margin-bottom: 12px;
    background-color: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 6px;
    font-size: var(--fs-small);
    font-weight: 500;
    color: #1f3a5f;
    text-decoration: none;
    word-break: break-word;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.links-float a::before {
    content: "🔗";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    opacity: 0.6;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.links-float a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    border-color: var(--color-segundario);
    color: var(--color-segundario);
}

.links-float a:hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}



/*####### ESTILOS DE LOS LINKS #######*/
.section-general-description .container-abl .links {
    margin-top: 20px;
    width: 100%;
}

/* LINK COMO TARJETA INDEPENDIENTE */
.section-general-description .container-abl .links a {
    position: relative;
    display: block;
    padding: 12px 14px 12px 36px;
    margin-bottom: 12px;
    background-color: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 6px;
    font-size: var(--fs-small);
    font-weight: 500;
    color: #1f3a5f;
    text-decoration: none;
    word-break: break-word;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.section-general-description .container-abl .links a::before {
    content: "🔗";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    opacity: 0.6;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.section-general-description .container-abl .links a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    border-color: var(--color-segundario);
    color: var(--color-segundario);
}

.section-general-description .container-abl .links a:hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.section-general-description .container-description .links a:last-child {
    margin-bottom: 0;
}

/*###################### ESTILO CATEGORIA ######################*/
/*###################### ESTILO CATEGORIA ######################*/
/*###################### ESTILO CATEGORIA ######################*/
/*###################### ESTILO CATEGORIA ######################*/
.section-book-category {
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 1rem 0rem 3rem 0rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section-book-category .content-category {
    width: 94%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 28px;
    row-gap: 28px;
    padding-top: 24px;
}

p i {
    font-style: italic;
    transform: skewX(-10deg);
}


p strong {
    font-weight: bold;
}

.no-data {
    /* Tamaño y peso para legibilidad */
    font-size: 1.55rem;
    /* Aprox 20px, más grande que el estándar */
    font-weight: 500;

    /* Alineación y espaciado */
    text-align: center;
    padding: 3rem 1rem;
    /* Espacio generoso arriba y abajo */
    margin: 2rem 0;

    /* Colores y fondo */
    color: #806b6b;
    /* Gris medio para no ser agresivo */
    border: 1px dashed #d1d5db;
    /* Borde discontinuo típico de zonas vacías */
    border-radius: 8px;
}

/*########## ESTILO CARD VERTICAL ##########*/
/*########## ESTILO CARD VERTICAL ##########*/
.content-category .card-book-vertical {
    background-color: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    width: 760px;
    display: flex;
    column-gap: 20px;
    padding: 14px;
    border-radius: 12px;
}

.content-category .card-book-vertical picture {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content-category .card-book-vertical picture img {
    width: 100%;
    border-radius: 6px;
}

.content-category .card-book-vertical .detail-interest-also {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content-category .card-book-vertical .detail-interest-also p {
    font-family: 'Merriweather-Medium';
    text-align: left;
    font-size: var(--fs-small-md);
    font-weight: var(--fw-light);
    height: auto !important;
    padding: 6px 0px;
    width: 100%;
    line-height: 1.5;
}

.content-category .card-book-vertical .detail-interest-also ul {
    width: 100%;
    font-family: 'Merriweather-Medium';
    font-size: var(--fs-small);
    padding: 16px 0px;
}


.content-category .card-book-vertical .detail-interest-also a {
    background-color: var(--color-segundario);
    border: 0;
    border-radius: 5px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
    color: #ffffff;
    font-size: var(--fs-body);
    font-family: 'Montserrat-Medium';
    padding: 6px 20px;
    cursor: pointer;
    transition: .5s;
    margin: 14px 0px 10px 0px;
}


/*########## ESTILO CARD HORIZONTAL ##########*/
/*########## ESTILO CARD HORIZONTAL ##########*/
.content-category .card-book-horizontal {
    background-color: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    width: 840px;
    display: flex;
    align-items: center;
    column-gap: 20px;
    padding: 14px;
    border-radius: 12px;
}

.content-category .card-book-horizontal picture {
    width: 50%;
}

.content-category .card-book-horizontal picture img {
    width: 100%;
    border-radius: 6px;
}

.content-category .card-book-horizontal .detail-interest-also {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content-category .card-book-horizontal .detail-interest-also p {
    font-family: 'Merriweather-Medium';
    text-align: left;
    font-size: var(--fs-small-md);
    font-weight: var(--fw-regular);
    height: auto !important;
    padding: 7px 0px;
    width: 100%;
    line-height: 1.5;
}

.content-category .card-book-horizontal .detail-interest-also ul {
    width: 100%;
    font-family: 'Merriweather-Medium';
    font-size: var(--fs-small);
    padding: 7px 0px;
}

.content-category .card-book-horizontal .detail-interest-also a {
    background-color: var(--color-segundario);
    border: 0;
    border-radius: 5px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
    color: #ffffff;
    font-size: var(--fs-body);
    font-family: 'Montserrat-Medium';
    padding: 6px 20px;
    cursor: pointer;
    transition: .5s;
    margin: 14px 0px 10px 0px;
}

/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
/*#################### SECCION DEL DISEÑO RESPONSIVO ####################*/
@media (max-width: 1919px) {

    /*###################### ESTILO CATEGORIA ######################*/
    /*###################### ESTILO CATEGORIA ######################*/
    .section-book-category .content-category {
        width: 100%;
        column-gap: 28px;
        row-gap: 28px;
        padding-top: 14px;
    }

    /*########## ESTILO CARD VERTICAL ##########*/
    /*########## ESTILO CARD VERTICAL ##########*/
    .content-category .card-book-vertical {
        width: 680px;
    }

    /*########## ESTILO CARD HORIZONTAL ##########*/
    /*########## ESTILO CARD HORIZONTAL ##########*/
    .content-category .card-book-horizontal {
        width: 680px;
    }
}


@media (max-width: 1439px) {

    /*###################### ESTILO DESCRIPCION ABL ######################*/
    /*###################### ESTILO DESCRIPCION ABL ######################*/
    .container-abl .abl-float-vertical {
        width: 380px;
    }

    /*###################### ESTILO CATEGORIA ######################*/
    /*###################### ESTILO CATEGORIA ######################*/
    .section-book-category .content-category {
        column-gap: 28px;
        row-gap: 28px;
        padding-top: 14px;
    }

    /*########## ESTILO CARD VERTICAL ##########*/
    /*########## ESTILO CARD VERTICAL ##########*/
    .content-category .card-book-vertical {
        width: 580px;
    }

    /*########## ESTILO CARD HORIZONTAL ##########*/
    /*########## ESTILO CARD HORIZONTAL ##########*/
    .content-category .card-book-horizontal {
        width: 580px;
    }
}


@media (max-width: 1023px) {

    /*###################### ESTILOS DEL BANNER ######################*/
    /*###################### ESTILOS DEL BANNER ######################*/
    .section-banner-book-collection {
        min-height: 30vh;
    }

    /*###################### ESTILO DESCRIPCION ABL ######################*/
    /*###################### ESTILO DESCRIPCION ABL ######################*/
    .container-abl .abl-float {
        width: 300px;
    }

    .container-abl .abl-float-vertical {
        width: 340px;
    }

    /*###################### ESTILO CATEGORIA ######################*/
    /*###################### ESTILO CATEGORIA ######################*/
    .section-book-category .content-category {
        column-gap: 0px;
        row-gap: 20px;
        padding-top: 4px;
    }

    /*########## ESTILO CARD VERTICAL ##########*/
    /*########## ESTILO CARD VERTICAL ##########*/
    .content-category .card-book-vertical {
        width: 600px;
    }

    /*########## ESTILO CARD HORIZONTAL ##########*/
    /*########## ESTILO CARD HORIZONTAL ##########*/
    .content-category .card-book-horizontal {
        width: 600px;
    }
}


@media (max-width: 767px) {

    /*###################### ESTILO MEER MEGAZINE ######################*/
    /*###################### ESTILO MEER MEGAZINE ######################*/
    .section-general-description .container-description {
        width: 94%;
    }

    .section-general-description .meer-profile-editorial {
        margin-top: 20px;
        width: 94%;
    }

    .section-general-description .container-abl {
        width: 94%;
    }

    /*########## ESTILO CARD VERTICAL ##########*/
    /*########## ESTILO CARD VERTICAL ##########*/
    .content-category .card-book-vertical {
        width: 540px;
    }

    /*########## ESTILO CARD HORIZONTAL ##########*/
    /*########## ESTILO CARD HORIZONTAL ##########*/
    .content-category .card-book-horizontal {
        width: 540px;
    }
}


@media (max-width: 599px) {

    /*###################### ESTILOS DEL BANNER ######################*/
    /*###################### ESTILOS DEL BANNER ######################*/
    .section-banner-book-collection {
        min-height: 26vh;
    }

    /*###################### ESTILO MEER MEGAZINE ######################*/
    /*###################### ESTILO MEER MEGAZINE ######################*/
    .section-general-description .container-description {
        width: 100%;
    }

    .section-general-description .meer-profile-editorial {
        margin-top: 20px;
        width: 100%;
    }

    .meer-profile-editorial .meer-photo-float {
        width: 240px;
        margin: 0 20px 0px 0;
    }

    .section-general-description .container-abl {
        width: 100%;
    }

    .container-abl .abl-float {
        width: 220px;
    }

    .container-abl .abl-float-vertical {
        width: 280px;
    }
}


@media (max-width: 511px) {

    /*###################### ESTILOS DEL BANNER ######################*/
    /*###################### ESTILOS DEL BANNER ######################*/
    .section-banner-book-collection {
        min-height: 20vh;
    }

    .section-banner-book-collection .detail-collection h2 {
        padding: 0px 20px;
        text-align: center;
    }

    /*###################### ESTILO MEER MEGAZINE ######################*/
    /*###################### ESTILO MEER MEGAZINE ######################*/
    .section-general-description .container-description {
        width: 90%;
    }

    .section-general-description .meer-profile-editorial {
        margin-top: 20px;
        width: 90%;
    }

    .meer-profile-editorial .meer-photo-float {
        width: 180px;
        margin: 0 20px -6px 0;
    }

    .section-general-description .container-abl {
        width: 90%;
    }

    .container-abl .abl-float {
        width: 180px;
    }

    .container-abl .abl-float-vertical {
        width: 220px;
    }

    /*###################### ESTILO CATEGORIA ######################*/
    /*###################### ESTILO CATEGORIA ######################*/
    .section-book-category .content-category {
        row-gap: 14px;
    }

    /*########## ESTILO CARD VERTICAL ##########*/
    /*########## ESTILO CARD VERTICAL ##########*/
    .content-category .card-book-vertical {
        width: 360px;
        flex-direction: column;
    }

    .content-category .card-book-vertical picture {
        width: 100%;
    }

    .content-category .card-book-vertical .detail-interest-also {
        width: 100%;
    }

    .content-category .card-book-vertical .detail-interest-also p {
        padding: 4px 0px;
    }

    .content-category .card-book-vertical .detail-interest-also ul {
        padding: 4px 0px;
    }

    /*########## ESTILO CARD HORIZONTAL ##########*/
    /*########## ESTILO CARD HORIZONTAL ##########*/
    .content-category .card-book-horizontal {
        width: 360px;
        flex-direction: column;
    }

    .content-category .card-book-horizontal picture {
        width: 100%;
    }

    .content-category .card-book-horizontal .detail-interest-also {
        width: 100%;
    }

    .content-category .card-book-horizontal .detail-interest-also p {
        padding: 3px 0px;
    }

    .content-category .card-book-horizontal .detail-interest-also ul {
        padding: 4px 0px;
    }
}


@media (max-width: 424px) {

    /*###################### ESTILO MEER MEGAZINE ######################*/
    /*###################### ESTILO MEER MEGAZINE ######################*/
    .section-general-description .container-description {
        width: 98%;
    }

    .section-general-description .meer-profile-editorial {
        margin-top: 20px;
        width: 98%;
    }

    .meer-profile-editorial .meer-photo-float {
        float: none;
        width: 100%;
        margin: 0 20px 10px 0;
    }

    .section-general-description .container-abl {
        width: 94%;
    }

    .container-abl .abl-float {
        width: 100%;
        float: none;
    }

    .container-abl .abl-float-vertical {
        width: 100%;
        float: none;
    }

    /*########## ESTILO CARD VERTICAL ##########*/
    /*########## ESTILO CARD VERTICAL ##########*/
    .content-category .card-book-vertical {
        width: 320px;
        flex-direction: column;
    }

    /*########## ESTILO CARD HORIZONTAL ##########*/
    /*########## ESTILO CARD HORIZONTAL ##########*/
    .content-category .card-book-horizontal {
        width: 320px;
        flex-direction: column;
    }
}

@media (max-width: 374px) {

    /*###################### ESTILOS DEL BANNER ######################*/
    /*###################### ESTILOS DEL BANNER ######################*/
    .section-banner-book-collection .detail-collection h2 {
        padding: 0px 10px;
    }
}