/* ============================================================
   blog.css — estilos exclusivos de /blog/ (índice + artículos)
   Se carga junto a servicio.css (hero, .reveal, .kicker, .seccion,
   .otras-carrusel/.tarjeta-otra ya vienen de ahí — no se repiten
   aquí). Usa las mismas variables con fallback que servicio.css:
   --rosa, --verde, --amarillo, --tinta, --crema, --gris, --linea
   ============================================================ */

/* ===== FILTRO DE CATEGORÍAS (índice) ===== */
.blog-filtros{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    padding:28px 0 8px;
}
.blog-filtros .chip{
    padding:9px 18px;
    border-radius:100px;
    font-size:.85rem;
    font-weight:500;
    color:var(--gris, #6B7373);
    white-space:nowrap;
    transition:all .2s ease;
    border:1px solid var(--linea, #E7E1D6);
    background:#fff;
    cursor:pointer;
}
.blog-filtros .chip:hover{ border-color:var(--verde, #1E9E8C); color:var(--verde, #1E9E8C); }
.blog-filtros .chip.activo{
    background:var(--verde, #1E9E8C);
    color:#fff;
    border-color:var(--verde, #1E9E8C);
}

/* ===== GRID DE ARTÍCULOS (índice) ===== */
.blog-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
    padding:24px 0 8px;
}
@media (max-width:980px){ .blog-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .blog-grid{ grid-template-columns:1fr; } }

.blog-card{
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid var(--linea, #E7E1D6);
    border-radius:20px;
    overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease;
}
.blog-card:hover{ transform:translateY(-6px); box-shadow:0 16px 32px rgba(30,158,140,.14); }

.blog-card-img{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.blog-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.blog-card:hover .blog-card-img img{ transform:scale(1.06); }

.blog-card-categoria{
    position:absolute;
    top:14px; left:14px;
    background:rgba(27,42,42,.85);
    color:#fff;
    font-size:.72rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;
    padding:6px 12px;
    border-radius:100px;
}

.blog-card-cuerpo{ padding:22px; display:flex; flex-direction:column; flex-grow:1; }
.blog-card-meta{
    font-size:.78rem;
    color:var(--gris, #6B7373);
    margin-bottom:10px;
    display:flex;
    gap:8px;
    align-items:center;
}
.blog-card-meta span:not(:last-child)::after{ content:"·"; margin-left:8px; }

.blog-card-cuerpo h3{
    font-family:var(--font-display, inherit);
    font-size:1.15rem;
    font-weight:600;
    line-height:1.3;
    margin-bottom:10px;
}
.blog-card-cuerpo h3 a{ color:var(--tinta, #1B2A2A); text-decoration:none; }
.blog-card-cuerpo h3 a:hover{ color:var(--verde, #1E9E8C); }

.blog-card-cuerpo p{ font-size:.92rem; color:var(--gris, #6B7373); flex-grow:1; margin-bottom:16px; }

.blog-card-link{
    font-size:.85rem;
    font-weight:600;
    color:var(--rosa, #E85D8A);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.blog-card-link:hover{ gap:10px; }

/* ===== ARTÍCULO — cabecera de metadatos bajo el hero =====
   Ahora vive dentro de <div class="container fila"> (ver plantilla.php),
   así que el ancho/alineación los da .container (1140px, mismo margen
   izquierdo que el hero/título) y aquí solo se define el padding
   vertical y el layout interno. */
.articulo-meta-barra{
    background:#fff;
    border-bottom:1px solid var(--linea, #E7E1D6);
}
.articulo-meta-barra .fila{
    padding:16px 0;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    font-size:.85rem;
    color:var(--gris, #6B7373);
}
.articulo-meta-barra .fila span:not(:last-child)::after{ content:"·"; margin-left:8px; }
.articulo-meta-barra a{ color:var(--verde, #1E9E8C); text-decoration:none; font-weight:600; }
.articulo-meta-barra a:hover{ text-decoration:underline; }

/* ===== ARTÍCULO — cuerpo (prose) =====
   plantilla.php ahora envuelve .articulo-cuerpo en <div class="container">,
   por lo que su borde izquierdo coincide con el del título del hero y el
   header. El max-width se mantiene angosto (ancho de lectura cómodo) pero
   ya NO se centra con margin:auto — queda pegado al margen izquierdo del
   container, evitando el efecto de columna flotando en medio de la página. */
.articulo-cuerpo{
    max-width:760px;
    margin:0;
    padding:8px 0 0;
}
.articulo-cuerpo h2{
    font-family:var(--font-display, inherit);
    font-size:clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight:600;
    margin:36px 0 14px;
    line-height:1.25;
    color:var(--tinta, #1B2A2A);
}
.articulo-cuerpo h3{
    font-family:var(--font-display, inherit);
    font-size:1.15rem;
    font-weight:600;
    margin:26px 0 10px;
    color:var(--tinta, #1B2A2A);
}
.articulo-cuerpo p{
    font-size:1.02rem;
    line-height:1.75;
    color:#3d4646;
    margin-bottom:16px;
}
.articulo-cuerpo ul, .articulo-cuerpo ol{
    margin:0 0 18px 1.3rem;
    color:#3d4646;
    font-size:1.02rem;
    line-height:1.7;
}
.articulo-cuerpo li{ margin-bottom:8px; }
.articulo-cuerpo strong{ color:var(--tinta, #1B2A2A); }
.articulo-cuerpo a{ color:var(--verde, #1E9E8C); font-weight:600; }

/* Imágenes embebidas dentro del cuerpo (aparte de la portada del hero).
   Basta con escribir <img src="..." alt="..."> directo en 'cuerpo_html' —
   no hace falta ninguna clase adicional. Envolver en <figure>/<figcaption>
   si se quiere pie de foto. */
.articulo-cuerpo img{
    width:100%;
    height:auto;
    border-radius:16px;
    margin:28px 0;
    display:block;
}
.articulo-cuerpo figure{ margin:28px 0; }
.articulo-cuerpo figure img{ margin:0 0 10px; }
.articulo-cuerpo figcaption{
    font-size:.85rem;
    color:var(--gris, #6B7373);
    text-align:center;
}

/* Caja CTA embebida a mitad de artículo */
.articulo-cta-caja{
    background:var(--crema, #FBF8F3);
    border:1px solid var(--linea, #E7E1D6);
    border-radius:20px;
    padding:26px 28px;
    margin:32px 0;
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:center;
    justify-content:space-between;
}
/* min-width (no flex-basis) a propósito: flex-basis sigue el eje
   principal, así que con flex-direction:column en mobile un
   flex-basis:260px se convertía en ALTO mínimo de 260px y dejaba un
   hueco enorme antes del botón. min-width no depende del eje. */
.articulo-cta-caja p{ margin:0; font-weight:600; color:var(--tinta, #1B2A2A); flex:1 1 auto; min-width:260px; }
.articulo-cta-caja .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 24px;
    border-radius:100px;
    font-weight:600;
    font-size:.9rem;
    background:var(--rosa, #E85D8A);
    color:#fff;
    white-space:nowrap;
    transition:all .25s ease;
}
.articulo-cta-caja .btn:hover{ background:#d34877; transform:translateY(-2px); }

/* Cita destacada dentro del artículo */
.articulo-cuerpo blockquote{
    border-left:3px solid var(--rosa, #E85D8A);
    padding:4px 0 4px 20px;
    margin:24px 0;
    font-size:1.1rem;
    font-style:italic;
    color:var(--tinta, #1B2A2A);
}

/* ===== VOLVER AL BLOG (uso independiente, fuera de .container) ===== */
.articulo-volver{
    max-width:760px;
    margin:28px auto 0;
    padding:0 24px;
}
.articulo-volver a{
    font-size:.88rem;
    font-weight:600;
    color:var(--gris, #6B7373);
    text-decoration:none;
}
.articulo-volver a:hover{ color:var(--verde, #1E9E8C); }

@media (max-width:600px){
    .articulo-cta-caja{ flex-direction:column; align-items:flex-start; }
}