/* Blog de printed-napkin.com. Va DESPUÉS de main.17845fc5.css y solo usa sus
   variables (:root); no redefine nada de la cabecera, el pie ni los botones. */

/* Migas de pan */
.migas{padding-top:var(--s-lg)}
/* En línea, no flex: un título largo fluye detrás del separador en vez de saltar entero de línea. */
.migas ol{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.5;letter-spacing:-.224px;color:var(--ink-muted-48)}
.migas li{display:inline}
.migas li+li::before{content:"\203A";margin:0 var(--s-xs);color:var(--ink-muted-48)}
.migas a{color:var(--ink-muted-80)}
.migas [aria-current="page"]{color:var(--ink-muted-48);overflow-wrap:anywhere}

/* Índice */
.blog-index .page-hero{padding-top:var(--s-lg)}
.blog-seccion{padding-top:var(--s-lg)}
.blog-lista{display:grid;gap:var(--s-lg);grid-template-columns:repeat(3,minmax(0,1fr))}
.blog-card{position:relative;display:flex;flex-direction:column;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--s-lg);transition:border-color .12s ease,box-shadow .12s ease}
.blog-card:hover{border-color:var(--primary);box-shadow:rgba(0,0,0,.06) 0 4px 18px}
.blog-card:focus-within{outline:2px solid var(--primary-focus);outline-offset:2px}
.blog-card-meta{order:-1;margin:0 0 var(--s-xs);font-size:14px;letter-spacing:-.224px;color:var(--ink-muted-48)}
.blog-card-title{font-size:1.3rem;line-height:1.2;margin:0 0 var(--s-sm)}
.blog-card-title a{color:var(--ink)}
.blog-card-title a:hover{text-decoration:none}
.blog-card-title a:focus-visible{outline:none}
/* Toda la tarjeta es clicable con un solo enlace (el del título). */
.blog-card-title a::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
.blog-card-excerpt{margin:0 0 var(--s-md);font-size:15px;line-height:1.47;letter-spacing:-.24px;color:var(--ink-muted-80)}
.blog-card-more{margin-top:auto;font-size:14px;letter-spacing:-.224px;color:var(--primary)}

.blog-vacio{background:var(--parchment);border-radius:var(--r-lg);padding:var(--s-xl);max-width:760px}
.blog-vacio h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:var(--s-sm)}
.blog-vacio ul{margin:0 0 var(--s-lg);padding-left:1.2em}
.blog-vacio li{margin-bottom:var(--s-xs);color:var(--ink-muted-80)}
.blog-vacio p{color:var(--ink-muted-80)}
.blog-vacio .hero-cta{justify-content:flex-start;margin:0}

/* Entrada */
.entrada{max-width:740px;margin:0 auto;padding:0 0 var(--s-section)}
.entrada-cabecera{padding:var(--s-xl) 0 var(--s-lg);border-bottom:1px solid var(--hairline);margin-bottom:var(--s-xl)}
.entrada-cabecera h1{font-size:clamp(1.9rem,4vw,2.9rem);max-width:none;margin-bottom:var(--s-md)}
.entrada-cabecera .lead{max-width:none;margin-bottom:var(--s-md)}
.entrada-meta{margin:0;font-size:14px;letter-spacing:-.224px;color:var(--ink-muted-48)}

.prose{font-size:18px;line-height:1.6;letter-spacing:-.3px;overflow-wrap:break-word}
.prose>*:first-child{margin-top:0}
.prose h2{font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.15;margin:var(--s-xxl) 0 var(--s-md)}
.prose h3{font-size:1.2rem;margin:var(--s-xl) 0 var(--s-xs)}
.prose p,.prose ul,.prose ol{margin:0 0 1.15em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-bottom:.45em}
.prose a{text-decoration:underline;text-underline-offset:2px}
.prose strong{font-weight:600}
.prose img{border-radius:var(--r-md)}
.prose figure{margin:var(--s-xl) 0}
.prose figcaption{margin-top:var(--s-xs);font-size:14px;line-height:1.43;letter-spacing:-.224px;color:var(--ink-muted-48)}
.prose blockquote{margin:var(--s-lg) 0;padding:var(--s-xs) 0 var(--s-xs) var(--s-lg);border-left:3px solid var(--primary);color:var(--ink-muted-80)}
.prose blockquote p:last-child{margin-bottom:0}
/* main.css pone table{min-width:520px} pensando en .table-wrap; una tabla suelta
   del cuerpo se hace bloque con scroll propio para no ensanchar la página en móvil. */
.prose table{display:block;overflow-x:auto;width:auto;min-width:0;max-width:100%;border-collapse:collapse;margin:var(--s-lg) 0;font-size:15px;line-height:1.4}
.prose .table-wrap{margin:var(--s-lg) 0}
.prose .table-wrap table{display:table;width:100%;min-width:520px;margin:0}
.prose th,.prose td{text-align:left;padding:var(--s-sm) var(--s-md);border-bottom:1px solid var(--hairline);vertical-align:top}
.prose th{font-weight:600}
.prose hr{border:0;border-top:1px solid var(--hairline);margin:var(--s-xxl) 0}
.prose code{font-size:.9em;background:var(--parchment);padding:1px 5px;border-radius:var(--r-sm)}

.entrada-cta{margin-top:var(--s-xxl);background:var(--parchment);border-radius:var(--r-lg);padding:var(--s-xl)}
.entrada-cta h2{font-size:clamp(1.35rem,2.4vw,1.75rem);margin-bottom:var(--s-xs)}
.entrada-cta p{color:var(--ink-muted-80);max-width:min(58ch,100%)}
.entrada-cta .hero-cta{justify-content:flex-start;margin:var(--s-md) 0 0}
.btn-wa{background:#25d366;color:#0b2e1a;border-color:#0b7a43;gap:var(--s-xs)}
.btn-wa:hover{background:#1fbf5b;color:#0b2e1a}
.btn-wa svg{width:20px;height:20px;flex-shrink:0}

.entrada-volver{margin-top:var(--s-xl);font-size:15px}

@media (max-width:1068px){.blog-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .blog-lista{grid-template-columns:1fr}
  .blog-vacio,.entrada-cta{padding:var(--s-lg)}
  .prose{font-size:17px}
  .entrada-cta .hero-cta .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.blog-card{transition:none}}