/* assets/pages/articulo.css · blog A1: entrada, indice y categorias (spec 2026-10-22-blog-a1-design; UI revisada 2026-10-22). Solo tokens --lf-* */
.lf-article{--lf-read:44rem;--lf-wide:69rem}

/* Cabecera: columna de lectura en la entrada; contenedor entero en el indice */
.lf-article__head{padding-block:var(--lf-s-6) var(--lf-s-6)}
.lf-article:not(.lf-blog) .lf-article__head{max-width:calc(var(--lf-read) + 2 * var(--lf-gutter))}
.lf-article__crumbs{display:flex;flex-wrap:wrap;gap:var(--lf-s-2);margin-bottom:var(--lf-s-5);font:600 var(--lf-fs-label)/1.4 var(--lf-font-head);letter-spacing:var(--lf-ls-label);text-transform:uppercase;color:var(--lf-gold-dark)}
.lf-article__crumbs a{color:inherit;display:inline-block;min-height:24px}
.lf-article__h1{max-width:22ch;margin:0;font:400 clamp(32px,4.2vw,58px)/1.06 var(--lf-font-head);letter-spacing:-.015em;color:var(--lf-ink)}
.lf-article__lead{max-width:60ch;margin:var(--lf-s-5) 0 0;font-size:var(--lf-fs-lead);line-height:1.6;color:var(--lf-text-soft-on-light)}
.lf-article__lead p{margin:0}
.lf-article__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--lf-s-3) var(--lf-s-5);margin-top:var(--lf-s-6);padding-top:var(--lf-s-4);border-top:1px solid var(--lf-line-light)}
.lf-article__meta p{display:flex;flex-wrap:wrap;gap:var(--lf-s-2);margin:0;font-size:var(--lf-fs-small);color:var(--lf-text-soft-on-light)}
.lf-article__share{display:inline-flex;align-items:center;gap:var(--lf-s-2);min-height:44px;padding:0 var(--lf-s-4);border:1px solid var(--lf-line-light);background:transparent;color:var(--lf-ink);font:600 var(--lf-fs-label)/1 var(--lf-font-head);letter-spacing:var(--lf-ls-label);text-transform:uppercase;cursor:pointer}
.lf-article__share svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lf-article__share:hover{border-color:var(--lf-gold-dark)}
.lf-article__share:focus-visible{outline:2px solid var(--lf-gold-dark);outline-offset:2px}

/* Foto de cabecera: entera, en su proporcion, centrada en una columna mas ancha que la de lectura */
.lf-article__hero{max-width:calc(var(--lf-wide) + 2 * var(--lf-gutter));margin:0 auto var(--lf-s-2);text-align:center}
.lf-article__hero img{display:inline-block;width:auto;max-width:100%;height:auto;max-height:76svh;vertical-align:top}

/* Cuerpo: indice pegajoso a la izquierda en escritorio, columna de lectura de ~68 caracteres */
.lf-article__body{padding-top:var(--lf-s-8)}
.lf-article__grid{display:block}
.lf-article__prose{max-width:var(--lf-read);margin-inline:auto;font-size:16px;line-height:1.75}
.lf-article__prose p,.lf-article__prose li{font-size:inherit}
.lf-article__prose>p:first-child{margin-top:0}
.lf-article__prose img{display:block;width:auto;max-width:100%;height:auto;margin-inline:auto} /* imagenes del cuerpo enteras */
.lf-article__prose figure{margin-inline:0}
.lf-article__prose figcaption{margin-top:var(--lf-s-2);font-size:var(--lf-fs-small);color:var(--lf-text-soft-on-light)}
.lf-article__prose blockquote{position:relative;margin:var(--lf-s-8) 0;padding:var(--lf-s-2) 0 var(--lf-s-2) var(--lf-s-7);border-left:0;font:400 clamp(20px,2vw,24px)/1.45 var(--lf-font-head);color:var(--lf-ink)}
.lf-article__prose blockquote::before{content:"“";position:absolute;left:0;top:-.15em;font:400 56px/1 var(--lf-font-head);color:var(--lf-gold)}
.lf-article__prose blockquote p{margin:0}
.lf-article__tip{position:relative;margin-block:var(--lf-s-8);padding:var(--lf-s-6) var(--lf-s-6) var(--lf-s-6) var(--lf-s-7);border-top:1px solid var(--lf-gold);border-bottom:1px solid var(--lf-gold);background:var(--lf-ivory)}
.lf-article__tip p{margin:0;font-size:var(--lf-fs-body);line-height:1.7}
.lf-article__tip p+p{margin-top:var(--lf-s-2)}
.lf-article__tip p:not(.lf-article__tip-k){font:400 var(--lf-fs-lead)/1.6 var(--lf-font-head);color:var(--lf-ink)}
.lf-article__tip-k{display:flex;align-items:center;gap:var(--lf-s-2);margin-bottom:var(--lf-s-3)!important;font:600 var(--lf-fs-label)/1.5 var(--lf-font-head)!important;letter-spacing:var(--lf-ls-label);text-transform:uppercase;color:var(--lf-gold-dark)}
.lf-article__tip-k::before{content:"";width:22px;height:1px;background:var(--lf-gold-dark)}
.lf-article__table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-block:var(--lf-s-6)}
.lf-article__table:focus-visible{outline:2px solid var(--lf-gold-dark);outline-offset:2px}
.lf-article__table table{min-width:480px;font-size:var(--lf-fs-small)}
.lf-article__table th{font:600 var(--lf-fs-label)/1.4 var(--lf-font-head);letter-spacing:var(--lf-ls-label);text-transform:uppercase}
.lf-article__toc-wrap{max-width:var(--lf-read);margin:0 auto var(--lf-s-8)}
.lf-article__toc{padding:var(--lf-s-4) var(--lf-s-5);border:1px solid var(--lf-line-light);background:var(--lf-white)}
.lf-article__toc summary{cursor:pointer;min-height:24px;font:600 var(--lf-fs-label)/1.6 var(--lf-font-head);letter-spacing:var(--lf-ls-label);text-transform:uppercase}
.lf-article__toc summary:focus-visible{outline:2px solid var(--lf-gold-dark);outline-offset:3px}
.lf-article__toc ol{margin:var(--lf-s-3) 0 0;padding-left:1.4em;font-size:var(--lf-fs-body)}
.lf-article__toc li+li{margin-top:var(--lf-s-1)}
.lf-article__toc a{display:inline-block;min-height:24px;padding-block:2px;color:var(--lf-ink);text-decoration:none}
.lf-article__toc a:hover,.lf-article__toc a[aria-current]{text-decoration:underline;text-underline-offset:3px}
.lf-article__h2{margin:0 0 var(--lf-s-6);font:400 var(--lf-fs-h2)/1.15 var(--lf-font-head);letter-spacing:-.01em}

/* Productos: banda propia despues del texto, con su cabecera */
.lf-article__shop-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--lf-s-3) var(--lf-s-6);margin-bottom:var(--lf-s-6)}
.lf-article__shop-head .lf-article__h2{margin:0}
.lf-article__shop-head .lf-kicker{margin-bottom:var(--lf-s-2)}
.lf-article .lf-product-card__title,.lf-article .lf-product-card__price{font-size:var(--lf-fs-body)}
.lf-article .lf-product-card__sub{font-size:var(--lf-fs-small)}
.lf-article .lf-product-card__buy,.lf-article .lf-product-card__badge{font-size:var(--lf-fs-label)}

/* Preguntas, autoria, cierre */
.lf-article__faq .lf-faq__q summary{font-size:var(--lf-fs-body)}
.lf-article__faq .lf-faq__q p{font-size:var(--lf-fs-body);line-height:1.7}
.lf-article__author-in{max-width:var(--lf-read);margin-inline:auto;padding-top:var(--lf-s-6);border-top:1px solid var(--lf-gold)}
.lf-article__author-in p{margin:0 0 var(--lf-s-4);font-size:var(--lf-fs-body);line-height:1.7}
.lf-article__author-in .lf-kicker{margin-bottom:var(--lf-s-2)}
.lf-article__author-links{display:flex;flex-wrap:wrap;gap:var(--lf-s-4) var(--lf-s-6)}
.lf-article__close-in{display:grid;justify-items:start;gap:var(--lf-s-4);max-width:var(--lf-read)}
.lf-article__close-in p{margin:0;font-size:var(--lf-fs-lead);line-height:1.6;color:var(--lf-text-soft-on-dark)}
.lf-article__close .lf-article__h2{margin:0;color:var(--lf-paper)}

/* Filtro por tema */
.lf-blog__filter{margin-top:var(--lf-s-7)}
.lf-blog__filter ul{display:flex;gap:var(--lf-s-2);margin:0;padding:0 0 var(--lf-s-1);list-style:none;overflow-x:auto;scrollbar-width:thin}
.lf-blog__filter a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--lf-s-4);white-space:nowrap;box-shadow:inset 0 0 0 1px var(--lf-line-light);font:600 var(--lf-fs-label)/1 var(--lf-font-head);letter-spacing:var(--lf-ls-label);text-transform:uppercase;color:var(--lf-ink);text-decoration:none}
.lf-blog__filter a:hover{box-shadow:inset 0 0 0 1px var(--lf-ink)}
.lf-blog__filter a[aria-current]{background:var(--lf-deep);color:var(--lf-paper);box-shadow:none}
.lf-blog__filter a:focus-visible{outline:2px solid var(--lf-gold-dark);outline-offset:2px}

/* Tarjetas: foto arriba en formato fijo (rellena la tarjeta, como las de producto), tema, titulo, extracto */
.lf-blog__list{padding-top:var(--lf-s-6)}
.lf-posts{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--lf-s-8) var(--lf-s-6)}
.lf-post{position:relative;display:flex;flex-direction:column;gap:var(--lf-s-4);min-width:0}
.lf-post__fig{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--lf-white)}
.lf-post__fig img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform .6s ease} /* tarjeta del indice: rejilla uniforme (criterio de las tarjetas de producto); en la entrada la foto va entera */
.lf-post:hover .lf-post__fig img{transform:scale(1.02)}
@media (prefers-reduced-motion:reduce){.lf-post__fig img{transition:none}.lf-post:hover .lf-post__fig img{transform:none}}
.lf-post__txt{min-width:0}
.lf-post__k{margin:0 0 var(--lf-s-2);font:600 var(--lf-fs-label)/1.4 var(--lf-font-head);letter-spacing:var(--lf-ls-label);text-transform:uppercase;color:var(--lf-gold-dark)}
.lf-post__t{margin:0;font:400 var(--lf-fs-h3)/1.3 var(--lf-font-head);color:var(--lf-ink)}
.lf-post__t a{color:inherit;text-decoration:none}
.lf-post__t a:hover{text-decoration:underline;text-underline-offset:3px}
.lf-post__t a::after{content:"";position:absolute;inset:0} /* toda la tarjeta es el enlace */
.lf-post__t a:focus-visible{outline:none}
.lf-post:has(a:focus-visible){outline:2px solid var(--lf-gold-dark);outline-offset:6px}
.lf-post__x{margin:var(--lf-s-3) 0 0;max-width:60ch;font-size:var(--lf-fs-body);line-height:1.6;color:var(--lf-text-soft-on-light)}
.lf-post__m{margin:var(--lf-s-3) 0 0;font-size:var(--lf-fs-small);color:var(--lf-text-soft-on-light)}
.lf-blog__lead-post{margin-bottom:var(--lf-s-10);padding-bottom:var(--lf-s-10);border-bottom:1px solid var(--lf-line-light)}
.lf-post--hero .lf-post__t{font-size:clamp(26px,3vw,40px);line-height:1.12}
.lf-post--hero .lf-post__x{font-size:var(--lf-fs-lead)}
.lf-blog__pages ul{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--lf-s-2);margin:var(--lf-s-10) 0 0;padding:0;list-style:none}
.lf-blog__pages a,.lf-blog__pages span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 var(--lf-s-3);font:600 var(--lf-fs-label)/1 var(--lf-font-head);letter-spacing:var(--lf-ls-label);text-transform:uppercase;color:var(--lf-ink);text-decoration:none;box-shadow:inset 0 0 0 1px var(--lf-line-light)}
.lf-blog__pages .current{background:var(--lf-deep);color:var(--lf-paper);box-shadow:none}
.lf-blog__pages .dots{box-shadow:none}

@media (min-width:600px){
  .lf-posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
  .lf-article__prose{font-size:17px}
}
@media (min-width:1024px){
  .lf-article__head{padding-block:var(--lf-s-8) var(--lf-s-7)}
  .lf-posts{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lf-s-10) var(--lf-s-7)}
  .lf-post--hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--lf-s-9);align-items:center}
  .lf-post--hero .lf-post__fig{aspect-ratio:4/3}
  .lf-article__faq .lf-faq__inner{display:grid;grid-template-columns:4fr 8fr;gap:70px}
  .lf-article__shop .lf-rail>:nth-child(n+5){display:none} /* escritorio: 4 tarjetas; en movil se deslizan todas */
}
@media (min-width:1200px){
  /* indice pegajoso a la izquierda; la columna de lectura queda en el eje de la foto */
  .lf-article__grid--toc{display:grid;grid-template-columns:15rem minmax(0,var(--lf-read)) 15rem;justify-content:center;gap:var(--lf-s-8);align-items:start}
  .lf-article__grid--toc .lf-article__toc-wrap{position:sticky;top:calc(var(--lfh-h,92px) + var(--lf-s-6));margin:0;max-height:calc(100svh - var(--lfh-h,92px) - var(--lf-s-10));overflow:auto}
  .lf-article__grid--toc .lf-article__toc{padding:0;border:0;background:none}
  .lf-article__grid--toc .lf-article__toc summary{pointer-events:none;list-style:none;padding-bottom:var(--lf-s-3);border-bottom:1px solid var(--lf-line-light)}
  .lf-article__grid--toc .lf-article__toc summary::-webkit-details-marker{display:none}
  .lf-article__grid--toc .lf-article__toc ol{padding-left:0;list-style:none;font-size:var(--lf-fs-small);counter-reset:lf-toc}
  .lf-article__grid--toc .lf-article__toc li{counter-increment:lf-toc;display:grid;grid-template-columns:1.8em minmax(0,1fr)}
  .lf-article__grid--toc .lf-article__toc li::before{content:counter(lf-toc,decimal-leading-zero);padding-top:4px;font:400 var(--lf-fs-small)/1.4 var(--lf-font-head);color:var(--lf-gold-dark)}
  .lf-article__grid--toc .lf-article__toc a{line-height:1.45;color:var(--lf-text-soft-on-light)}
  .lf-article__grid--toc .lf-article__toc a[aria-current]{color:var(--lf-ink)}
  .lf-article__grid--toc .lf-article__prose{margin:0}
}
/* Para saber mas: guias con mas clics (plan SEO 2026-10-25, Task 5) */
.lf-article__guides ul{display:flex;flex-wrap:wrap;gap:var(--lf-s-3) var(--lf-s-6);margin:0;padding:0;list-style:none}