/* Layout Components CSS for European PC */


/* CSS Variables for spacing - Desktop defaults */
:root {
    --spacing-none: 0;
    --spacing-0: 0;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;
    --spacing-2xl: 4rem;
    --spacing-xxxl: 6rem;
    --spacing-3xl: 6rem;
}

/* Responsive spacing - reduce on tablets and phones */
@media (max-width: 991px) {
    :root {
        --spacing-xs: 0.375rem;   /* 0.5rem -> 0.375rem */
        --spacing-sm: 0.75rem;    /* 1rem -> 0.75rem */
        --spacing-md: 1rem;       /* 1.5rem -> 1rem */
        --spacing-lg: 1.25rem;    /* 2rem -> 1.25rem */
        --spacing-xl: 1.75rem;    /* 3rem -> 1.75rem */
        --spacing-xxl: 2.5rem;    /* 4rem -> 2.5rem */
        --spacing-2xl: 2.5rem;
        --spacing-xxxl: 3.5rem;   /* 6rem -> 3.5rem */
        --spacing-3xl: 3.5rem;
    }
}

/* Mobile phones - further reduction */
@media (max-width: 767px) {
    :root {
        --spacing-xs: 0.25rem;    /* 0.5rem -> 0.25rem */
        --spacing-sm: 0.5rem;     /* 1rem -> 0.5rem */
        --spacing-md: 0.75rem;    /* 1.5rem -> 0.75rem */
        --spacing-lg: 1rem;       /* 2rem -> 1rem */
        --spacing-xl: 1.5rem;     /* 3rem -> 1.5rem */
        --spacing-xxl: 2rem;      /* 4rem -> 2rem */
        --spacing-2xl: 2rem;
        --spacing-xxxl: 2.5rem;   /* 6rem -> 2.5rem */
        --spacing-3xl: 2.5rem;
    }
}

/* =================================== */
/* CMS COMPONENT BASE STYLES           */
/* =================================== */

/* Diapositivas (Slider) Component */
.componente-diapositivas {
    display: block;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* Ensure slider respects parent spacing */
.componente-diapositivas .diapositivas-slider {
    display: block;
    width: 100%;
}

/* Override Slick's aggressive margin reset for components with spacing */
.componente-diapositivas .slick-slider {
    margin-bottom: 0 !important;
}

.componente-diapositivas .slick-list {
    margin: 0;
    padding: 0;
}

/* Mobile: Make sliders full-width (remove horizontal spacing) */
@media (max-width: 767px) {
    .componente-diapositivas {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* =================================== */
/* GENERIC FULL-WIDTH LAYOUT UTILITIES */
/* =================================== */

/* Full-width breakout utility - can be applied to any component */
.layout-breakout {
    width: 100%;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    position: relative;
    box-sizing: border-box;
}

/* Ensure content inside breakout elements is properly constrained */
.layout-breakout > * {
    position: relative;
}

/* Ensure content after breakout elements is properly spaced */
.layout-breakout + * {
    margin-top: 2rem;
}

/* Alternative full-width method for nested components */
.layout-full-width {
    width: 100%;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    position: relative;
    box-sizing: border-box;
}

/* Ensure content inside full-width elements is properly constrained */
.layout-full-width > * {
    position: relative;
}

/* Content wrapper for full-width layouts */
.layout-content-wrapper {
    width: 100%;
    max-width: 1200px; /* Bootstrap 3 container max-width */
    margin: 0 auto;
    padding: 0 15px; /* Bootstrap 3 default padding */
}

/* Override Bootstrap container constraints for full-width components */
.layout-breakout .container,
.layout-full-width .container {
    width: 100%;
    max-width: none;
    padding: 0;
}

/* Responsive full-width adjustments */
@media (max-width: 767px) {
    .layout-content-wrapper {
        padding: 0 10px; /* Smaller padding on mobile */
    }
}

/* Hero Component */
.hero-component {
    position: relative;
    overflow: hidden;
    z-index: 1;
    margin-bottom: 2rem;
    display: block;
    box-sizing: border-box;
    width: 100%;
}

/* Background fills hero */
.hero-background {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-background video {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay above bg */
.hero-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Content above overlay */
.hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 2rem 0;
    box-sizing: border-box;
}

/* Vertical alignment */
.hero-valign-top    { justify-content: flex-start; }
.hero-valign-center { justify-content: center; }
.hero-valign-bottom { justify-content: flex-end; }

/* Inner content block */
.hero-inner { width: 100%; }

/* Text alignment */
.hero-align-left  .hero-inner { text-align: left; }
.hero-align-center .hero-inner { text-align: center; }
.hero-align-right .hero-inner { text-align: right; }

/* Heights */
.hero-height-sm { min-height: 25vh; }
.hero-height-md { min-height: 50vh; }
.hero-height-lg { min-height: 75vh; }
.hero-height-xl { min-height: 90vh; }
.hero-height-full { min-height: 100vh; }
.hero-height-auto { min-height: auto; }

/* Typography - default light text */
.hero-titulo { font-size: 3rem; font-weight: bold; margin-bottom: 1rem; color: #fff; }
.hero-subtitulo { font-size: 1.5rem; margin-bottom: 1rem; color: #fff; }
.hero-descripcion { font-size: 1.1rem; margin-bottom: 2rem; color: #fff; }

/* Dark text variant */
.hero-text-oscuro .hero-titulo,
.hero-text-oscuro .hero-subtitulo,
.hero-text-oscuro .hero-descripcion,
.hero-text-oscuro .hero-etiqueta { color: #222; }

/* Badge / label above title */
.hero-etiqueta {
    display: inline-block;
    padding: 0.3em 1em;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    background-color: #e74c3c;
    border-radius: 3px;
}
.hero-text-oscuro .hero-etiqueta {
    color: #fff; /* badge always keeps white text */
}

/* Two-column layout (text + foreground image) */
.hero-layout {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
}
.hero-text-col {
    flex: 1 1 55%;
    min-width: 0;
}
.hero-image-col {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-imagen-frente {
    max-width: 100%;
    max-height: 80%;
    height: auto;
    object-fit: contain;
}

/* Inherit parent text alignment in split layout */
.hero-align-left .hero-text-col { text-align: left; }
.hero-align-center .hero-text-col { text-align: center; }
.hero-align-right .hero-text-col { text-align: right; }

/* When split, left-align buttons within text column */
.hero-with-image .hero-botones { text-align: inherit; }

/* Buttons (BS3-safe spacing) */
.hero-botones { text-align: center; }
.hero-botones .btn + .btn { margin-left: 12px; }

.hero-btn-primary,
.hero-btn-secondary {
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

/* Responsive: stack columns on mobile */
@media (max-width: 767px) {
    .hero-layout {
        flex-direction: column;
        text-align: center;
    }
    .hero-text-col,
    .hero-image-col {
        flex: 1 1 100%;
    }
    .hero-image-col {
        order: -1; /* image on top on mobile */
    }
    .hero-imagen-frente {
        max-height: 250px;
    }
    .hero-titulo { font-size: 2rem; }
    .hero-subtitulo { font-size: 1.2rem; }
}


/* ================================ */
/* CMS BUTTON STYLES                */
/* Semantic variants matching site  */
/* ================================ */

/* Primario - site primary pink */
.btn-primario {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border: 1px solid var(--color-primary);
}
.btn-primario:hover, .btn-primario:focus {
    background-color: var(--color-primary-dark);
    color: var(--color-text-white);
}

/* Secundario - site secondary blue */
.btn-secundario {
    background-color: var(--color-secondary);
    color: var(--color-text-white);
    border: 1px solid var(--color-secondary);
}
.btn-secundario:hover, .btn-secundario:focus {
    background-color: var(--color-secondary-dark);
    color: var(--color-text-white);
}

/* Gris */
.btn-gris {
    background-color: #d7d7d7;
    color: #232323;
    border: 1px solid #d7d7d7;
}
.btn-gris:hover, .btn-gris:focus {
    background-color: #474747;
    color: var(--color-text-white);
}

/* Outline primario - bordered pink */
.btn-outline-primario {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}
.btn-outline-primario:hover, .btn-outline-primario:focus {
    background-color: var(--color-primary);
    color: var(--color-text-white);
}

/* Outline claro - white border (for dark backgrounds / heroes) */
.btn-outline-claro {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
}
.btn-outline-claro:hover, .btn-outline-claro:focus {
    background-color: #fff;
    color: #222;
}

/* Negro */
.btn-negro {
    background-color: #222;
    color: var(--color-text-white);
    border: 1px solid #222;
}
.btn-negro:hover, .btn-negro:focus {
    background-color: #444;
    color: var(--color-text-white);
}

/* Blanco */
.btn-blanco {
    background-color: #fff;
    color: #222;
    border: 1px solid #ddd;
}
.btn-blanco:hover, .btn-blanco:focus {
    background-color: #f5f5f5;
    color: #222;
}


/* ================================ */
/* CABECERA PAGINA COMPONENT        */
/* ================================ */

.cabecera-pagina-component {
    width: 100%;
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
}

.cabecera-pagina-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 120px;
}

.cabecera-pagina-titulo {
    margin: 0 0 1rem 0;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1.2;
}

.cabecera-pagina-descripcion {
    font-size: 1rem;
    line-height: 1.6;
}

.cabecera-pagina-descripcion p {
    margin: 0 0 0.5rem 0;
}

.cabecera-pagina-descripcion p:last-child {
    margin-bottom: 0;
}

.cabecera-pagina-imagen {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cabecera-pagina-imagen img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .cabecera-pagina-titulo {
        font-size: 2rem;
    }

    .cabecera-pagina-imagen {
        margin-top: 1.5rem;
    }
}

@media (max-width: 480px) {
    .cabecera-pagina-component {
        padding: 1.5rem 0;
    }

    .cabecera-pagina-titulo {
        font-size: 1.5rem;
    }

    .cabecera-pagina-descripcion {
        font-size: 0.9rem;
    }
}


/* Generic component content constraints */
.grid-constrained,
.section-constrained {
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .hero-constrained,
    .grid-constrained,
    .section-constrained {
        padding: 0 10px; /* Smaller padding on mobile */
    }
}


/* Grid Component */
.grid-component {
    margin: 2rem 0;
}

.grid-container {
    display: grid;
    gap: var(--spacing-md);
}

.grid-cols-desktop-1 { grid-template-columns: 1fr; }
.grid-cols-desktop-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-desktop-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-desktop-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-desktop-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-desktop-6 { grid-template-columns: repeat(6, 1fr); }

.grid-gap-xs { gap: var(--spacing-xs); }
.grid-gap-sm { gap: var(--spacing-sm); }
.grid-gap-md { gap: var(--spacing-md); }
.grid-gap-lg { gap: var(--spacing-lg); }
.grid-gap-xl { gap: var(--spacing-xl); }

/* Responsive grid */
@media (max-width: 768px) {
    .grid-cols-tablet-1 { grid-template-columns: 1fr !important; }
    .grid-cols-tablet-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid-cols-tablet-3 { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 450px) {
    .grid-cols-mobile-1 { grid-template-columns: 1fr !important; }
    .grid-cols-mobile-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid-cols-mobile-3 { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Grid Item Component */
.grid-item-component {
    position: relative;
}

/* Visibility utilities */
.hidden-desktop { display: none !important; }
.hidden-tablet { display: none !important; }
.hidden-mobile { display: none !important; }

@media (max-width: 1024px) {
    .hidden-desktop { display: block !important; }
}

@media (max-width: 768px) {
    .hidden-tablet { display: block !important; }
}

@media (max-width: 450px) {
    .hidden-mobile { display: block !important; }
}

/* Slider Component */
.slider-component {
    margin: 2rem 0;
}

.slider-container {
    position: relative;
}

.slide-item {
    padding: 0 10px;
}


/* Section Component */
.section-component {
    position: relative;
    padding: 2rem 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Full viewport width for sections when enabled */
.section-component.layout-breakout {
    width: 100%;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: none;
}

/* Ensure section titles are properly positioned in full-width sections */
.section-component.layout-breakout .section-title {
    max-width: 1200px;
    margin: 0 auto 1.5rem auto;
    padding: 0 15px;
    position: relative;
    left: 0;
    transform: none;
    width: 100%;
    box-sizing: border-box;
}

.section-height-screen-25 { min-height: 25vh; }
.section-height-screen-50 { min-height: 50vh; }
.section-height-screen-75 { min-height: 75vh; }
.section-height-screen-100 { min-height: 100vh; }

.section-hidden {
    display: none;
}

/* Row Component */
.row-component {
    margin: 1rem 0;
}

.fila-container {
    display: flex;
    flex-wrap: wrap;
}

.fila-nowrap .fila-container {
    flex-wrap: nowrap;
}

/* Horizontal alignment */
.fila-align-h-left .fila-container { justify-content: flex-start; }
.fila-align-h-center .fila-container { justify-content: center; }
.fila-align-h-right .fila-container { justify-content: flex-end; }
.fila-align-h-space-between .fila-container { justify-content: space-between; }
.fila-align-h-space-around .fila-container { justify-content: space-around; }
.fila-align-h-space-evenly .fila-container { justify-content: space-evenly; }

/* Vertical alignment */
.fila-align-v-top .fila-container { align-items: flex-start; }
.fila-align-v-center .fila-container { align-items: center; }
.fila-align-v-bottom .fila-container { align-items: flex-end; }
.fila-align-v-stretch .fila-container { align-items: stretch; }

/* Gap */
.fila-gap-0 .fila-container { gap: 0; }
.fila-gap-sm .fila-container { gap: var(--spacing-sm); }
.fila-gap-md .fila-container { gap: var(--spacing-md); }
.fila-gap-lg .fila-container { gap: var(--spacing-lg); }
.fila-gap-xl .fila-container { gap: var(--spacing-xl); }

/* Direction */
.fila-direction-desktop-row .fila-container { flex-direction: row; }
.fila-direction-desktop-column .fila-container { flex-direction: column; }
.fila-direction-desktop-row-reverse .fila-container { flex-direction: row-reverse; }
.fila-direction-desktop-column-reverse .fila-container { flex-direction: column-reverse; }

@media (max-width: 768px) {
    .fila-direction-mobile-row .fila-container { flex-direction: row !important; }
    .fila-direction-mobile-column .fila-container { flex-direction: column !important; }
    .fila-direction-mobile-row-reverse .fila-container { flex-direction: row-reverse !important; }
    .fila-direction-mobile-column-reverse .fila-container { flex-direction: column-reverse !important; }
}

.fila-hidden {
    display: none;
}

/* Column Component */
.column-component {
    flex: 1;
    min-width: 0;
}

.column-align-left { text-align: left; }
.column-align-center { text-align: center; }
.column-align-right { text-align: right; }
.column-align-justify { text-align: justify; }

.column-padding-0 { padding: 0; }
.column-padding-sm { padding: var(--spacing-sm); }
.column-padding-md { padding: var(--spacing-md); }
.column-padding-lg { padding: var(--spacing-lg); }
.column-padding-xl { padding: var(--spacing-xl); }

/* Column widths */
.col-1 { flex: 0 0 8.333333%; }
.col-2 { flex: 0 0 16.666667%; }
.col-3 { flex: 0 0 25%; }
.col-4 { flex: 0 0 33.333333%; }
.col-5 { flex: 0 0 41.666667%; }
.col-6 { flex: 0 0 50%; }
.col-7 { flex: 0 0 58.333333%; }
.col-8 { flex: 0 0 66.666667%; }
.col-9 { flex: 0 0 75%; }
.col-10 { flex: 0 0 83.333333%; }
.col-11 { flex: 0 0 91.666667%; }
.col-12 { flex: 0 0 100%; }
.col-auto { flex: 0 0 auto; }

/* Background Component */
.background-color,
.background-image,
.background-gradient,
.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.background-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Spacing Component */
.spacing-component {
    width: 100%;
}

/* Component titles */
.grid-title,
.slider-title,
.tabs-title,
.accordion-title,
.section-title,
.row-title {
    margin-bottom: 1.5rem;
    font-weight: bold;
    color: #333;
}

/* Responsive utilities */
@media (max-width: 1200px) {
    .hidden-lg { display: none !important; }
}

@media (max-width: 992px) {
    .hidden-md { display: none !important; }
}

@media (max-width: 768px) {
    .hidden-sm { display: none !important; }

    .hero-titulo {
        font-size: 4rem;
    }

    .hero-subtitulo {
        font-size: 2.4rem;
    }

    .hero-botones {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .hidden-xs { display: none !important; }

    .hero-titulo {
        font-size: 1.5rem;
    }

    .hero-subtitulo {
        font-size: 1rem;
    }
}


/* ================================ */
/* INDICE CATEGORIA POST COMPONENT  */
/* ================================ */

.indice-categoria-post-component {
    width: 100%;
    margin: 2rem 0;
}

.indice-categoria-post-header {
    margin-bottom: 2rem;
    text-align: center;
}

.indice-categoria-post-titulo {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #333;
}

.indice-categoria-post-subtitulo {
    font-size: 1.125rem;
    color: #666;
    margin-bottom: 0;
}

.indice-categoria-post-descripcion {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #f5f5f5;
    border-left: 4px solid #C23972;
}

/* Lista format */
.indice-categoria-post-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.indice-categoria-post-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.indice-categoria-post-item:last-child {
    border-bottom: none;
}

.indice-categoria-post-item-titulo {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.indice-categoria-post-item-titulo a {
    color: #333;
    text-decoration: none;
}

.indice-categoria-post-item-titulo a:hover {
    color: #C23972;
}

.indice-categoria-post-item-meta {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.indice-categoria-post-item-fecha,
.indice-categoria-post-item-autor {
    margin-right: 1rem;
}

.indice-categoria-post-item-descripcion {
    color: #666;
    margin-bottom: 0.5rem;
}

.indice-categoria-post-item-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.indice-categoria-post-etiqueta {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: #e0e0e0;
    border-radius: 12px;
    font-size: 0.75rem;
    color: #666;
}

/* Grid format */
.indice-categoria-post-grid {
    display: grid;
    gap: 2rem;
    margin-bottom: 2rem;
}

.indice-categoria-post-cols-1 { grid-template-columns: 1fr; }
.indice-categoria-post-cols-2 { grid-template-columns: repeat(2, 1fr); }
.indice-categoria-post-cols-3 { grid-template-columns: repeat(3, 1fr); }
.indice-categoria-post-cols-4 { grid-template-columns: repeat(4, 1fr); }

.indice-categoria-post-grid-item {
    height: 100%;
}

/* Cards format */
.indice-categoria-post-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    background-color: #fff;
    transition: box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.indice-categoria-post-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.indice-categoria-post-card-header {
    margin-bottom: 1rem;
}

.indice-categoria-post-card-titulo {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.indice-categoria-post-card-titulo a {
    color: #333;
    text-decoration: none;
}

.indice-categoria-post-card-titulo a:hover {
    color: #C23972;
}

.indice-categoria-post-card-meta {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 1rem;
}

.indice-categoria-post-card-fecha,
.indice-categoria-post-card-autor {
    margin-right: 1rem;
}

.indice-categoria-post-card-descripcion {
    color: #666;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.indice-categoria-post-card-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.indice-categoria-post-card-footer {
    margin-top: auto;
}

.indice-categoria-post-card-enlace {
    display: inline-block;
}

/* Minimal format */
.indice-categoria-post-minimal .indice-categoria-post-item {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f0f0f0;
}

.indice-categoria-post-minimal .indice-categoria-post-enlace {
    color: #333;
    text-decoration: none;
    font-weight: 500;
}

.indice-categoria-post-minimal .indice-categoria-post-enlace:hover {
    color: #C23972;
}

.indice-categoria-post-minimal .indice-categoria-post-fecha {
    font-size: 0.75rem;
    color: #999;
    margin-left: 0.5rem;
}

/* Subcategories */
.indice-categoria-post-subcategorias {
    margin-top: 2rem;
}

.indice-categoria-post-subcategoria {
    margin-bottom: 2rem;
}

.indice-categoria-post-subcategoria-titulo {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #C23972;
    color: #333;
}

/* Empty state */
.indice-categoria-post-vacio {
    text-align: center;
    padding: 2rem;
    color: #999;
    font-style: italic;
}

/* Responsive */
@media (max-width: 992px) {
    .indice-categoria-post-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .indice-categoria-post-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .indice-categoria-post-cols-2,
    .indice-categoria-post-cols-3,
    .indice-categoria-post-cols-4 {
        grid-template-columns: 1fr;
    }

    .indice-categoria-post-titulo {
        font-size: 1.5rem;
    }

    .indice-categoria-post-subtitulo {
        font-size: 1rem;
    }

    .indice-categoria-post-card {
        padding: 1rem;
    }
}






/* ================================ */
/* BREADCRUMBS CMS                  */
/* ================================ */

.breadcrumbs-cms {
    padding: 15px 0;
    margin-bottom: 20px;
}

.breadcrumb-cms {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: transparent;
    font-size: 14px;
}

.breadcrumb-cms-item {
    display: flex;
    align-items: center;
}

.breadcrumb-cms-item + .breadcrumb-cms-item::before {
    content: "/";
    padding: 0 10px;
    color: #999;
}

.breadcrumb-cms-item a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-cms-item a:hover {
    color: #C23972;
}

.breadcrumb-cms-item a i {
    margin-right: 5px;
}

.breadcrumb-cms-item.active {
    color: #333;
    font-weight: 500;
}

@media (max-width: 768px) {
    .breadcrumbs-cms {
        padding: 10px 0;
    }

    .breadcrumb-cms {
        font-size: 12px;
    }

    .breadcrumb-cms-item + .breadcrumb-cms-item::before {
        padding: 0 5px;
    }
}


/* ================================ */
/* POST LIST PAGE                   */
/* ================================ */

.post-list-page {
    padding: 0 0 3rem;
}

/* ================================ */
/* BLOG – SHARED TOKENS             */
/* ================================ */

:root {
    --blog-pink: #C23972;
    --blog-pink-dark: #a0305d;
    --blog-pink-light: #fce4ec;
    --blog-text: #1a1a2e;
    --blog-text-secondary: #555;
    --blog-text-muted: #999;
    --blog-bg: #f7f8fc;
    --blog-card-bg: #fff;
    --blog-border: #e8eaf0;
    --blog-radius: 14px;
    --blog-radius-sm: 8px;
    --blog-shadow: 0 2px 12px rgba(0,0,0,.06);
    --blog-shadow-hover: 0 8px 30px rgba(0,0,0,.10);
    --blog-transition: .28s cubic-bezier(.4,0,.2,1);
}

/* ================================ */
/* BLOG HERO (Index)                */
/* ================================ */

.blog-hero {
    background: #151525;
    background-image:
        radial-gradient(ellipse 90% 70% at 65% 45%, rgba(194,57,114,.5) 0%, transparent 65%),
        radial-gradient(ellipse 60% 80% at 5% 90%, rgba(194,57,114,.3) 0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 90% 10%, rgba(80,40,90,.4) 0%, transparent 60%);
    color: #fff;
    padding: 4.5rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.blog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='1' fill='rgba(255,255,255,.04)'/%3E%3C/svg%3E");
    pointer-events: none;
}

.blog-hero__content {
    position: relative;
    max-width: 680px;
}

.blog-hero__label {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: #fff !important;
    background: rgba(194,57,114,.55);
    backdrop-filter: blur(4px);
    padding: .4rem 1.1rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255,255,255,.12);
}

.blog-hero__title {
    font-size: clamp(2rem, 1.2rem + 2.5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.12;
    margin: 0 0 1.1rem;
    color: #fff !important;
    text-shadow: 0 2px 30px rgba(0,0,0,.3);
    letter-spacing: -.01em;
}

.blog-hero__subtitle {
    font-size: clamp(1rem, .85rem + .5vw, 1.15rem);
    color: rgba(255,255,255,.82) !important;
    opacity: 1;
    margin: 0;
    line-height: 1.7;
    max-width: 560px;
}

/* ================================ */
/* SECTION HEADERS                  */
/* ================================ */

.blog-section-header {
    margin-bottom: 2rem;
}

.blog-section-header__title {
    font-size: clamp(1.35rem, 1rem + .8vw, 1.75rem);
    font-weight: 700;
    color: var(--blog-text) !important;
    margin: 0 0 .6rem;
}

.blog-section-header__line {
    width: 48px;
    height: 3px;
    background: var(--blog-pink);
    border-radius: 2px;
}

/* ================================ */
/* CATEGORY CARDS (Index)           */
/* ================================ */

.blog-categories {
    padding: 3.5rem 0 1.5rem;
}

.blog-categories__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.blog-category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--blog-radius);
    overflow: hidden;
    height: 220px;
    text-decoration: none;
    color: #fff;
    box-shadow: var(--blog-shadow);
    transition: transform var(--blog-transition), box-shadow var(--blog-transition);
}

.blog-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(0,0,0,.15);
    text-decoration: none;
    color: #fff;
}

.blog-category-card__image {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.blog-category-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.blog-category-card:hover .blog-category-card__image img {
    transform: scale(1.08);
}

/* Branded placeholder when no image is available */
.blog-category-card__placeholder {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 70% 60% at 85% 80%, rgba(194,57,114,.6) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 15% 20%, rgba(100,50,120,.3) 0%, transparent 50%),
        linear-gradient(160deg, #1a1a2e 0%, #252040 100%);
    position: relative;
}
.blog-category-card__placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20h40M20 0v40' stroke='rgba(255,255,255,.04)' stroke-width='.5'/%3E%3C/svg%3E");
    pointer-events: none;
}

.blog-category-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.08) 55%, transparent 100%);
    z-index: 1;
    transition: background var(--blog-transition);
}
.blog-category-card:hover .blog-category-card__overlay {
    background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.12) 55%, transparent 100%);
}

.blog-category-card__body {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding: 1.5rem;
}

.blog-category-card__name {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 .3rem;
    text-shadow: 0 1px 8px rgba(0,0,0,.5);
    color: #fff !important;
}

.blog-category-card__desc {
    font-size: .82rem;
    opacity: .82;
    margin: 0 0 .45rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-category-card__count {
    font-size: .72rem;
    font-weight: 600;
    opacity: .65;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ================================ */
/* CATEGORY HERO (List page)        */
/* ================================ */

.blog-category-hero {
    background: var(--blog-bg);
    padding: 3rem 0;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--blog-border);
}

.blog-category-hero__inner {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.blog-category-hero__text {
    flex: 1;
}

.blog-category-hero__title {
    font-size: clamp(1.8rem, 1rem + 2vw, 2.8rem);
    font-weight: 800;
    color: var(--blog-text) !important;
    margin: 0 0 1rem;
}

.blog-category-hero__desc {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--blog-text-secondary);
}

.blog-category-hero__image {
    flex: 0 0 280px;
    height: 200px;
    border-radius: var(--blog-radius);
    overflow: hidden;
}

.blog-category-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .blog-category-hero__inner {
        flex-direction: column;
        gap: 1.5rem;
    }
    .blog-category-hero__image {
        flex: none;
        width: 100%;
        height: 180px;
    }
}

/* ================================ */
/* SUBCATEGORIES                    */
/* ================================ */

.blog-subcategories {
    padding: 2rem 0;
    background: var(--blog-bg);
    margin-bottom: 2.5rem;
}

.blog-subcategories__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.blog-subcat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--blog-card-bg);
    border: 1px solid var(--blog-border);
    border-radius: var(--blog-radius-sm);
    padding: 1rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--blog-transition), transform var(--blog-transition);
}

.blog-subcat-card:hover {
    box-shadow: var(--blog-shadow-hover);
    transform: translateY(-2px);
    text-decoration: none;
}

.blog-subcat-card__image {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: var(--blog-radius-sm);
    overflow: hidden;
}

.blog-subcat-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-subcat-card__body {
    flex: 1;
    min-width: 0;
}

.blog-subcat-card__name {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .25rem;
    color: var(--blog-text) !important;
}

.blog-subcat-card__desc {
    font-size: .82rem;
    color: var(--blog-text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-subcat-card__arrow {
    color: var(--blog-text-muted);
    font-size: .85rem;
    transition: transform .2s ease;
}

.blog-subcat-card:hover .blog-subcat-card__arrow {
    transform: translateX(3px);
    color: var(--blog-pink);
}

/* ================================ */
/* POST CARDS GRID                  */
/* ================================ */

.blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.75rem;
    margin-bottom: 3rem;
    transition: opacity .25s ease;
}

.blog-post-card {
    background: var(--blog-card-bg);
    border-radius: var(--blog-radius);
    overflow: hidden;
    border: 1px solid var(--blog-border);
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    transition: box-shadow var(--blog-transition), transform var(--blog-transition), border-color var(--blog-transition);
    display: flex;
    flex-direction: column;
}

.blog-post-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.1);
    transform: translateY(-4px);
    border-color: transparent;
}

/* Card image */
.blog-post-card__image-link {
    display: block;
    text-decoration: none;
}

.blog-post-card__image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #f0f1f5;
}

.blog-post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.blog-post-card__image img.placeholder {
    object-fit: contain;
    padding: 2.5rem;
    opacity: .5;
}

.blog-post-card:hover .blog-post-card__image img:not(.placeholder) {
    transform: scale(1.06);
}

/* Card body */
.blog-post-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.4rem 1.5rem 1.5rem;
}

/* Category badge */
.blog-post-card__category {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--blog-pink);
    background: var(--blog-pink-light);
    padding: .3rem .7rem;
    border-radius: 999px;
    text-decoration: none;
    margin-bottom: .85rem;
    align-self: flex-start;
    transition: background var(--blog-transition), color var(--blog-transition);
}

.blog-post-card__category:hover {
    background: var(--blog-pink);
    color: #fff;
    text-decoration: none;
}

/* Card title */
.blog-post-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 .7rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-post-card__title a {
    color: var(--blog-text) !important;
    text-decoration: none;
    transition: color .15s ease;
}

.blog-post-card__title a:hover {
    color: var(--blog-pink) !important;
}

/* Card meta */
.blog-post-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    font-size: .8rem;
    color: var(--blog-text-muted);
    margin-bottom: .85rem;
}

.blog-post-card__meta i {
    margin-right: .25rem;
    color: var(--blog-pink);
    font-size: .75rem;
}

.blog-post-card__date,
.blog-post-card__author {
    display: inline-flex;
    align-items: center;
}

/* Excerpt */
.blog-post-card__excerpt {
    font-size: .88rem;
    line-height: 1.6;
    color: var(--blog-text-secondary);
    margin-bottom: 1rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tags */
.blog-post-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
}

.blog-post-card__tag {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--blog-bg);
    border: 1px solid var(--blog-border);
    font-size: .7rem;
    color: var(--blog-text-secondary);
    text-decoration: none;
    transition: background var(--blog-transition), border-color var(--blog-transition), color var(--blog-transition);
}

.blog-post-card__tag:hover {
    background: var(--blog-pink);
    border-color: var(--blog-pink);
    color: #fff;
    text-decoration: none;
}

/* Read more */
.blog-post-card__action {
    margin-top: auto;
}

.blog-post-card__read-more {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--blog-pink);
    text-decoration: none;
    transition: gap .2s ease;
}

.blog-post-card__read-more:hover {
    gap: .75rem;
    text-decoration: none;
    color: var(--blog-pink-dark);
}

/* ================================ */
/* VIEW ALL BUTTON                  */
/* ================================ */

.blog-view-all {
    text-align: center;
    margin: .5rem 0 3rem;
}

.blog-view-all__btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 2rem;
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    background: var(--blog-pink);
    border: none;
    border-radius: 999px;
    text-decoration: none;
    transition: background var(--blog-transition), gap .2s ease, box-shadow var(--blog-transition);
    box-shadow: 0 2px 10px rgba(194,57,114,.25);
}

.blog-view-all__btn:hover {
    background: var(--blog-pink-dark);
    color: #fff;
    text-decoration: none;
    gap: .85rem;
    box-shadow: 0 4px 18px rgba(194,57,114,.35);
}

/* ================================ */
/* EMPTY STATE                      */
/* ================================ */

.blog-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--blog-text-muted);
}

.blog-empty i {
    display: block;
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: .5;
}

/* ================================ */
/* PAGINATION                       */
/* ================================ */

.blog-pagination {
    margin: 2.5rem 0;
    text-align: center;
}

.blog-pagination__list {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.blog-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 .6rem;
    border-radius: var(--blog-radius-sm);
    font-size: .88rem;
    font-weight: 500;
    color: var(--blog-text);
    background: var(--blog-card-bg);
    border: 1px solid var(--blog-border);
    text-decoration: none;
    transition: background var(--blog-transition), color var(--blog-transition), border-color var(--blog-transition);
}

.blog-pagination__link:hover {
    background: var(--blog-pink-light);
    border-color: var(--blog-pink);
    color: var(--blog-pink);
    text-decoration: none;
}

.blog-pagination__link--active {
    background: var(--blog-pink) !important;
    border-color: var(--blog-pink) !important;
    color: #fff !important;
    font-weight: 700;
}

.blog-pagination__item--dots span {
    color: var(--blog-text-muted);
}

/* =========================================================
   Vitrina (product row) header — title + "Ver más" link
   ========================================================= */
.vitrina-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

.vitrina-titulo {
    margin: 0;
    text-transform: uppercase;
    flex: 1 1 auto;
}

.vitrina-ver-mas {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    padding: 6px 14px;
    border: 1.5px solid var(--color-primary);
    border-radius: 20px;
    transition: background-color 0.18s, color 0.18s;
}

.vitrina-ver-mas::after {
    content: "→";
    font-size: 0.9em;
    transition: transform 0.18s;
}

.vitrina-ver-mas:hover {
    background-color: var(--color-primary);
    color: #fff;
}

.vitrina-ver-mas:hover::after {
    transform: translateX(3px);
}

.blog-pagination__summary {
    font-size: .82rem;
    color: var(--blog-text-muted);
}

/* ================================ */
/* LATEST POSTS (Index)             */
/* ================================ */

.blog-latest {
    padding: 1.5rem 0 2rem;
}

/* ================================ */
/* RESPONSIVE BLOG                  */
/* ================================ */

@media (max-width: 768px) {
    .blog-hero {
        padding: 3rem 0 2.5rem;
    }
    .blog-hero__title {
        font-size: 1.7rem;
    }
    .blog-categories__grid {
        grid-template-columns: 1fr 1fr;
    }
    .blog-category-card {
        height: 170px;
    }
    .blog-posts-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .blog-post-card__image {
        height: 180px;
    }
    .blog-subcategories__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .blog-hero {
        padding: 2.5rem 0 2rem;
    }
    .blog-categories__grid {
        grid-template-columns: 1fr;
    }
    .blog-category-card {
        height: 160px;
    }
    .blog-post-card__title {
        font-size: 1.05rem;
    }
    .blog-post-card__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
    }
}
/* (category-image: kept for backward compat but no longer primary) */
.category-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--blog-radius-sm, 8px);
}

/* (Legacy post-card-meta responsive - kept for old components) */
@media (max-width: 480px) {
    .post-card-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
}



/* =================================== */
/* BLOG INDEX PAGE (legacy compat)     */
/* =================================== */

.blog-index-page {
    background: #fff;
}

/* =================================== */
/* BLOG SUBCATEGORIES (legacy compat)  */
/* =================================== */


/* =================================== */
/* SEPARADOR COMPONENT                 */
/* =================================== */

.separador-component {
    width: 100%;
    text-align: center;
}

.separador-component hr {
    border: none;
    border-top: 2px solid var(--separador-color, #e0e0e0);
    margin: 0;
}

/* Estilos */
.separador-solido hr { border-top-style: solid; }
.separador-punteado hr { border-top-style: dotted; }
.separador-discontinuo hr { border-top-style: dashed; }
.separador-doble hr { border-top-style: double; border-top-width: 4px; }
.separador-degradado hr {
    border: none;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--separador-color, #e0e0e0), transparent);
}
.separador-decorativo hr {
    border: none;
    height: 1px;
    background: var(--separador-color, #e0e0e0);
    position: relative;
}
.separador-decorativo hr::after {
    content: "✦";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 0 0.5rem;
    color: var(--separador-color, #C23972);
    font-size: 0.875rem;
}

/* Grosor */
.separador-grosor-fino hr { border-top-width: 1px; }
.separador-grosor-normal hr { border-top-width: 2px; }
.separador-grosor-grueso hr { border-top-width: 4px; }
.separador-degradado.separador-grosor-fino hr { height: 1px; }
.separador-degradado.separador-grosor-normal hr { height: 2px; }
.separador-degradado.separador-grosor-grueso hr { height: 4px; }

/* Anchura */
.separador-ancho-cuarto hr { width: 25%; display: inline-block; }
.separador-ancho-medio hr { width: 50%; display: inline-block; }
.separador-ancho-tres-cuartos hr { width: 75%; display: inline-block; }
.separador-ancho-completo hr { width: 100%; }

/* Espaciado superior */
.separador-mt-ninguno { margin-top: 0; }
.separador-mt-pequeno { margin-top: 0.5rem; }
.separador-mt-mediano { margin-top: 1.5rem; }
.separador-mt-grande { margin-top: 3rem; }

/* Espaciado inferior */
.separador-mb-ninguno { margin-bottom: 0; }
.separador-mb-pequeno { margin-bottom: 0.5rem; }
.separador-mb-mediano { margin-bottom: 1.5rem; }
.separador-mb-grande { margin-bottom: 3rem; }


/* =================================== */
/* CTA / CARTEL SEMANTIC VARIANTS      */
/* =================================== */

.cartel-anuncio-component,
.llamada-accion-component {
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    border-radius: 4px;
}

.cms-cta-default {
    background-color: #f5f5f5;
    color: #333;
}

.cms-cta-destacado {
    background: linear-gradient(to right, #C23972, #a0305d);
    color: #fff;
}

.cms-cta-destacado a {
    color: #fff;
    text-decoration: underline;
}

.cms-cta-informativo {
    background-color: #e8f4fd;
    color: #1a6fa8;
    border-left: 4px solid #1a6fa8;
}

.cms-cta-alerta {
    background-color: #fff3cd;
    color: #856404;
    border-left: 4px solid #ffc107;
}

.cms-cta-exito {
    background-color: #d4edda;
    color: #155724;
    border-left: 4px solid #28a745;
}

.cms-cta-oscuro {
    background-color: #1a1a2e;
    color: #ffffff;
}

.cms-cta-oscuro a {
    color: #C23972;
}

/* =================================== */
/* BLOQUE TEXTO COMPONENT              */
/* =================================== */

.bloque-texto-component {
    margin: 1rem 0;
}

.bloque-texto-titulo {
    margin-bottom: 0.75rem;
}

.bloque-texto-contenido {
    line-height: 1.7;
}

/* =================================== */
/* BANNER COMPONENT                    */
/* =================================== */

.banner-component {
    margin-bottom: 1rem;
}

.banner-component a {
    display: block;
    text-decoration: none;
}

.banner-image {
    width: 100%;
    height: auto;
}

/* =================================== */
/* CONJUNTO BANNERS COMPONENT          */
/* =================================== */

.conjunto-banners-component {
    margin: 1.5rem 0;
}

/* =================================== */
/* DIAPOSITIVAS COMPONENT              */
/* =================================== */

.diapositivas-component {
    margin: 1.5rem 0;
}

.diapositivas-titulo {
    margin-bottom: 1rem;
    font-weight: bold;
}

/* =================================== */
/* MEDIA COMPONENTS                    */
/* =================================== */

.imagen-component {
    margin: 1rem 0;
}

.imagen-pie {
    font-size: 0.875rem;
    color: #666;
    margin-top: 0.5rem;
    text-align: center;
}

.video-component {
    margin: 1rem 0;
}

.video-player {
    max-width: 100%;
    height: auto;
}

.video-pie {
    font-size: 0.875rem;
    color: #666;
    margin-top: 0.5rem;
}

.embed-component {
    margin: 1rem 0;
}

.embed-component iframe {
    max-width: 100%;
}