/* ══════════════════════════════════════════
   BLOG — Estilos públicos
   ══════════════════════════════════════════ */

/* ── Filtros de categoría ── */
.blog-filtros{
  padding:0 2rem 1.5rem;
  max-width:960px;
  margin:0 auto;
}
.blog-filtros-inner{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.filtro-btn{
  background:transparent;
  color:var(--texto-s);
  border:1px solid var(--beige);
  padding:6px 18px;
  border-radius:20px;
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:all .2s;
}
.filtro-btn:hover{
  border-color:var(--verde);
  color:var(--verde);
}
.filtro-btn.active{
  background:var(--verde);
  color:var(--crema);
  border-color:var(--verde);
}

/* ── Grid de entradas ── */
.blog-section{
  padding:1rem 2rem 4rem;
}
.blog-inner{
  max-width:960px;
  margin:0 auto;
}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:1.5rem;
}

/* ── Tarjeta de entrada ── */
.blog-card{
  background:var(--blanco);
  border:1px solid var(--beige);
  border-radius:16px;
  overflow:hidden;
  transition:transform .2s, box-shadow .2s;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
}
.blog-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(26,74,58,.08);
}
.blog-card-img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}
.blog-card-body{
  padding:1.25rem;
  flex:1;
  display:flex;
  flex-direction:column;
}
.blog-card-cat{
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--verde-m);
  margin-bottom:.5rem;
}
.blog-card-titulo{
  font-family:'Playfair Display',serif;
  font-size:1.1rem;
  font-weight:600;
  color:var(--verde);
  margin-bottom:.5rem;
  line-height:1.35;
}
.blog-card-extracto{
  font-size:.87rem;
  line-height:1.6;
  color:var(--texto-s);
  margin-bottom:1rem;
  flex:1;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.blog-card-fecha{
  font-size:.78rem;
  color:var(--beige);
  border-top:1px solid var(--beige);
  padding-top:.75rem;
  margin-top:auto;
}

/* ── Estados de carga ── */
.blog-cargando{
  text-align:center;
  padding:4rem 2rem;
  color:var(--texto-s);
}
.spinner{
  width:32px;height:32px;
  border:3px solid var(--beige);
  border-top-color:var(--verde);
  border-radius:50%;
  animation:spin .7s linear infinite;
  margin:0 auto 1rem;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.blog-vacio{
  text-align:center;
  padding:4rem 2rem;
  color:var(--texto-s);
  font-size:.95rem;
}

/* ══════════════════════════════════════════
   ENTRADA INDIVIDUAL
   ══════════════════════════════════════════ */
.entrada{
  max-width:720px;
  margin:0 auto;
  padding:7rem 2rem 3rem;
}
.entrada-volver{
  display:inline-block;
  font-size:.85rem;
  color:var(--verde-m);
  text-decoration:none;
  margin-bottom:1.5rem;
  transition:color .2s;
}
.entrada-volver:hover{ color:var(--verde) }

.entrada-cat{
  display:inline-block;
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--verde-m);
  background:rgba(26,74,58,.06);
  padding:4px 12px;
  border-radius:12px;
  margin-bottom:1rem;
}
.entrada-titulo{
  font-family:'Playfair Display',serif;
  font-size:2rem;
  font-weight:700;
  color:var(--verde);
  line-height:1.25;
  margin-bottom:.75rem;
}
.entrada-meta{
  font-size:.85rem;
  color:var(--texto-s);
  margin-bottom:2rem;
}
.entrada-meta-sep{
  margin:0 .5rem;
  opacity:.4;
}

/* Portada */
.entrada-portada-wrap{
  margin-bottom:2rem;
}
.entrada-portada{
  width:100%;
  max-height:420px;
  object-fit:cover;
  border-radius:16px;
  display:block;
}

/* Contenido renderizado */
.entrada-contenido{
  font-size:1rem;
  line-height:1.85;
  color:var(--texto);
}
.entrada-contenido h2{
  font-family:'Playfair Display',serif;
  font-size:1.4rem;
  font-weight:600;
  color:var(--verde);
  margin:2rem 0 .75rem;
}
.entrada-contenido h3{
  font-family:'Playfair Display',serif;
  font-size:1.15rem;
  font-weight:600;
  color:var(--verde);
  margin:1.5rem 0 .5rem;
}
.entrada-contenido p{
  margin-bottom:1.25rem;
}
.entrada-contenido ul, .entrada-contenido ol{
  margin:1rem 0 1.25rem 1.5rem;
}
.entrada-contenido li{
  margin-bottom:.4rem;
}
.entrada-contenido blockquote{
  border-left:3px solid var(--verde);
  padding:.75rem 1.25rem;
  margin:1.5rem 0;
  background:rgba(26,74,58,.03);
  border-radius:0 8px 8px 0;
  font-style:italic;
  color:var(--texto-s);
}
.entrada-contenido a{
  color:var(--verde);
  text-decoration:underline;
}
.entrada-contenido img{
  max-width:100%;
  border-radius:12px;
  margin:1.5rem 0;
}
.entrada-contenido strong{
  font-weight:500;
  color:var(--verde);
}

/* ── Compartir ── */
.entrada-compartir{
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--beige);
}
.entrada-compartir-label{
  font-size:.9rem;
  color:var(--texto-s);
  margin-bottom:.75rem;
}
.entrada-compartir-btns{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.share-btn{
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  font-weight:500;
  padding:7px 16px;
  border-radius:20px;
  text-decoration:none;
  border:1px solid var(--beige);
  color:var(--texto-s);
  background:transparent;
  cursor:pointer;
  transition:all .2s;
}
.share-btn:hover{
  border-color:var(--verde);
  color:var(--verde);
}

/* ══════════════════════════════════════════
   COMENTARIOS
   ══════════════════════════════════════════ */
.comentarios-section{
  margin-top:3rem;
  padding-top:2rem;
  border-top:1px solid var(--beige);
}
.comentarios-titulo{
  font-family:'Playfair Display',serif;
  font-size:1.3rem;
  font-weight:600;
  color:var(--verde);
  margin-bottom:1.5rem;
}

/* Lista de comentarios */
.comentario{
  padding:1rem 0;
  border-bottom:1px solid rgba(217,205,184,.4);
}
.comentario:last-child{ border-bottom:none }
.comentario-header{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:.4rem;
}
.comentario-avatar{
  width:32px;height:32px;
  border-radius:50%;
  background:var(--verde);
  color:var(--crema);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:500;
  flex-shrink:0;
}
.comentario-nombre{
  font-size:.9rem;
  font-weight:500;
  color:var(--texto);
}
.comentario-fecha{
  font-size:.78rem;
  color:var(--texto-s);
  opacity:.6;
}
.comentario-texto{
  font-size:.9rem;
  line-height:1.6;
  color:var(--texto-s);
  padding-left:44px;
}
.comentarios-vacio{
  color:var(--texto-s);
  font-size:.9rem;
  font-style:italic;
}

/* Formulario de comentario */
.comentario-form{
  margin-top:2rem;
  padding:1.5rem;
  background:var(--blanco);
  border:1px solid var(--beige);
  border-radius:12px;
}
.comentario-form-titulo{
  font-family:'Playfair Display',serif;
  font-size:1.05rem;
  font-weight:600;
  color:var(--verde);
  margin-bottom:1rem;
}
.com-input, .com-textarea{
  width:100%;
  font-family:'DM Sans',sans-serif;
  font-size:.9rem;
  padding:10px 14px;
  border:1px solid var(--beige);
  border-radius:8px;
  background:var(--crema);
  color:var(--texto);
  outline:none;
  transition:border-color .2s;
  margin-bottom:.75rem;
}
.com-input:focus, .com-textarea:focus{
  border-color:var(--verde);
}
.com-textarea{
  resize:vertical;
  min-height:80px;
}
.com-form-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.75rem;
}
.com-nota{
  font-size:.78rem;
  color:var(--texto-s);
  opacity:.6;
}
.com-enviar{
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  font-weight:500;
  padding:10px 22px;
  border-radius:25px;
  border:none;
  background:var(--verde);
  color:var(--crema);
  cursor:pointer;
  transition:background .2s;
}
.com-enviar:hover{ background:var(--verde-m) }
.com-enviar:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.com-feedback{
  font-size:.85rem;
  margin-top:.75rem;
  padding:8px 14px;
  border-radius:8px;
}
.com-feedback.exito{
  background:rgba(26,74,58,.06);
  color:var(--verde);
}
.com-feedback.error{
  background:rgba(231,76,60,.06);
  color:#e74c3c;
}

/* ── Entrada no encontrada ── */
.entrada-error{
  text-align:center;
  padding:10rem 2rem 4rem;
}
.entrada-error h2{
  font-family:'Playfair Display',serif;
  font-size:1.6rem;
  color:var(--verde);
  margin-bottom:.75rem;
}
.entrada-error p{
  color:var(--texto-s);
  margin-bottom:1.5rem;
}

/* ── Responsive ── */
@media(max-width:600px){
  .blog-grid{
    grid-template-columns:1fr;
  }
  .entrada-titulo{
    font-size:1.5rem;
  }
  .entrada{
    padding:6rem 1.25rem 2rem;
  }
  .comentario-texto{
    padding-left:0;
    margin-top:.4rem;
  }
  .com-form-footer{
    flex-direction:column;
    align-items:stretch;
  }
}