/* Blog (ES /blog, EN /en/blog) · réplica de la página de lista del Blog de Wix
   Caja blanca sobre el fondo arena, "All Posts", H1 del embed "H1 fixes", tarjeta del post (o el estado vacío en EN)
   y el pie corto de las páginas de blog ("© 2026 by SILVESTRE." en vez del footer completo). */
:root{
  --blog-azul:#384ad3;                 /* enlaces del widget de Blog de Wix (rgb 56,74,211) */
  --blog-borde:rgba(227,227,227,.75);  /* borde de la tarjeta */
  --blog-linea:rgba(0,0,0,.2);
  --blog-avatar:#c13a1b;               /* círculo "S" del autor */
}

.blog-arena{padding:20px 5%;--arena-velo:rgba(169,146,95,.21)}
/* en el Blog de Wix la textura no va en mosaico: es una sola foto que cubre la sección (object-fit:cover), al 50 % sobre el velo */
.blog-arena::before{background-size:cover;background-repeat:no-repeat}
.blog-caja{background:var(--blanco);color:var(--negro);padding:0 20px 20px}

/* "All Posts" */
.blog-nav{padding-top:30px;font-family:var(--f-avenir);font-weight:300;font-size:14px;line-height:20px}
.blog-nav a{color:var(--blog-azul);text-decoration:none}
.blog-nav a:hover{text-decoration:underline}

/* H1 (embed "H1 fixes"): caja a la izquierda, centrada en su propio ancho, como en Wix */
.blog-cabecera{width:calc((100% + 40px) * .708);margin-left:-20px;padding-top:70px}
.blog-cabecera .h1-embed{color:var(--texto);margin-bottom:10px}

/* Lista de posts */
.blog-lista{list-style:none;margin:83px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:20px}
.blog-tarjeta{position:relative;width:290px;height:567.5px;border:1px solid var(--blog-borde);background:var(--blanco);display:flex;flex-direction:column;overflow:hidden}
.blog-tarjeta__img{display:block;width:100%;height:217.5px;object-fit:cover;flex:none}
.blog-tarjeta__info{flex:1;display:flex;flex-direction:column;padding:28px 24px 25px;min-height:0}
.blog-meta{display:flex;align-items:center;gap:12px;height:34px;margin-bottom:18px;font-family:var(--f-avenir);font-weight:300;font-size:12px;line-height:1.35;color:var(--negro)}
.blog-meta__textos{display:flex;flex-direction:column;min-width:0}
.blog-meta__textos > span:last-child{display:flex;align-items:center}
.blog-meta__nombre{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blog-meta__punto{display:inline-block;width:2px;height:2px;border-radius:50%;background:currentColor;vertical-align:middle;margin:0 6px}
.blog-avatar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--blog-avatar);color:var(--blanco);font-family:var(--f-inter);font-weight:400;font-size:16px;line-height:1}
.blog-avatar::before{content:"S"}
.blog-tarjeta__titulo{margin:0 0 11px;font-family:var(--f-poppins);font-weight:600;font-size:22px;line-height:1.4;color:var(--negro);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.blog-tarjeta__titulo a{color:inherit;text-decoration:none}
.blog-tarjeta__titulo a::after{content:"";position:absolute;inset:0;z-index:1}
.blog-tarjeta:hover .blog-tarjeta__titulo a{color:var(--oro)}
.blog-tarjeta__titulo a:focus-visible{outline:none}
.blog-tarjeta:focus-within{outline:2px solid var(--texto);outline-offset:3px}
.blog-tarjeta__resumen{margin:0;font-family:var(--f-avenir);font-weight:300;font-size:16px;line-height:21px;color:var(--negro);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.blog-tarjeta__linea{margin:auto 0 0;width:100%;border:0;border-top:1px solid var(--blog-linea);height:0}

/* Estado vacío (EN: Wix no tiene posts publicados en inglés) */
.blog-vacio{text-align:center;padding:214px 20px 137px}
.blog-vacio__titulo{max-width:600px;margin:0 auto;font-family:var(--f-poppins);font-weight:600;font-size:32px;line-height:1.5;color:var(--negro)}
.blog-vacio__texto{margin:10px 0 0;font-family:var(--f-avenir);font-weight:300;font-size:16px;line-height:1.5;color:var(--negro)}

/* Pie corto de las páginas de blog */
.blog-pie{min-height:340px;display:flex;align-items:flex-end;justify-content:center;padding:0 20px 25px;background:var(--blanco)}
.blog-pie p{width:40%;text-align:center;font-family:var(--f-avenir);font-weight:500;font-size:14px;line-height:1.6;color:var(--negro)}

@media (max-width:1000px){
  .blog-pie p{width:50%}
}

@media (max-width:750px){
  .blog-arena{padding:20px}
  .blog-caja{padding:0 0 20px}
  .blog-nav{display:none}
  .blog-cabecera{width:244px;margin-left:0;padding-top:40px}
  .blog-lista{margin-top:62px;display:block}
  .blog-tarjeta{width:100%;height:auto;border:0}
  .blog-tarjeta__img{height:auto;aspect-ratio:1/1}
  .blog-tarjeta__info{padding:31px 18px 6px}
  .blog-meta{margin-bottom:14px;font-size:12px}
  .blog-meta__nombre{font-size:13px}
  .blog-tarjeta__titulo{font-size:24px;margin-bottom:12px}
  .blog-tarjeta__linea{margin-top:51px}
  .blog-vacio{padding:60px 20px 15px}
  .blog-vacio__titulo{font-size:24px;line-height:1.4}
  .blog-vacio__texto{max-width:290px;margin:14px auto 0;line-height:1.2}
  .blog-pie{margin-bottom:60px}
  .blog-pie p{width:100%}
}