/* 2007-2023 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/OSL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <contact@prestashop.com>
 * @copyright 2007-2023 PrestaShop SA
 * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
 * International Registered Trademark & Property of PrestaShop SA
 */
.block.blog_block .block_content.products-block ul li .products-block-image {
    width: 79px;
    overflow: hidden;
    display: block;
    height: 63px
}

.block.blog_block .block_content.products-block ul li .products-block-image img {
    max-width: none
}

.block.blog_block .block_content.products-block ul li h5 a {
    font-size: 1.5rem
}

.blog_block.blog_search .block_content .form-control {
    height: 46px;
    padding: 3px 15px;
    margin-bottom: 10px
}

.blog_post_content p.meta_author,
.blog_post_content p.meta_date {
    display: inline-block;
    padding-right: 10px
}

.blog_post_content p.meta_category {
    display: inline-block;
    vertical-align: middle;
}

.blog_post_content a.more {
    float: right
}

.home_blog_post h3.page-heading {
    margin-bottom: 5px
}

.arrow_carrot-right:before {
    content: ">"
}

.arrow_carrot-left:before {
    content: "<"
}

.home_blog_post .post_thumbnail .post_format_items {
    padding-bottom: 52%
}

.badblog_img,
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto

}

.badblog-archive-image img {
    width: 100%
}

.home_blog_post .post_thumbnail .post_format_items {
    padding-bottom: 0
}

.post_thumbnail {
    margin-bottom: 1.5rem
}

.badhomeblog-item-user~span {
    margin: 0 10px;
}

#module-badblog-single .form-control {
    background: #ffffff;
    color: #000000;
    padding: 14px 15px;
    width: 100%;
    border: 1px solid #e5e5e5;
}

#badblogs_commentfrom .badblog_submit_btn {
    color: #fff;
    background-color: var(--theme-custom-color);
    display: inline-block;
    vertical-align: middle;
    padding: 10px 20px;
    font-size: 16px;
    letter-spacing: 1px;
}

.post_content {
    padding-top: 30px
}

.meta_author,
.meta_category,
.meta_comment,
.post_meta_date {
    display: inline-block
}

.content_more {
    display: inline-block;
    float: right;
    margin-right: 70px
}

.comments_area {
    margin-bottom: 30px
}

.comments_area .comments_title {
    margin-bottom: 0;
    font-size: 22px;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
}

.comments_area ol.comment_list {
    margin: 0;
}

.comments_area .comment_list li {
    margin-top: 30px;
}

.comments_area .comment_list li article.comment_body {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid #e5e5e5;
}

.comment_content .comment_content_bottom p {
    margin-bottom: 0
}

.comments_area .comment_list li.comment .comment_body .comment_author {
    width: 70px;
    border-radius: 100%;
    float: left;
    overflow: hidden;
    margin: 15px;
}

.comments_area .comment_list li.comment .comment_body .comment_content {
    overflow: hidden;
    padding: 23px 20px;
    border-left: 1px solid #e5e5e5;
    width: 89%;
}

.comments_area .comment_list li.comment .comment_body .comment_content .comment_meta {
    margin-bottom: 10px
}

.comments_area .comment_list li.comment .comment_body .comment_content .comment_meta .comment_meta_author {
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
    font-size: 1.4rem
}

.comments_area .comment_list li.comment .comment_body .comment_content .comment_meta .comment_meta_date {
    font-size: 1.2rem;
    display: inline-block;
    vertical-align: middle
}

.comments_area .comment_list li.comment .comment_body .comment_content .comment_meta .reply {
    float: right;
    display: none
}

.comments_area .comment_list li.comment ol.children {
    margin-left: 30px
}

.comment_respond {
    background-color: #ffffff;
    margin-bottom: 30px;
}

.comment_respond .comment_form .form-group {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.comment_respond .comment_form .form-group.badblogs_message {
    margin: 0;
}

.comment_respond .comment_form .form-group.badblogs_message span.badblogs_success {
    margin-bottom: 15px;
    color: #ff0000;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    display: block;
    text-align: center;
}

.comment_respond .comment_form .form-group.has-error .form-control {
    border-color: #000
}

.block.blog_block .block_content.products-block ul li {
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px
}

.block.blog_block .block_content.products-block ul li .products-block-image {
    width: 80px;
    height: 92px;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    display: block
}

.block.blog_block .block_content.products-block ul li .products-block-image img {
    max-width: none;
    margin-left: -50%
}

.block.blog_block .block_content.products-block ul li .price-box {
    color: #9b9b9b
}

.block.blog_block .block_content.products-block ul li:last-child {
    border-bottom: 0
}

.tags_block.block .block_content ul {
    margin: 0 -5px;
    padding: 0;
    list-style: none
}

.tags_block.block .block_content ul li {
    display: block;
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px
}

.tags_block.block .block_content ul li a {
    display: block;
    text-align: center;
    padding: 5px 10px;
    border: 1px solid #e5e5e5;
    transition: all .3s ease
}

.tags_block.block .block_content ul li a:hover {
    color: #fff;
    background-color: #666;
    border-color: #e5e5e5;
}

.comment_respond .comment_reply_title {
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
}

.badblog-single-block {
    margin-bottom: 30px
}

.badblog-single-content-item-title {
    padding-left: 3.125rem;
    padding-right: 3.125rem;
    padding-top: 1.56rem;
    padding-bottom: 1.56rem;
    font-size: 2.125rem;
    text-align: center;
}

.badblog-single-author-comment-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px
}

.badblog-single-author span,
.badblog-single-category span,
.badblog-single-comment span {
    padding-right: 5px;
    font-size: 14px;
    color: #999;
    font-weight: 400
}

.badblog-single-category span {
    color: #000
}

.badblog-single-category i {
    font-size: 14px;
    color: #999;
    padding: 0 5px;
    font-weight: 400
}

.badblog-single-content-description {
    font-size: 16px;
    color: #212529 !important;
    text-align: justify;
    margin-left: 20px;
    margin-right: 20px;
    line-height: 24px
}

.comments_area {
    background-color: #ffffff;
    margin-bottom: 30px;
}

.badblog-archive-item {
    margin-bottom: 30px;
}

.badblog-archive-item-inner {
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
}

.badblog-archive-content-title {
    margin-bottom: 0
}

.badblog-archive-content-wrapper {
    padding: 15px;
}

.badblog-archive-content-title a {
    font-size: 18px;
    color: #111;
    margin-bottom: 10px;
    display: block;
    text-transform: capitalize;
    font-weight: 500;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.badblog-archive-meta-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 10px
}

.badblog-archive-author span,
.badblog-archive-comment,
.badblog-archive-date {
    font-size: 14px;
    color: #999;
    font-weight: 500;
}

.badblog-archive-description {
    font-size: 14px;
    color: #666666;
    font-weight: 400;
    margin: 0;
    line-height: 24px;
    padding-bottom: 10px
}

.badblog-archive-read-more a {
    font-size: 16px;
    color: #111;
    font-weight: 500;
    text-transform: capitalize
}

.badblog-archive-pagination-list li {
    font-size: 16px;
    color: #333;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center
}

.badblog-archive-pagination-list li i {
    line-height: 20px
}

.badblog-archive-pagination-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
    margin: 0
}

.badblog-archive-pagination-content {
    background-color: #ffffff;
    padding: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 1px solid #e5e5e5;
}

.badblog-archive-title {
    text-align: left;
}

@media(max-width:767px) {
    .badblog-single-content-item-content {
        padding: 15px
    }

    .badblog-archive-pagination-content {
        display: block;
        padding: 15px;
    }

    .badblog-archive-title {
        padding-bottom: 15px;
        text-align: center;
    }

    .badblog-archive-pagination-list {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .badblog-archive-author span,
    .badblog-archive-comment,
    .badblog-archive-date,
    .badblog-archive-description {
        font-size: 12px
    }
}

/* === ESTILOS ANTIGUOS PARA EL BLOG EN HOME (REVISAR/ELIMINAR SI SE USA LA NUEVA ESTRUCTURA GRID) === */
.badhomeblog-block {
    position: relative;
    padding: 100px 0;
    /* Considera si este padding general sigue siendo adecuado con el nuevo diseño grid */
    margin-bottom: 100px;
    /* Considera si este margen sigue siendo adecuado */
    background-color: #f5f6f5;
    /* Este fondo se aplicará a todo el bloque del blog */
}

/* Si ya no usas Owl Carousel para el blog en home, estas reglas de .owl-dots y .owl-item pueden no ser necesarias aquí */
.badhomeblog-block .owl-dots {
    display: none
}

.badhomeblog-link {
    /* Estilo para un posible enlace "Ver todo el blog" */
    padding-right: 15px;
    text-align: right;
}

/* Las siguientes reglas .badhomeblog-item-* eran para el diseño de carrusel.
   Si has cambiado a .custom-blog-grid-item, estas reglas específicas para
   .badhomeblog-item, .badhomeblog-item-wrapper, .badhomeblog-item-inner,
   .badhomeblog-item-thumbnail, .badhomeblog-item-bottom, etc.,
   probablemente necesiten ser eliminadas o comentadas para evitar conflictos. */
.badhomeblog-item {
    padding: 0 15px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

.badhomeblog-item-inner {
    padding: 0;
    width: 50%;
    /* Esto era para el layout de 2 columnas dentro del item del carrusel */
    z-index: 2;
}

.badhomeblog-item-wrapper {
    display: flex;
    /* Esto era para alinear imagen y texto horizontalmente */
    align-items: center;
    background-color: #fff;
    padding: 20px 15px;
    overflow: hidden;
}

.badhomeblog-item-thumbnail .badhomeblog-item-date {
    font-size: 18px;
    line-height: 20px;
    color: #fff;
    letter-spacing: 0;
    font-weight: 600;
    padding: 8px 12px 10px;
    z-index: 10;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    background-color: #2c3a7c;
    text-align: center;
    bottom: -56px;
    left: 0;
}

.badhomeblog-item-thumbnail .badhomeblog-item-date span {
    font-size: 12px;
    line-height: 14px;
}

.badhomeblog-item-bottom .badhomeblog-item-title a {
    font-size: 20px;
    line-height: 30px;
    color: #2d2d2d;
    font-weight: 700;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    position: relative;
    text-transform: capitalize;
    margin-bottom: 5px;
}

.badhomeblog-item-user span,
.badhomeblog-item-date {
    /* Conflicto potencial con .custom-blog-item-date */
    font-size: 16px;
    letter-spacing: 0px;
    line-height: 35px;
    color: #878787;
    font-weight: 400;
    text-transform: uppercase;
    display: inline-block;
    padding-right: 10px;
}

.badhomeblog-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.badhomeblog-main-title .badmain-title-wrapper .badmain-title {
    /* Estilo del título principal "Nuestro Blog" */
    margin-bottom: 30px;
}

.badhomeblog-item-content p {
    font-size: 14px;
    line-height: 26px;
    color: #6a6868;
    font-weight: 500;
    text-transform: capitalize;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 20px;
    font-family: var(--badtheme-font-name-1);
}

.badhomeblog-item-content-more a {
    font-size: 14px;
    color: var(--theme-custom-color);
    line-height: 30px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: underline;
}

.badhomeblog-item-content-more a:after {
    display: none;
}

.badhomeblog-item-content-more a:hover,
.badhomeblog-item-content-more a:hover:after {
    color: #9d0b0b;
}

.badhomeblog-item-date i {
    /* Conflicto potencial con .custom-blog-item-date si usas iconos de manera diferente */
    margin-right: 5px;
}

.badhomeblog-item-thumbnail {
    position: relative;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

.badhomeblog-item-thumbnail img {
    z-index: 1;
    position: relative
}

.badblog-single-content-image .img-responsive {
    width: 95%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    display: block;
    border-radius: .625rem;
    margin: auto;

}
.badblog-single-content-image-wrapper{
    background-color:white;
    padding: 0px !important;
}
.badhomeblog-item-img-mask {
    position: absolute;
    top: 50%;
    z-index: 10;
    left: 0;
    right: 0;
    opacity: 0;
    margin: 0 auto;
    cursor: pointer;
    transform: translate(0, -50%) scale(.8);
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: var(--theme-custom-color);
    border-radius: 100px;
    transition: all .5s ease-in-out;
}

.badhomeblog-item-img-mask:hover {
    background-color: #fff;
}

.badhomeblog-item-inner:hover .badhomeblog-item-img-mask {
    /* :hover dependiente de la estructura antigua */
    opacity: 1;
    transform: translate(0, -50%) scale(1);
}

.badhomeblog-item-img-mask .badhomeblog-item-img-mask-conntent a {
    color: #ffffff;
    transition: all 0.5s ease-in-out;
}

.badhomeblog-item-img-mask:hover .badhomeblog-item-img-mask-conntent a {
    color: var(--theme-custom-color);
}

.badhomeblog-item-bottom {
    /* Estilo para la parte de texto en el diseño antiguo */
    text-align: left;
    background-color: #fff;
    padding-right: 0;
    width: 50%;
    /* Esto era para el layout de 2 columnas dentro del item del carrusel */
}

.owl-carousel .owl-item .badhomeblog-item-thumbnail img {
    /* Específico de Owl Carousel */
    width: 100%;
    z-index: -1;
}

/* === FIN DE ESTILOS ANTIGUOS PARA EL BLOG EN HOME === */


/*************** New css *********/
/* Esta sección ya existía, se mantiene */
.blog-form-wrapper {
    display: flex;
    padding-top: 20px;
    background-color:white;
}

.blog-form-wrapper .blog-form-block {
    width: 50%;
    padding-left: 25px;
    padding-right: 25px;
}

.blog-form-wrapper .badblog-single-block {
    width: 100%;

}


@media(max-width: 1300px) {
    .badhomeblog-item-bottom .badhomeblog-item-title a {
        /* Relacionado con estructura antigua */
        font-size: 18px;
        line-height: 25px;
    }

    .badhomeblog-item-content-more a {
        /* Relacionado con estructura antigua */
        font-size: 16px;
    }

    .badhomeblog-item-content p {
        /* Relacionado con estructura antigua */
        font-size: 14px;
        line-height: 22px;
    }
}

@media(max-width: 1200px) {
    .badhomeblog-block {
        /* Ajustar si es necesario para el nuevo grid */
        padding: 50px 0;
        margin-bottom: 50px;
    }

    .badhomeblog-item-content p {
        /* Relacionado con estructura antigua */
        margin-bottom: 15px;
    }
}

@media(max-width: 1199px) {
    .blog-form-wrapper .blog-form-block {
        padding-left: 30px;
    }

    .blog-form-wrapper .badblog-single-block {
        padding-right: 30px;
    }

    .badhomeblog-item-user span,
    .badhomeblog-item-date {
        /* Relacionado con estructura antigua */
        font-size: 13px;
        line-height: 30px;
    }
}

@media(max-width: 991px) {
    .badhomeblog-block {
        /* Ajustar si es necesario para el nuevo grid */
        padding: 30px 0;
        margin-bottom: 30px;
    }

    .badhomeblog-item-bottom {
        /* Relacionado con estructura antigua */
        padding: 15px;
    }

    .blog-form-wrapper {
        display: block;
    }

    .blog-form-wrapper .blog-form-block,
    .blog-form-wrapper .badblog-single-block {
        padding: 0;
        width: 90%;
        margin: 0 auto;
    }
}

@media(max-width: 767px) {
    .badhomeblog-item-bottom .badhomeblog-item-title a {
        /* Relacionado con estructura antigua */
        font-size: 15px;
        line-height: 25px;
    }

    .badhomeblog-item-content-more a {
        /* Relacionado con estructura antigua */
        font-size: 15px;
    }

    .badhomeblog-item-content p {
        /* Relacionado con estructura antigua */
        font-size: 13px;
        line-height: 20px;
    }
}

@media(max-width: 599px) {

    .badhomeblog-item-user span,
    .badhomeblog-item-date {
        /* Relacionado con estructura antigua */
        padding: 5px 0;
    }
}

@media(max-width: 575px) {

    .blog-form-wrapper .blog-form-block,
    .blog-form-wrapper .badblog-single-block {
        width: 100%;
    }

    .comments_area .comment_list li.comment .comment_body .comment_content {
        padding: 15px;
    }

    .badhomeblog-item-content p {
        /* Relacionado con estructura antigua */
        width: 100%;
    }
}

@media(max-width: 519px) {

    .badhomeblog-item-inner,
    .badhomeblog-item-bottom {
        /* Relacionado con estructura antigua */
        width: 100%;
    }

    .badhomeblog-item-wrapper {
        /* Relacionado con estructura antigua */
        flex-wrap: wrap;
    }
}

@media(max-width: 475px) {

    .badhomeblog-item-user span,
    .badhomeblog-item-date {
        /* Relacionado con estructura antigua */
        padding: 0;
    }
}

@media (max-width: 425px) {
    .badhomeblog-item-thumbnail .badhomeblog-item-date {
        /* Relacionado con estructura antigua */
        top: 0;
        bottom: auto;
    }

    .badhomeblog-item-bottom {
        /* Relacionado con estructura antigua */
        width: 95%;
    }
}

@media(max-width: 375px) {
    .badhomeblog-item-content p {
        /* Relacionado con estructura antigua */
        -webkit-line-clamp: 2;
    }
}

/* === NUEVOS ESTILOS PARA EL DISEÑO DE CUADRÍCULA DEL BLOG EN HOME === */
.custom-blog-grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

.custom-blog-grid-item {
    background-color: #fff;
    width: calc(25% - 15px);
    /* Para 4 columnas con gap de 20px: (100% / 4) - (20px * 3/4) */
    margin-bottom: 20px;
    /* Si 'gap' no es suficiente o para navegadores antiguos */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.custom-blog-item-image-wrapper {
    position: relative;
    width: 100%;
}

.custom-blog-item-image {
    display: block;
    width: 100%;
    height: 200px;
    /* Mantiene la proporción, ajustar si se necesita altura fija y object-fit */
}

.custom-blog-item-category-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #E60023;
    /* Color rojo como en la imagen de ejemplo */
    color: white;
    padding: 4px 8px;
    font-size: 0.75em;
    font-weight: bold;
    border-radius: 3px;
    text-transform: uppercase;
    z-index: 1;
}

.custom-blog-item-content-wrapper {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Permite que esta sección crezca para llenar el espacio */
}

.custom-blog-item-title {
    font-size: 1.1rem;
    /* Ajustar según el diseño deseado */
    margin-top: 0;

    line-height: 1.3;
    color: #333;
    margin: 5px 0 10px;
}

.custom-blog-item-title a {
    text-decoration: none;
    color: #333;
}

.custom-blog-item-title a:hover {
    color: #007bff;
    /* O el color de hover de tu tema */
}

.custom-blog-item-meta {
    font-size: 0.8em;
    color: #757575;
    margin-top: auto;
    /* Empuja la metainformación hacia abajo */
    display: flex;
    align-items: center;
}

.custom-blog-item-comments {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.custom-blog-comment-icon {
    /* Para un icono de imagen SVG/PNG */
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
    /* Ejemplo de filtro para un SVG negro, para que se vea gris: */
    /* filter: invert(50%) sepia(0%) saturate(0%) hue-rotate(175deg) brightness(85%) contrast(85%); */
}

/* Si usas un icono de fuente como Material Icons para comentarios: */
/*
.custom-blog-comment-icon.material-icons {
    font-size: 16px;
    margin-right: 5px;
    color: #757575;
}
*/

.custom-blog-comment-count {
    /* Estilos adicionales para el contador si son necesarios */
}

.custom-blog-item-date {
    display: flex;
    align-items: center;
}

/* Media Queries para la nueva cuadrícula */
@media (max-width: 992px) {
    .custom-blog-grid-item {
        width: calc(33.333% - 14px);
        /* 3 columnas */
    }
}

@media (max-width: 768px) {
    .custom-blog-grid-item {
        width: calc(50% - 10px);
        /* 2 columnas */
    }
}

@media (max-width: 576px) {
    .custom-blog-grid-item {
        width: 100%;
        /* 1 columna */
    }
}


/* ... (Reset básico, body, container se mantienen igual) ... */

/* --- NUEVOS ESTILOS PARA LA SECCIÓN SUPERIOR --- */
.seccion-superior {
    display: flex;
    gap: 20px;
    /* Espacio entre el destacado grande y la columna derecha */
    margin-bottom: 30px;
    /* Espacio antes de la siguiente sección */
    border-bottom: 1px solid #eee;
    /* Un separador visual opcional */
    padding-bottom: 20px;
    /* Espacio antes del separador */
}

.articulo-top-destacado {
    flex: 3;
    /* Ocupará más espacio, ajusta esta proporción según veas */
    background-color: #fff;
    /* No necesita padding si el contenido interno lo maneja */
    border: 1px solid #ddd;
    display: flex;
    /* Para el layout interno de imagen arriba y contenido abajo */
    flex-direction: column;
}

.articulo-top-destacado .imagen-contenedor-grande img {
    width: 100%;
    height: auto;
    /* O una altura fija si se prefiere para este destacado, ej: 400px */
    max-height: 400px;
    object-fit: cover;
    display: block;
}

.articulo-top-destacado .contenido-articulo {
    padding: 15px;
    /* Padding para el texto */
}

.articulo-top-destacado h2 {
    font-size: 2.2em;
    /* Título más grande */
    margin-bottom: 10px;
    line-height: 1.2;
}

.articulo-top-destacado .resumen {
    font-size: 1em;
    margin-bottom: 15px;
    color: #555;
}

.columna-derecha-superior {
    flex: 1.2;
    /* Ajusta la proporción para la columna derecha */
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Espacio entre los dos artículos pequeños de esta columna */
}

.articulo-pequeno-superior {
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    display: flex;
    /* Imagen al lado del texto */
    gap: 10px;
    align-items: flex-start;
}

/* Reutilizamos .imagen-contenedor y .contenido-texto si la estructura es similar a .articulo-pequeno */
/* Si necesitas estilos específicos para la imagen de .articulo-pequeno-superior: */
.articulo-pequeno-superior .imagen-contenedor {
    flex-basis: 120px;
    /* Ancho de la imagen un poco más grande */
    flex-shrink: 0;
}

.articulo-pequeno-superior .imagen-contenedor img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.articulo-pequeno-superior .contenido-texto {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.articulo-pequeno-superior h3 {
    font-size: 1.1em;
    line-height: 1.3;
    margin-bottom: 8px;
}

/* --- ESTILOS EXISTENTES (SECCIÓN DE ABAJO) --- */
.articulos-principales {
    display: flex;
    gap: 20px;
}

.articulo-destacado {
    /* Este es el de Ferrari */
    flex: 2;
    background-color: #fff;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    /* Para imagen arriba, contenido abajo */
}

.articulo-destacado>img {
    /* Imagen directa del artículo destacado */
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.articulo-destacado .contenido-articulo {
    /* Contenedor para el texto */
    padding: 15px;
}

.articulo-destacado h2 {
    font-size: 2em;
    margin-bottom: 10px;
}

.articulo-destacado .resumen {
    font-size: 1em;
    margin-bottom: 10px;
}

.articulos-secundarios {
    /* Cuadrícula 2x2 */
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-content: flex-start;
}

.articulo-pequeno {
    /* Para los artículos de la cuadrícula 2x2 */
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-basis: calc(50% - (15px / 2));
    box-sizing: border-box;
}

.articulo-pequeno .imagen-contenedor {
    flex-basis: 80px;
    flex-shrink: 0;
}

.articulo-pequeno img {
    width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: cover;
    display: block;
}

.articulo-pequeno .contenido-texto {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.articulo-pequeno h3 {
    font-size: 1em;
    line-height: 1.3;
    margin-bottom: 5px;
}


/* --- ESTILOS GENERALES REUTILIZABLES --- */
.etiqueta-categoria {
    display: inline-block;
    color: white;
    padding: 4px 10px;
    /* Un poco más de padding */
    font-size: 0.75em;
    font-weight: bold;
    margin-bottom: 10px;
    /* Un poco más de margen */
    text-transform: uppercase;
    border-radius: 3px;
    /* Bordes redondeados suaves */
}

/* Colores específicos por categoría como en la imagen */
.etiqueta-categoria.f1 {
    background-color: #e10600;
    /* Rojo F1 */
}

.etiqueta-categoria.competicion {
    background-color: #606060;
    /* Gris oscuro */
}

.etiqueta-categoria.coches {
    background-color: #0078D7;
    /* Azul (similar al de antes) */
}


.meta-articulo {
    font-size: 0.8em;
    color: #777;
    margin-top: auto;
    /* Empuja al final si el contenedor de texto es flex column */
}

.articulo-top-destacado .contenido-articulo .meta-articulo,
.articulo-destacado .contenido-articulo .meta-articulo {
    margin-top: 15px;
    /* Ajuste para que no quede pegado si resumen es corto */
}


.meta-articulo .comentarios {
    display: inline-block;
    background-color: #e74c3c;
    /* Se mantiene el rojo para comentarios */
    color: white;
    padding: 3px 7px;
    /* Ligeramente ajustado */
    border-radius: 3px;
    margin-right: 8px;
    /* Un poco más de espacio */
    font-weight: bold;
    font-size: 0.9em;
}

/* --- RESPONSIVIDAD --- */
@media (max-width: 992px) {

    .seccion-superior,
    .articulos-principales {
        flex-direction: column;
        /* Apila las columnas principales */
    }

    .articulo-top-destacado,
    .columna-derecha-superior,
    .articulo-destacado,
    .articulos-secundarios {
        flex-basis: 100%;
        /* Ocupan todo el ancho al apilarse */
    }

    .columna-derecha-superior {
        margin-top: 20px;
        /* Espacio cuando se apila debajo del top-destacado */
    }
}

@media (max-width: 768px) {
    .articulo-top-destacado h2 {
        font-size: 1.8em;
    }

    .articulo-destacado h2 {
        font-size: 1.6em;
    }

    /* Para la cuadrícula 2x2 en tablets, podrías decidir mantenerla o cambiarla.
       Si quieres que pasen a 2 en línea pero más grandes: */
    /*
    .articulos-secundarios .articulo-pequeno {
        flex-basis: calc(50% - (15px / 2)); // Ya está así, se mantendría
    }
    */
}

@media (max-width: 576px) {

    /* Móviles más pequeños */
    .articulo-top-destacado h2 {
        font-size: 1.5em;
    }

    .articulo-destacado h2 {
        font-size: 1.4em;
    }

    /* Artículos pequeños de la columna derecha superior en una columna */
    .columna-derecha-superior {
        gap: 15px;
        /* Reducir gap si es necesario */
    }

    .articulo-pequeno-superior {
        /* Podrías cambiar su flex-direction a column si el espacio es muy reducido */
        /* flex-direction: column; */
    }

    /*
    .articulo-pequeno-superior .imagen-contenedor {
        flex-basis: auto; width: 100%; margin-bottom: 10px;
    }
    */

    /* Artículos de la cuadrícula 2x2 a una sola columna */
    .articulos-secundarios .articulo-pequeno {
        flex-basis: 100%;
        /* Una columna */
    }

    .articulo-pequeno .imagen-contenedor {
        flex-basis: 100px;
        /* Podrías ajustar este valor */
    }

    .articulo-pequeno h3 {
        font-size: 1.1em;
    }
}


.publicidad-banner {
    /* Define el alto deseado para el banner. Puedes ajustar este valor. */
    height: 200px;
    /* O un min-height si prefieres que el contenedor se expanda */
    width: 100%;
    /* Asegura que el contenedor ocupe todo el ancho disponible */
    overflow: hidden;
    /* ¡Crucial! Recorta la imagen si se desborda del contenedor */
    position: relative;
    /* Necesario para posicionar la imagen absoluta dentro */
    display: flex;
    /* Para centrar la imagen si no fuera 100% ancha o para alinear otros elementos */
    justify-content: center;
    align-items: center;
}

.banner-image {

    object-position: center center;
    /* Centra la imagen dentro de su contenedor */
    display: block;
    /* Elimina cualquier espacio extra que algunos navegadores añaden a las imágenes */
}

.resumen-grande {

    overflow: hidden;
    /* Oculta cualquier contenido que se desborde */
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 15;
    /* Define el número exacto de líneas a mostrar */
}

.resumen-pequeno {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    /* Define el número exacto de líneas a mostrar */
    overflow: hidden;
    /* Oculta cualquier contenido que se desborde */
    line-height: 1.5;
}

.summary {
        display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    /* Define el número exacto de líneas a mostrar */
    overflow: hidden;
    /* Oculta cualquier contenido que se desborde */
    color: #6c757d;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

        /* --- PIE DE PÁGINA (AUTOR Y COMPARTIR) --- */
        .footer-blog {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid #e0e0e0;
            flex-wrap: wrap; /* Para pantallas pequeñas */
            gap: 1rem;
            margin-left: 20px;
            margin-right: 20px;
        }

        .author-info {
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }

        .author-info .author-pic {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }

        .author-info .author-name {
            font-weight: bold;
            margin: 0;
            color: #1a1a1a;
        }

        .author-info .date {
            font-size: 0.8rem;
            color: #777;
            margin: 0;
        }

        .share-section {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 0.9rem;
            color: #555;
        }

        .share-icons {
            display: flex;
            gap: 1rem;
        }

        .share-icons a {
            color: #333;
            text-decoration: none;
            transition: color 0.2s;
        }
        
        .share-icons a:hover {
            color: #033268;
        }

        .share-icons svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }