/* ===================================================
   blog.css
   Estilos específicos para la página de blog.html
   =================================================== */


/* ======================================
   1. SECCIÓN PRINCIPAL DEL BLOG
   ====================================== */

.seccion-blog {
  background-color: #fff;
  padding: 40px 20px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
font-family: "Poppins", "Sans-serif";
}

.seccion-blog h2 {
  width: 100%;
  font-size: 2.5em;
  color: #1f2937;
  margin-bottom: 20px;
    font-family: "Poppins", "Sans-serif";

}

.seccion-blog p {
  font-size: 1.1em;
  color: #333;
  margin-bottom: 30px;
    font-family: "Poppins", "Sans-serif";

}


/* ======================================
   2. CARTA DE PRESENTACIÓN DEL BLOG
   ====================================== */

.presentacion-blog {
  max-width: 800px;
  margin: 60px auto;
  padding: 40px 30px;
  background-color: #fdfcfb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
  color: #1f2937;
  line-height: 1.8;
  text-align: center;
  position: relative;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
font-family: "Poppins", "Sans-serif";

}

.presentacion-blog:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.presentacion-blog h2 {
  font-size: 2.2em;
  color: #2b1f7a;
  margin-bottom: 15px;
  text-align: center;
    font-family: "Poppins", "Sans-serif";
}

.presentacion-blog .frase-destacada {
  font-size: 1.4em;
  font-weight: bold;
  color: #5c3dc4;
  margin-bottom: 30px;
  text-align: center;
        font-family: "Poppins", "Sans-serif";

}

.presentacion-blog p {
  font-size: 1.1em;
  margin-bottom: 20px;
}

.presentacion-blog .cierre {
  font-style: italic;
  color: #374151;
  margin-top: 30px;
}

.presentacion-blog::before {
  position: absolute;
  top: -15px;
  left: 20px;
  font-size: 1.5rem;
  color: #a78bfa;
}


/* ======================================
   3. TARJETAS POR CATEGORÍA
   ====================================== */

.categoria-blog {
  flex: 1 1 300px;
  max-width: 450px;
  background-color: #f9f9f9;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.07);
  transition: transform 0.3s, box-shadow 0.3s;
  text-align: left;
  position: relative;
}

.categoria-blog:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.categoria-blog h3 {
  font-size: 1.4em;
  margin-bottom: 20px;
  font-weight: bold;
}


/* ======================================
   4. ARTÍCULO INDIVIDUAL DENTRO DE CATEGORÍA
   ====================================== */

.categoria-blog article h4 {
  font-size: 1.3em;
  margin-bottom: 10px;
  color: #2b1f7a;
}

.categoria-blog article p {
  font-size: 1.1em;
  color: #333;
  line-height: 1.6;
  margin-bottom: 15px;
}

.categoria-blog article a {
  color: #5c3dc4;
  font-weight: bold;
  text-decoration: none;
}

.categoria-blog article a:hover {
  text-decoration: underline;
}

.imagen-entrada {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}


/* ======================================
   5. COLORES PERSONALIZADOS POR CATEGORÍA
   ====================================== */

#confesional {
  border-left: 6px solid #f43f5e;
  background-color: #ffe4e6;
}

#gestion-academica {
  border-left: 6px solid #059669;
  background-color: #d1fae5;
}

#analisis-narrativo {
  border-left: 6px solid #facc15;
  background-color: #fef9c3;
}

#tecnicas-escritura {
  border-left: 6px solid #7c3aed;
  background-color: #ede9fe;
}

#inspiracion-creativa {
  border-left: 6px solid #2563eb; /* Azul intenso */
  background-color: #dbeafe;      /* Azul suave */
}

/* ======================================
   6. TODOS LOS ARTÍCULOS + FILTROS
   ====================================== */

/* ===== Sección híbrida (filtros + conmutador) ===== */
.seccion-todos { background:#fff; padding:50px 20px 60px; border-top:1px solid #e5e7eb; text-align:center; font-family:"Poppins","Sans-serif"; }
.seccion-todos h2 { font-size:2.2em; color:#1f2937; margin-bottom:22px; }

.toolbar-filtros { max-width:1100px; margin:0 auto 28px; display:flex; flex-wrap:wrap; gap:16px 20px; align-items:center; justify-content:space-between; }

.filtros-categorias { display:flex; flex-wrap:wrap; gap:10px; }
.boton-filtro { appearance:none; border:2px solid #5b52bc; background:transparent; color:#5b52bc; padding:8px 14px; border-radius:999px; font-weight:600; cursor:pointer; transition:transform .15s, background-color .15s, color .15s, box-shadow .15s; }
.boton-filtro:hover { transform: translateY(-1px); }
.boton-filtro:focus-visible { outline:3px solid #ffee03; outline-offset:2px; }
.boton-filtro.activo { background:#5b52bc; color:#fff; box-shadow:0 6px 14px rgba(91,82,188,.25); }

.buscador { display:grid; gap:6px; min-width:260px; max-width:360px; width:100%; text-align:left; }
.buscador label { font-size:.9rem; color:#374151; }
.buscador input[type="search"] { border:2px solid #e5e7eb; border-radius:10px; padding:10px 12px; font-size:1rem; transition:border-color .15s, box-shadow .15s; }
.buscador input[type="search"]:focus { border-color:#5b52bc; box-shadow:0 0 0 4px rgba(91,82,188,.15); outline:none; }
.ayuda-busqueda { font-size:.85rem; color:#6b7280; }

/* Conmutador de vista */
.conmutador-vista { display:flex; gap:10px; }
.btn-vista { border:2px solid #6b7280; background:#fff; color:#374151; padding:8px 14px; border-radius:12px; font-weight:700; cursor:pointer; transition:transform .15s, background-color .15s, color .15s, border-color .15s; }
.btn-vista:hover { transform: translateY(-1px); }
.btn-vista.activo { border-color:#5b52bc; background:#5b52bc; color:#fff; }

/* ===== Vista TARJETAS ===== */
.grid-articulos { max-width:1200px; margin:10px auto 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:26px; align-items:stretch; }
.tarjeta-articulo { background:#f9f9f9; border-radius:14px; overflow:hidden; text-align:left; box-shadow:0 8px 16px rgba(0,0,0,.06); transition:transform .2s, box-shadow .2s; display:grid; grid-template-rows:auto 1fr; border-left:6px solid transparent; }
.tarjeta-articulo:hover { transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,.10); }
.tarjeta-media img { width:100%; height:180px; object-fit:cover; display:block; }
.tarjeta-contenido { padding:16px 16px 18px; display:grid; gap:10px; }
.tarjeta-titulo a { color:#2b1f7a; font-size:1.15rem; font-weight:700; text-decoration:none; }
.tarjeta-titulo a:hover { text-decoration:underline; }
.tarjeta-resumen { color:#333; line-height:1.55; }

/* Badges */
.badge { display:inline-block; font-size:.8rem; font-weight:700; padding:4px 10px; border-radius:999px; background:#e5e7eb; color:#111827; white-space:nowrap; }
.badge-analisis { background:#fef9c3; color:#7a5a00; }
.badge-confesional { background:#ffe4e6; color:#9f1239; }
.badge-academica { background:#d1fae5; color:#065f46; }
.badge-inspiracion { background:#dbeafe; color:#1e40af; }
.badge-tecnicas { background:#ede9fe; color:#5b21b6; }

/* Bordes laterales por categoría (coherente con tu diseño) */
.cat-analisis-narrativo { border-left-color:#facc15; }
.cat-confesional { border-left-color:#f43f5e; }
.cat-gestion-academica { border-left-color:#059669; }
.cat-inspiracion-creativa { border-left-color:#2563eb; }
.cat-tecnicas-escritura { border-left-color:#7c3aed; }

/* ===== Vista TABLA ===== */
.tabla-wrapper { max-width:1200px; margin:0 auto; overflow-x:auto; border-radius:14px; box-shadow:0 8px 16px rgba(0,0,0,.06); background:#fff; }
.tabla-articulos { width:100%; border-collapse:separate; border-spacing:0; }
.tabla-articulos thead th { position:sticky; top:0; background:#f8f7ff; color:#1f2937; text-align:left; font-weight:700; padding:14px 16px; border-bottom:2px solid #e5e7eb; }
.tabla-articulos tbody td { padding:14px 16px; border-bottom:1px solid #eee; vertical-align:top; }
.tabla-articulos tbody tr:hover { background:#fafafa; }
.celda-titulo .titulo-link { color:#2b1f7a; font-weight:700; text-decoration:none; }
.celda-titulo .titulo-link:hover { text-decoration:underline; }

.contador { margin-top:18px; color:#374151; font-weight:600; }
.mensaje-vacio { max-width:800px; margin:18px auto 0; padding:16px; border-radius:10px; background:#fff7ed; color:#9a3412; border:1px solid #fdba74; font-weight:600; text-align:center; }

/* Utilidad accesible */
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }

/* Responsive */
@media (max-width:640px){
  .toolbar-filtros { justify-content:center; }
  .buscador { max-width:100%; }
  .tarjeta-media img { height:160px; }
}

/* --- FIX imagen en vista tarjetas --- */
.tarjeta-media {
  position: relative;
  aspect-ratio: 16 / 9;     /* mantiene 16:9, evita recortes raros */
  overflow: hidden;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
.tarjeta-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* rellena sin deformar */
  object-position: center;  /* centra el encuadre */
  display: block;
}

/* cuando solo hay 1 tarjeta visible, centramos y limitamos ancho */
.grid-articulos.grid-solo {
  max-width: 560px;         /* ajusta a tu gusto: 520–640px suele quedar bien */
  margin-left: auto;
  margin-right: auto;
}

/* opcional: si quieres encuadre más alto (por banners con texto), descomenta: */
/* .tarjeta-media img { object-position: 50% 40%; } */