/* Contenedor principal */
.mi-blog-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 60px 15% 90px 15%;
    background-color: var(--background-blog);
}

/* Cabecera: Título Izq, Filtro Der */
.blog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30px;
}

.blog-title-principal h1 {
    font: var(--headline-2-h2);
    color: var(--canvas-gray-900);
}

/* Estilo del Select (Filtro) */
.blog-filter select {
    padding: 10px 20px;
    border: 1px solid var(--canvas-gray-400);
    border-radius: 6px;
    font: var(--body-large);
    cursor: pointer;
    background-color: var(--primary-base);
    color: var(--canvas-gray-900);
    width: 350px;
}

/* Grilla: 3 Columnas */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
    gap: 30px; /* Espacio entre tarjetas */
}

/* Responsive: 1 columna en móvil */
@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
    .blog-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

/* Diseño de la Tarjeta */
.blog-card-page {
    border-radius: 24px;
    overflow: hidden;
    transition: transform 0.3s ease;
    border-radius: 24px;
    background-color: var(--primary-base);
}

.blog-card-page:hover {
    transform: translateY(-5px);
}

.blog-content {
    padding: 24px;
}

/* ========================================================== */

.blog-meta-cats {
    margin-bottom: 24px;
}

.blog-meta-cats a {
    color: var(--canvas-gray-800);
    font: var(--button-label);
    background-color: var(--canvas-gray-100);
    padding: 12px 18px;
    border-radius: 24px;
}

.blog-meta-cats a:hover {
    color: #000;
}

/* Ajuste del Título */
.blog-content h3 a{
    margin-top: 0;
    font: var(--headline-3-h3);
    color: var(--canvas-gray-800);
}

.blog-content h3 a:hover {color: var(--primary-red);}

.blog-principal-page .excerpt {
    font: var(--body-large);
    color: var(--canvas-gray-800);
    margin: 24px 0px 24px 0px;
}

/* Estilo del Botón "Leer artículo" */
.btn-leer-articulo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--canvas-gray-800);
    transition: color 0.3s ease;
    font: var(--subtitle-title);
}

/* La Flecha */
.btn-leer-articulo .arrow {
    margin-left: 8px;
    transition: transform 0.3s ease;
    font-size: 1.2em;
    color: var(--primary-red);
}

/* Efecto Hover en el botón */
.btn-leer-articulo:hover {
    color: var(--primary-red);
}

.btn-leer-articulo:hover .arrow {
    transform: translateX(5px); /* La flecha se mueve a la derecha */
}

/* ========================= ENTRADA ============================== */

.contenedor-blog {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  max-width: 100%;
  margin: 0;
  padding: 60px 15% 90px 15%;
  background-color: var(--background-blog);
}

.columna-izquierda-blog {
  background-color: var(--primary-base);
  padding: 30px;
}

h1.titulo-blog {
  font: var(--headline-2-h2);
  color: var(--canvas-gray-900);
}

.linea-divisora {
  border: none;
  height: 1px;
  background: var(--canvas-gray-300);
  margin: 24px 0;
}

.fecha-publicacion {
  font: var(--body-large);
  color: var(--canvas-gray-900);
  margin-bottom: 30px;
}

.autor-blog {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.autor-blog img {
  border-radius: 50%;
}

.relacionados-blog h3 {
  margin-top: 40px;
}
.relacionados-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.relacionado-item img {
  border-radius: 10px;
}

.mas-visto-item {
  margin-bottom: 30px;
}
.mas-visto-item img {
  width: 100%;
  border-radius: 10px;
}
.mas-visto-item h4 {
  margin-top: 10px;
}
.boton-ver-blog {
  display: inline-block;
  background: #0073aa;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.9rem;
}
.boton-ver-blog:hover {
  background: #005b85;
}

.curso-relacionado {
  margin-top: 40px;
}

.avatar-autor {
    width: 64px;
    height: 64px;
}

.autor-blog {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.nombre-autor {
    font: var(--body-large-bold);
    color: var(--canvas-gray-900);
}

.email-autor {
    font: var(--body-small);
    color: var(--canvas-gray-900);
}

.info-autor {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* CONTENIDO BLOG */

.contenido-blog {display: grid; gap: 30px;}
.contenido-blog img {width: 100%;}
.contenido-blog h2 {color: var(--canvas-gray-900); font: var(--headline-3-h3);}
.contenido-blog p, .contenido-blog ul {color: var(--canvas-gray-900); font: var(--subtitle-title); margin-bottom: 0;}
.contenido-blog li {margin-bottom: 6px;}

.contenedor-blog div#respond {padding: 48px 0px 0px 0px;}

.contenedor-blog .comment-reply-title {
    color: var(--canvas-gray-900);
    font: var(--headline-3-h3);
    margin-bottom: 18px;
}

.contenedor-blog .comments-area p.logged-in-as {
    font: var(--body-large);
    color: var(--canvas-gray-900);
    margin-bottom: 12px
}

.contenedor-blog textarea#comment {
    border-radius: 6px;
    border: 1px solid var(--canvas-gray-400);
    margin-bottom: 0px;
}

.contenedor-blog input#submit {
    background: var(--primary-red);
    color: var(--primary-base);
    font: var(--button-label);
    padding: 12px 28px;
    border-radius: 24px;
    transition: background 0.3s;
}

.contenedor-blog input#submit:hover, .contenedor-blog input#submit:focus {
    background: var(--secondary-red);
    color: var(--primary-base);
}

.contenedor-blog a {color: var(--canvas-gray-900); font: var(--body-large-bold);}
.contenedor-blog a:hover {color: var(--primary-red);}

/* COLUMNA DERECHA */

h3.ch3-a {
  color: var(--canvas-gray-900);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--canvas-gray-300);
}

.columna-derecha-blog .mas-visto-item {margin: 24px 0px 0px 0px;}

.seccion-inferior-entrada {
  padding: 24px;
  border-radius: 0px 0px 24px 24px;
  background-color: var(--primary-base);
}

.seccion-inferior-entrada h4 {
  margin: 0;
  font: var(--headline-3-h3);
  color: var(--canvas-gray-900);
}

.seccion-inferior-entrada p {
  font: var(--body-large);
  color: var(--canvas-gray-900);
  margin: 12px 0px 12px 0px;
}

.seccion-inferior-entrada a.boton-ver-blog {
  background: var(--primary-red);
  color: var(--primary-base);
  font: var(--button-label);
  padding: 12px 28px;
  border-radius: 24px;
  transition: background 0.3s;
}

.seccion-inferior-entrada a.boton-ver-blog:hover, .seccion-inferior-entrada a.boton-ver-blog:focus {
  background: var(--secondary-red);
  color: var(--primary-base);
}

.curso-relacionado-item {
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  margin-top: 24px;
}

.curso-relacionado-item:hover {
  transform: translateY(-5px);
}

.blog-seccion-inferior {
  background-color: var(--primary-base);
  border-radius: 0px 0px 24px 24px;
  padding: 24px;
}

h3.ch3-b {
  color: var(--canvas-gray-900);
  padding-top: 24px;
  border-top: 1px solid var(--canvas-gray-300);
}

.blog-seccion-inferior h4 {
  font: var(--headline-3-h3);
  color: var(--canvas-gray-900);
}

.blog-seccion-inferior p.curso-organizacion {
  font: var(--body-large);
  color: var(--canvas-gray-400);
  margin: 12px 0px 6px 0px;
}

.blog-seccion-inferior p {
  font: var(--body-large);
  color: var(--canvas-gray-600);
  margin-bottom: 12px;
}

/*  ==== */

.blog-seccion-inferior .texto-precio {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 24px;
}

.blog-seccion-inferior p.texto-ya-lo-tengo {
  color: var(--gold-brand);
  font: var(--headline-3-h3);
  margin-bottom: 24px;
}

.texto-precio {
    font: var(--headline-3-h3);
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--primary-red); 
}

.texto-precio del {
    color: var(--canvas-gray-500);
    text-decoration: line-through;
}

.texto-precio del .woocommerce-Price-amount {
    color: var(--canvas-gray-500); 
}

.texto-precio ins {
    text-decoration: none;
    background: transparent;
    color: var(--primary-red);
}

.blog-seccion-inferior a.boton-curso.comprar-curso,
.blog-seccion-inferior a.boton-curso.ver-curso {
  background: var(--primary-red);
  color: var(--primary-base);
  font: var(--button-label);
  padding: 12px 28px;
  border-radius: 24px;
  transition: background 0.3s;
}


.blog-seccion-inferior a.boton-curso.comprar-curso:hover,
.blog-seccion-inferior a.boton-curso.comprar-curso:focus,
.blog-seccion-inferior a.boton-curso.ver-curso:hover,
.blog-seccion-inferior a.boton-curso.ver-curso:focus {
  background: var(--secondary-red);
  color: var(--primary-base);
}