/* Estilos para las secciones de categorías de mascotas */

.mcCategorySection {
    padding: 60px 0;
    margin-bottom: 80px;
}

.mcCategorySectionWhite {
    background-color: #ffffff;
    color: #000000;
}

.mcCategorySectionBlack {
    background-color: #B17F49;
    color: #ffffff;
}

.mcTitleBlack {
    color: #000000 !important;
}

.mcTitleWhite {
    color: #ffffff !important;
}

.mcCategoryLayout {
    display: flex;
    gap: 30px;
    margin-top: 40px;
}

.mcMainCategoryNews {
    flex: 2;
    width: 100%;
}

.mcSecondaryCategoryNews {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mcMainCategoryItem {
    height: 500px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.mcMainCategoryImage {
    height: 60%;
    overflow: hidden;
}

.mcMainCategoryImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.mcMainCategoryItem:hover .mcMainCategoryImage img {
    transform: scale(1.05);
}

.mcMainCategoryContent {
    height: 40%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mcMainCategoryTitle {
    font-size: var(--mcFontSizeMainTitle);
    font-weight: 700;
    line-height: var(--mcLineHeightMainTitle);
    margin: 0 0 15px 0;
}

.mcMainCategoryTitle a {
    text-decoration: none;
    transition: color 0.3s ease;
}

.mcMainCategoryTitle a:hover {
    opacity: 0.8;
}

.mcMainCategoryExcerpt {
    font-size: var(--mcFontSizeExcerpt);
    line-height: var(--mcLineHeightExcerpt);
    opacity: 0.8;
}

.mcSecondaryCategoryItem {
    height: 245px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.mcCategorySectionWhite .mcSecondaryCategoryItem {
    background-color: rgba(0, 0, 0, 0.05);
}

.mcCategorySectionBlack .mcSecondaryCategoryItem {
    background-color: rgba(177, 127, 73, 0.1);
}

.mcSecondaryCategoryItem:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.mcCategorySectionWhite .mcSecondaryCategoryItem:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.mcCategorySectionBlack .mcSecondaryCategoryItem:hover {
    background-color: rgba(177, 127, 73, 0.2);
}

.mcSecondaryCategoryImage {
    grid-column: 1;
    grid-row: 1;
    overflow: hidden;
    border-radius: 6px;
}

.mcSecondaryCategoryImage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.mcSecondaryCategoryItem:hover .mcSecondaryCategoryImage img {
    transform: scale(1.05);
}

.mcSecondaryCategoryContent {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mcSecondaryCategoryTitle {
    font-size: var(--mcFontSizeSecondaryTitle);
    font-weight: 700;
    line-height: var(--mcLineHeightSecondaryTitle);
    margin: 0;
}

.mcSecondaryCategoryTitle a {
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.mcSecondaryCategoryTitle a:hover {
    opacity: 0.8;
}

.mcLMButtonContainer {
    text-align: center;
    margin-top: 40px;
}

.mcButton {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.mcButtonBlue {
    background-color: #3762f8;
    color: #ffffff;
    border-color: #3762f8;
}

.mcButtonBlue:hover {
    background-color: #2a4fd1;
    border-color: #2a4fd1;
    transform: translateY(-2px);
}

.mcButtonWhite {
    background-color: transparent;
    color: #ffffff;
    border-color: #ffffff;
}

.mcButtonWhite:hover {
    background-color: #ffffff;
    color: #000000;
    transform: translateY(-2px);
}

/* Centrar botón de MÁS NOTICIAS */
.mcButtonContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    width: 100%;
}

/* ========================================
   LAYOUTS MINIMALISTAS Y PROFESIONALES
   ======================================== */

/* Estilos base para todos los layouts limpios */
.mcImageClean {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.mcImageClean:hover {
    opacity: 0.9;
}

.mcCategoryClean {
    margin-bottom: 8px;
}

.mcCategoryText {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666666;
    display: inline-block;
}

.mcCategorySectionBlack .mcCategoryText {
    color: #cccccc;
}

/* Colores específicos para categorías de mascotas */
.mcCategoryText[data-category="nutricion"] {
    color: #28a745; /* Verde para NUTRICIÓN */
}

.mcCategoryText[data-category="salud-enfermedades-bienestar"] {
    color: #dc3545; /* Rojo para SALUD */
}

.mcCategoryText[data-category="razas-curiosidades"] {
    color: #007bff; /* Azul para RAZAS */
}

.mcCategoryText[data-category="adopcion-mascotas-perdidas"] {
    color: #ffc107; /* Amarillo para ADOPCIÓN */
}

.mcCategoryText[data-category="comportamiento-emocional"] {
    color: #6f42c1; /* Púrpura para COMPORTAMIENTO */
}

.mcCategoryText[data-category="cuidados-higiene"] {
    color: #fd7e14; /* Naranja para CUIDADOS */
}

.mcCategoryText[data-category="actividades-ejercicio"] {
    color: #20c997; /* Turquesa para ACTIVIDADES */
}

.mcCategoryText[data-category="productos-accesorios"] {
    color: #e83e8c; /* Rosa para PRODUCTOS */
}

/* Títulos sin text-decoration */
.mcMainTitleClean a,
.mcSecondaryTitleClean a,
.mcGridTitleClean a,
.mcFeaturedTitleClean a,
.mcVerticalTitleClean a,
.mcHorizontalTitleClean a,
.mcAlternatedTitleClean a,
.mcMinimalTitleClean a,
.mcTextOnlyTitleClean a {
    text-decoration: none !important;
}

/* Evitar saltos de línea en títulos de categorías - cortar última palabra en lugar de mostrar ellipsis */
.mcMainTitleClean,
.mcSecondaryTitleClean,
.mcGridTitleClean,
.mcFeaturedTitleClean,
.mcVerticalTitleClean,
.mcHorizontalTitleClean,
.mcAlternatedTitleClean,
.mcMinimalTitleClean,
.mcTextOnlyTitleClean {
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
}

/* Layout Clásico Limpio */
.mcLayoutClassicClean {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    margin-top: 30px;
}

.mcMainNewsClean {
    display: flex;
    flex-direction: column;
}

.mcMainItemClean {
    display: flex;
    flex-direction: column;
}

.mcMainImageClean {
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin-bottom: 20px;
}

.mcMainContentClean {
    flex: 1;
}

.mcMainTitleClean {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 15px 0;
}

.mcMainTitleClean a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.mcMainTitleClean a:hover {
    color: #3762f8;
}

.mcMainExcerptClean {
    font-size: 18px;
    line-height: 1.5;
    color: #666666;
}

.mcCategorySectionBlack .mcMainExcerptClean {
    color: #cccccc;
}

.mcSecondaryNewsClean {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.mcSecondaryItemClean {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid #eeeeee;
}

.mcCategorySectionBlack .mcSecondaryItemClean {
    border-bottom-color: rgba(177, 127, 73, 0.3);
}

.mcSecondaryItemClean:last-child {
    border-bottom: none;
}

.mcSecondaryImageClean {
    width: 180px;
    height: 120px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 4px;
}

.mcSecondaryContentClean {
    flex: 1;
}

.mcSecondaryTitleClean {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 8px 0;
}

.mcSecondaryTitleClean a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.mcSecondaryTitleClean a:hover {
    color: #3762f8;
}

/* Layout Grid Limpio */
.mcLayoutGridClean {
    margin-top: 30px;
}

.mcGridContainerClean {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.mcGridItemClean {
    display: flex;
    flex-direction: column;
}

.mcGridImageClean {
    width: 100%;
    height: 250px;
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 4px;
}

.mcGridContentClean {
    flex: 1;
}

.mcGridTitleClean {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 10px 0;
}

.mcGridTitleClean a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.mcGridTitleClean a:hover {
    color: #3762f8;
}

.mcGridExcerptClean {
    font-size: 18px;
    line-height: 1.5;
    color: #666666;
}

.mcCategorySectionBlack .mcGridExcerptClean {
    color: #cccccc;
}

/* Layout Lista Vertical */
.mcLayoutListClean {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    margin-top: 30px;
}

.mcFeaturedNewsClean {
    display: flex;
    flex-direction: column;
}

.mcFeaturedItemClean {
    display: flex;
    flex-direction: column;
}

.mcFeaturedImageClean {
    width: 100%;
    height: 250px;
    overflow: hidden;
    margin-bottom: 20px;
}

.mcFeaturedContentClean {
    flex: 1;
}

.mcFeaturedTitleClean {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 15px 0;
}

.mcFeaturedTitleClean a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.mcFeaturedTitleClean a:hover {
    color: #3762f8;
}

.mcFeaturedExcerptClean {
    font-size: 18px;
    line-height: 1.5;
    color: #666666;
}

.mcCategorySectionBlack .mcFeaturedExcerptClean {
    color: #cccccc;
}

.mcVerticalListClean {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mcVerticalItemClean {
    padding-bottom: 20px;
    border-bottom: 1px solid #eeeeee;
}

.mcCategorySectionBlack .mcVerticalItemClean {
    border-bottom-color: rgba(177, 127, 73, 0.3);
}

.mcVerticalItemClean:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mcVerticalContentClean {
    display: flex;
    flex-direction: column;
}

.mcVerticalTitleClean {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.mcVerticalTitleClean a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.mcVerticalTitleClean a:hover {
    color: #3762f8;
}

/* Layout Horizontal */
.mcLayoutHorizontalClean {
    margin-top: 30px;
}

.mcHorizontalContainerClean {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.mcHorizontalItemClean {
    display: flex;
    flex-direction: column;
}

.mcHorizontalImageClean {
    width: 100%;
    height: 250px;
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 4px;
}

.mcHorizontalContentClean {
    flex: 1;
}

.mcHorizontalTitleClean {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 8px 0;
}

.mcHorizontalTitleClean a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.mcHorizontalTitleClean a:hover {
    color: #3762f8;
}

.mcHorizontalExcerptClean {
    font-size: 18px;
    line-height: 1.5;
    color: #666666;
}

.mcCategorySectionBlack .mcHorizontalExcerptClean {
    color: #cccccc;
}

/* Layout Alternado */
.mcLayoutAlternatedClean {
    margin-top: 30px;
}

.mcAlternatedItemClean {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
    align-items: start !important;
}

.mcAlternatedItemClean:last-child {
    margin-bottom: 0;
}

.mcAltRight {
    direction: rtl;
}

.mcAltRight > * {
    direction: ltr;
}

.mcAlternatedImageClean {
    height: 200px;
    overflow: hidden;
}

.mcAlternatedContentClean {
    padding: 0 20px;
}

.mcAlternatedTitleClean {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 15px 0;
}

.mcAlternatedTitleClean a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.mcAlternatedTitleClean a:hover {
    color: #3762f8;
}

.mcAlternatedExcerptClean {
    font-size: 18px;
    line-height: 1.5;
    color: #666666;
}

.mcCategorySectionBlack .mcAlternatedExcerptClean {
    color: #cccccc;
}

/* Layout Minimalista */
.mcLayoutMinimalClean {
    margin-top: 40px;
}

.mcMinimalContainerClean {
    max-width: 900px;
    margin: 0 auto;
}

.mcMinimalItemClean {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
    align-items: start !important;
}

.mcMinimalItemClean:last-child {
    margin-bottom: 0;
}

.mcMinimalContentClean {
    flex: 1;
}

.mcMinimalTitleClean {
    font-size: 28px;
    font-weight: 300;
    line-height: 1.3;
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.mcMinimalTitleClean a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.mcMinimalTitleClean a:hover {
    color: #3762f8;
}

.mcMinimalExcerptClean {
    font-size: 18px;
    line-height: 1.5;
    color: #666666;
}

.mcCategorySectionBlack .mcMinimalExcerptClean {
    color: #cccccc;
}

.mcMinimalImageClean {
    flex: 0 0 250px;
    height: 150px;
    overflow: hidden;
}

/* Layout Solo Texto */
.mcLayoutTextOnlyClean {
    margin-top: 30px;
}

.mcTextOnlyContainerClean {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: start !important;
}

.mcTextOnlyItemClean {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    border-bottom: none;
    align-items: flex-start !important;
}

.mcCategorySectionBlack .mcTextOnlyItemClean {
    border-bottom-color: rgba(177, 127, 73, 0.3);
}

.mcTextOnlyContentClean {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mcTextOnlyTitleClean {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 10px 0;
    flex-grow: 1;
}

.mcTextOnlyTitleClean a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.mcTextOnlyTitleClean a:hover {
    color: #3762f8;
}

/* Mejoras específicas para alineación */
.mcTextOnlyItemClean .mcCategoryClean {
    margin-bottom: 8px;
    text-align: left;
}

.mcTextOnlyItemClean .mcCategoryText {
    display: inline-block;
    text-align: left;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Layout Clásico Limpio */
    .mcLayoutClassicClean {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .mcMainImageClean {
        height: 200px;
    }
    
    .mcMainTitleClean {
        font-size: 28px;
    }
    
    .mcSecondaryItemClean {
        flex-direction: column;
        gap: 15px;
        padding: 20px 0;
    }
    
    .mcSecondaryImageClean {
        width: 100%;
        height: 150px;
    }
    
    .mcSecondaryTitleClean {
        font-size: 22px;
    }
    
    /* Layout Grid Limpio */
    .mcGridContainerClean {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .mcGridImageClean {
        height: 180px;
    }
    
    .mcGridTitleClean {
        font-size: 22px;
    }
    
    .mcGridExcerptClean {
        font-size: 18px;
    }
    
    /* Layout Lista Vertical */
    .mcLayoutListClean {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .mcFeaturedImageClean {
        height: 200px;
    }
    
    .mcFeaturedTitleClean {
        font-size: 28px;
    }
    
    .mcVerticalTitleClean {
        font-size: 22px;
    }
    
    /* Layout Horizontal */
    .mcHorizontalContainerClean {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .mcHorizontalImageClean {
        height: 120px;
    }
    
    .mcHorizontalTitleClean {
        font-size: 18px;
    }
    
    /* Layout Alternado */
    .mcAlternatedItemClean {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 30px;
    }
    
    .mcAltRight {
        direction: ltr;
    }
    
    .mcAlternatedImageClean {
        height: 180px;
    }
    
    .mcAlternatedContentClean {
        padding: 0;
    }
    
    .mcAlternatedTitleClean {
        font-size: 22px;
    }
    
    /* Layout Minimalista */
    .mcMinimalItemClean {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }
    
    .mcMinimalTitleClean {
        font-size: 22px;
    }
    
    .mcMinimalImageClean {
        flex: none;
        width: 100%;
        height: 200px;
    }
    
    /* Layout Solo Texto */
    .mcTextOnlyContainerClean {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .mcTextOnlyTitleClean {
        font-size: 22px;
    }
    
    /* Botón centrado en móvil */
    .mcButtonContainer {
        margin-top: 30px;
    }
}

@media (max-width: 480px) {
    .mcCategorySection {
        padding: 40px 0;
    }
    
    /* Layout Clásico en pantallas muy pequeñas */
    .mcLayoutClassicClean {
        gap: 20px;
    }
    
    .mcMainImageClean {
        height: 180px;
    }
    
    .mcMainTitleClean {
        font-size: 28px;
    }
    
    .mcSecondaryImageClean {
        height: 120px;
    }
    
    .mcSecondaryTitleClean {
        font-size: 22px;
    }
    
    /* Layout Grid en pantallas muy pequeñas */
    .mcGridContainerClean {
        gap: 20px;
    }
    
    .mcGridImageClean {
        height: 150px;
    }
    
    .mcGridTitleClean {
        font-size: 22px;
    }
    
    .mcGridExcerptClean {
        font-size: 18px;
    }
    
    /* Layout Horizontal - 1 columna en pantallas muy pequeñas */
    .mcHorizontalContainerClean {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .mcHorizontalImageClean {
        height: 100px;
    }
    
    .mcHorizontalTitleClean {
        font-size: 18px;
    }
    
    /* Títulos más pequeños en móvil */
    .mcTitle {
        font-size: 24px;
    }
    
    /* Botón más pequeño en móvil */
    .mcButton {
        padding: 12px 24px;
        font-size: 14px;
    }
}