html {
    scroll-behavior: smooth;
    background-color: #FFFFFF;
}

/*-----------------------Section_Titulo_Blog_inicio-------------------------*/

.contenedor_titulo_blog_inicio {
    background-color: #FFFFFF;
}

.caja_titulo_blog{
    padding: 0 0 16px 0;
    margin: 0% auto;
    max-width: 1230px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.titulo_blog_inicio{
    font-size: 16px;
    width: 100%;
    font-family: "OpenSans-Regular";
    line-height: 1.1;
    color: #444444;
    padding: 16px 0%;
    margin: 0%;
    border-bottom: 0.5px solid #707070;
    border-top: 0.5px solid #707070;
}


/* ---------- Pantallas grandes --------- */
@media only screen and (max-width: 1600px){
    .caja_titulo_blog {
        max-width: 971px;
    }
    
}

/* ------------ Pantallas medianas ------------ */
@media only screen and (max-width: 991px){

    .caja_titulo_blog {
        max-width: 80%;
    }

}

/* ------------ Pantallas chicas ------------ */
@media only screen and (max-width: 600px){

    .caja_titulo_blog {
        max-width: 90%;
    }

}


/*---------------------Section_Titulo_Blog_inicio-----------------------*/

/*-----------------------Section_Contenido_Articulo-------------------------*/

.contenedor_articulo {
    padding: 0%;
    margin: 0% auto;
    max-width: 1230px;
    display: flex;
    align-items: flex-start;
    gap: 10%;
}

/* -------- Lado ziquierdo - Contenido ---------- */
.contenedor_col_izq_articulo {
    max-width: 70%;
    width: 100%;
}

.contenedor_contenido_articulo {
    margin: 0;
}

/* ---------- Categoria del articulo ------------ */
.contenedor_categorias_articulo {
    padding: 0%;
    margin: 0% 0% 16px 0%;
    max-width: 1230px;
}

.categoria_articulo {
    font-family: "OpenSans-Light";
    font-size: 12px;
    color: #444444;
    line-height: 1.1;
    margin: 0%;
    width: fit-content;
}

.contenedor_categorias_articulo a {
    color: inherit;
    text-decoration: none; 
}

/* ---------- Categoria del articulo ------------ */

/* ---------- Autor del articulo ------------ */
.contenedor_autor_articulo {
    max-width: 1230px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 40px 0;
}

.img_autor_articulo {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.nombre_autor_articulo {
    font-size: 12px;
    font-family: "OpenSans-Regular";
    color: #808080;
}
/* ---------- Autor del articulo ------------ */

/* ------ Indice de contenido -------- */
.contenedor_indice_contenido{
    width: 100%;
    background: #F7F7F7;
    border-radius: 15px;
    margin: 0 0 40px 0;
}

.contenido_indice{
    padding: 16px 32px;
    cursor: pointer;
}

.contenedor_indice_contenido a {
    color: inherit;
    text-decoration: none;
}

/* Indice cerrado - svg */
.indice_cerrado{
    display: flex;
    align-items: center;
    gap: 16px;
}

.indice_etiqueta{
    font-family: "OpenSans-Bold";
    font-size: 14px;
    margin: 0;
}

.indice_expandido {
    display: none;
    margin-top: 16px;
    font-size: 18px;
    font-family: "Kumbh Sans", sans-serif;
    color: #313131;
    line-height: 1.25;
}

.indice_expandido.activo {
    display: block;
}

.boton_indice_contenido{
    padding: 0;
    background: none;
    border: none;
}

.boton_indice_contenido img {
    transform: rotate(90deg);
    transition: transform .3s ease;
}

.boton_indice_contenido.girarArrowCard img{
    transform: rotate(270deg);
}

/* Indice expandido - bullets */
.campos_bullets {
    padding: 0%;
    width: 100%;
}

.lista-bullets{
    font-size: 14px;
    font-family: "OpenSans-Regular", sans-serif;
    color: #444444;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lista-bullets p{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.bullet{
    width: 4px;
    height: 4px;
    background-color: #FF0000;
    border-radius: 50%;
    flex-shrink: 0;
}
/* ----------- Indice de contenido ---------------- */

/* ------------ Imagenes dentro del articulo ------------- */

.contenedor_contenido_articulo .wp-block-image {
    width: 100%;
    display: flex;
    justify-content: center;
}

.contenedor_contenido_articulo .wp-block-image img {
    max-width: 100%;
    width: 100%;
    max-height: 464px;
    height: auto;
    border-radius: 25px;
    object-fit: cover;
    display: block;
}

/* Espacio */
.contenido_editor .wp-block-image {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estilo de la leyenda */
.contenido_editor .wp-block-image figcaption {
    margin-top: 8px;
    width: 80%;
    text-align: center;
    font-size: 14px;
    font-family: "OpenSans-Regular", sans-serif;
    color: #808080;
    line-height: 1.3;
}


/* ------------ Imagenes dentro del articulo ------------- */

/* ---------- Textos del artículo (ritmo editorial) --------- */

.titulo_articulo {
    font-size: 32px;
    font-family: "Pier_Sans_Bold", sans-serif;
    color: #444444;
    line-height: 1.15;
    width: 100%;
    margin: 0 0 24px 0;
}

/* Encabezados del contenido editorial */
.contenido_editor h1,
.contenido_editor h2,
.contenido_editor h3,
.contenido_editor h4,
.contenido_editor h5,
.contenido_editor h6 {
    font-size: 24px;
    font-family: "Pier_Sans_Bold", sans-serif;
    color: #444444;
    line-height: 1.15;
    width: 90%;
    margin: 0 0 16px 0;
}

/* Parrafos del contenido editorial */
.contenido_editor > p {
    font-size: 16px;
    font-family: "OpenSans-Regular", sans-serif;
    color: #444444;
    line-height: 1.5;
    margin: 0 0 20px 0;
}

.contenido_editor p + div:not(.contenedor_carrusel_articulos):not(.carrusel_wrapper_carrusel):not(.autor_recomendado_blog){
    font-size: 16px;
    font-family: "OpenSans-Regular", sans-serif;
    color: #444444;
    line-height: 1.15;
    width: 100%;
    margin: 0 0 20px 0;
}

/* Componente (div) - subtitulo */
.contenido_editor div:not(.contenedor_carrusel_articulos):not(.carrusel_wrapper_carrusel):not(.autor_recomendado_blog)
+ h1,
.contenido_editor div:not(.contenedor_carrusel_articulos):not(.carrusel_wrapper_carrusel):not(.autor_recomendado_blog)
+ h2,
.contenido_editor div:not(.contenedor_carrusel_articulos):not(.carrusel_wrapper_carrusel):not(.autor_recomendado_blog)
+ h3,
.contenido_editor div:not(.contenedor_carrusel_articulos):not(.carrusel_wrapper_carrusel):not(.autor_recomendado_blog)
+ h4,
.contenido_editor div:not(.contenedor_carrusel_articulos):not(.carrusel_wrapper_carrusel):not(.autor_recomendado_blog)
+ h5,
.contenido_editor div:not(.contenedor_carrusel_articulos):not(.carrusel_wrapper_carrusel):not(.autor_recomendado_blog)
+ h6 {
    margin-top: 40px;
}

.contenido_editor p + div:not(.contenedor_carrusel_articulos):not(.carrusel_wrapper_carrusel):not(.autor_recomendado_blog){
    margin-top: 40px;
}

/* --------- Espaciados especificos --------- */

/* Parrafo - imagen */
.contenido_editor p + .wp-block-image,
.contenido_editor p + figure {
    margin-top: 40px;
}

/* Parrafo - componente (banner, embed, etc.) */
/* .contenido_editor p + div {
    margin-top: 40px;
} */

.contenido_editor p + div:not(.contenedor_carrusel_articulos):not(.carrusel_wrapper_carrusel) {
    margin-top: 40px;
}

/* Parrafo - subtitulo */
.contenido_editor p + h1,
.contenido_editor p + h2,
.contenido_editor p + h3,
.contenido_editor p + h4,
.contenido_editor p + h5,
.contenido_editor p + h6 {
    margin-top: 40px;
}

/* Lista - subtitulo */
.contenido_editor ul + h1,
.contenido_editor ul + h2,
.contenido_editor ul + h3,
.contenido_editor ul + h4,
.contenido_editor ul + h5,
.contenido_editor ul + h6 {
    margin-top: 40px;
}

/* Lista - div */
.contenido_editor ul + div {
    margin-top: 40px;
}

/* ---------- Hipervínculos dentro del contenido del artículo ---------------- */

.contenido_editor p a,
.contenido_editor li a {
    font-family: "OpenSans-Bold", sans-serif;
    color: #FF4444;
    text-decoration: none;
}

.contenido_editor p a:hover,
.contenido_editor li a:hover {
    text-decoration: underline;
}

/* ---------- Listas dentro del contenido del artículo (Gutenberg) ---------- */

/* TODAS las listas creadas por el editor */
.contenido_editor ul,
.contenido_editor ol {
    margin: 15px 0;
    padding-left: 20px;
    list-style: none;
}

/* Items */
.contenido_editor li {
    margin-bottom: 8px;
    position: relative;
    font-size: 16px;
    font-family: "OpenSans-Regular", sans-serif;
    color: #444444;
    line-height: 1.15;
}

/* Bullet personalizado */
.contenido_editor li::before {
    content: "•";
    color: #FF4444;
    position: absolute;
    left: -20px;
}

/* ---------- Fin CSS general del artículo --------- */

/* ----- Lado derecho - Contacta a un experto ----- */
.contenedor_col_der_articulo {
    max-width: 20%;
    width: 100%;
    position: relative;
    align-self: stretch;
}

.sticky_contacta_experto {
    position: sticky;
    padding: 40px 0;
    top: 0; 
}

.card_top_contacta_experto {
    gap: 16px;
    display: flex;
    border: none;
    align-items: center;
}

.img_card_top_contacta_experto {
    width: 100%;
    height: 200px;
    border-radius: 50%;
    object-fit: contain;
}

/* ----------- Redes sociales - Desktop ------------ */
.card_bottom_contacta_experto {
    border: none;
}

.contenedor_redes {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;  /* permite que los elementos salten de línea en pantallas pequeñas */
    text-align: center;
    gap: 24px; /* espacio entre el texto y los iconos */
    padding-top: 64px;
}

.texto_contacta_experto_articulo {
    font-size: 14px;
    color: #444444;
    font-family: "OpenSans-Regular";
    margin: 0%;
    padding: 0%;
}

/* - SVGs - */
.contenedor_redes_desktop, .redes_ui_elements {
    display: flex;
    justify-content: center; /* centra horizontalmente */
    gap: 32px;              /* separación entre iconos */
    align-items: center;     /* centra verticalmente */
}

.icono_articulo {
    display: block;
    width: 25px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image 0.3s;
    cursor: pointer;
}

/* ----------- Redes sociales - Desktop ------------ */

/* ------------- ICONOS REDES SOCIALES ---------------- */
.icono_articulo {
    color: #444444;
}

.icono_articulo:hover {
    color: #FF4444 !important;
}

/* ------------- ICONOS REDES SOCIALES ---------------- */

/* ------- Redes sociales - Tableta y movil  ------------ */
.contenedor_hor_redes {
    width: 100%;
    margin: 64px 0 80px 0;
}

.mobile-redes {
    display: none;
}

.card_redes {
    border: none;
}

.redes_componente{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    padding: 0;
}

.texto_redes_componente{
    font-size: 14px;
    color: #444444;
    font-family: "OpenSans-Regular";
    margin: 0;
}

.redes_iconos{
    display: flex;
    gap: 32px;
    align-items: center;
    justify-content: center;
}
/* ------- Redes sociales - Tableta y movil  ------------ */


/* <<<<<<<<<<<<<<<<< MEDIA QUERIES >>>>>>>>>>>>>>>> */

/* ---------- Pantallas grandes --------- */
@media only screen and (max-width: 1600px){

    .contenedor_articulo,
    .contenedor_autor_articulo,
    .contenedor_categorias_articulo {
        max-width: 971px;
    }
 
    .contenedor_custom_arrows {
        max-width: 971px;
    }
}

/* ------------ Pantallas medianas ------------ */
@media only screen and (max-width: 991px){

    .contenedor_articulo,
    .contenedor_autor_articulo,
    .contenedor_categorias_articulo {
        max-width: 100%;
    }

    .contenedor_col_izq_articulo {
        max-width: 100%;
        width: 100%;
    }

    .contenedor_contenido_articulo {
        margin: 0 auto;
        width: 80%;
    }

    .contenedor_imagen_articulo {
        width: 100%;
        margin: 0%;
    }

    .contenedor_col_der_articulo {
        display: none;
    }

    .mobile-redes {
        display: block;
    }

    .imagenes_articulo{
        max-height: 100%;
        max-width: 100%;
    }

    .titulo_articulo {
        width: 90%;
        font-size: 27px;
        margin: 0 0 24px 0;
    }

    /* Encabezados del contenido editorial */
    .contenido_editor h1,
    .contenido_editor h2,
    .contenido_editor h3,
    .contenido_editor h4,
    .contenido_editor h5,
    .contenido_editor h6 {
        margin: 0 0 16px 0;
    }

    /* Parrafos del contenido editorial */
    .contenido_editor p {
        width: 90%;
        margin: 0 0 20px 0;
    }

    /* Parrafos del contenido editorial */
    .contenido_editor ul {
        width: 90%;
        margin: 0 0 0 0;
    }

}

/* ------------ Pantallas chicas ------------ */
@media only screen and (max-width: 600px){

    .contenedor_contenido_articulo {
        margin: 0 auto 0 auto;
        width: 90%;
    }

    .contenedor_imagen_articulo{
        width: 100%;
        margin: 0%;
    }

    .contenedor_categorias_articulo {
        width: 90%;
        margin: 0 auto 16px auto;
    }

    .contenedor_autor_articulo {
        width: 90%;
        margin: 0 auto 40px auto;
    }

    .titulo_articulo {
        width: 90%;
        font-size: 27px;
        margin: 0 auto 24px auto;
    }

    /* Encabezados del contenido editorial */
    .contenido_editor h1,
    .contenido_editor h2,
    .contenido_editor h3,
    .contenido_editor h4,
    .contenido_editor h5,
    .contenido_editor h6 {
        width: 90%;
        margin: 0 auto 16px auto;
    }

    /* Parrafos del contenido editorial */
    .contenido_editor p {
        width: 90%;
        margin: 0 auto 20px auto;
    }

    /* Parrafos del contenido editorial */
    .contenido_editor ul {
        width: 90%;
        margin: 0 auto 0 auto;
    }


}

/*---------------------END_Section_Contenido_Articulo-----------------------*/