/* Ficha de artículo con el rediseño (propuesta 10, ronda 2), publicada el 2026-10-12 en español e
   inglés. La carga solo templates/articulos/ficha_nueva.html. Todo cuelga de .af y lleva prefijo
   af-, para no tocar la ficha anterior (?plantilla=anterior en dev) ni el resto del sitio.
   Grises de la paleta del sitio (--gris-*), como /articulos (.ar en style.css). */

.af{
  --ink:rgb(var(--gris-900)); --ink2:rgb(var(--gris-700)); --mute:rgb(var(--gris-600)); --soft:rgb(var(--gris-500)); --faint:rgb(var(--gris-400));
  --bg:#fff; --bg1:rgb(var(--gris-50)); --bg2:rgb(var(--gris-100));
  --line:rgb(var(--gris-200)); --line2:rgb(var(--gris-100)); --blue:#2563eb; --blue2:#1d4ed8;
  --acc:var(--bev); /* antetítulos, numeración y marcadores: contenido en Pizarra; el azul, solo enlaces y hover */
  --cabecera:80px; /* la cabecera fija de base.html (h-20): margen de los anclajes y del lateral */
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:15px; line-height:1.5;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; padding-bottom:80px;
}
.af :where(h1,h2,h3,h4,p,figure,ol,ul,dl,dd,blockquote){ margin:0; }
.af a{ color:inherit; text-decoration:none; }
.af img{ display:block; max-width:100%; }
.af-wrap{ max-width:1280px; margin:0 auto; padding:0 16px; }
@media (min-width:640px){ .af-wrap{ padding:0 24px; } }
@media (min-width:1024px){ .af-wrap{ padding:0 32px; } }

.af-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); }
.af-meta{ font-size:12px; color:var(--soft); }
.af-dot{ margin:0 6px; color:var(--faint); }
.af-meta .af-dot{ margin:0 4px; }
.af .af-more{ font-size:13px; font-weight:600; color:var(--blue); }
.af .af-more:hover{ color:var(--blue2); }
.af-ph{ background:var(--bg2); overflow:hidden; }
.af-ph img{ width:100%; height:100%; object-fit:cover; }

/* ── Rejilla: columna de lectura a 760 px y lateral de 300 px desde 1200 px ── */
.af-lay{ display:grid; grid-template-columns:minmax(0,1fr); }
.af-main{ width:100%; max-width:760px; margin:0 auto; }
@media (min-width:1200px){
  .af-lay{ grid-template-columns:minmax(0,760px) 300px; justify-content:space-between; }
  .af-main{ margin:0; }
  .af-solo-estrecho{ display:none; }
}

/* ── Cabecera: migas › foto › categoría › titular › firma, sin entradilla ── */
.af-crumb{ padding:12px 0; font-size:12px; color:var(--soft); }
.af-crumb a:hover{ color:var(--ink); }
.af-crumb span{ margin:0 6px; color:var(--faint); }
.af-crumb em{ font-style:normal; } /* categoría sin enlace (inglés: no hay listado por categoría en /en/) */
.af-hero{ margin:0 -16px; }
.af-hero img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:var(--bg2); }
.af-hd .af-eyebrow{ margin-top:20px; }
.af-hd h1{ margin:8px 0 14px; font-size:28px; line-height:1.2; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
@media (min-width:640px){ .af-hero{ margin:0; } }
@media (min-width:1024px){ .af-hero img{ aspect-ratio:21/9; } .af-hd .af-eyebrow{ margin-top:24px; } .af-hd h1{ font-size:36px; } }
.af-by{ display:flex; align-items:center; gap:12px; font-size:13px; color:var(--soft); }
.af-av{ flex:none; }
.af-av img{ width:36px; height:36px; border-radius:50%; object-fit:cover; background:var(--bg2); }
.af-by a{ color:var(--ink); font-weight:600; }
.af .af-by .af-upd{ color:var(--soft); font-weight:400; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
.af-dbg{ color:#b91c1c; }

/* ── Cuerpo ── */
.af-prose{ margin-top:24px; font-size:16px; line-height:1.7; color:var(--ink2); }
.af-prose p{ margin:0 0 20px; }
.af-prose strong{ font-weight:600; color:var(--ink); }
.af-prose em{ font-style:italic; }
.af-prose p a, .af-prose li a, .af-prose td a, .af-prose blockquote a{
  color:var(--ink); text-decoration:underline; text-decoration-color:rgb(var(--gris-300)); text-underline-offset:3px; }
.af-prose p a:hover, .af-prose li a:hover, .af-prose td a:hover, .af-prose blockquote a:hover{
  color:var(--blue); text-decoration-color:var(--blue); }
.af-prose h1, .af-prose h2{ clear:both; margin:56px 0 16px; font-size:24px; line-height:1.25; font-weight:700;
  letter-spacing:-.01em; color:var(--ink); scroll-margin-top:calc(var(--cabecera) + 24px); }
.af-prose h2:first-of-type{ margin-top:40px; }
.af-h2n{ display:block; margin-bottom:4px; font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--acc); }
.af-prose h3{ margin:36px 0 12px; font-size:19px; line-height:1.3; font-weight:700; color:var(--ink);
  scroll-margin-top:calc(var(--cabecera) + 24px); }
.af-prose h4{ margin:28px 0 8px; font-size:16px; line-height:1.35; font-weight:700; color:var(--ink); }
.af-prose hr{ display:none; }
.af-prose ul, .af-prose ol{ margin:0 0 20px; padding-left:24px; }
.af-prose ul{ list-style:disc; }
.af-prose ol{ list-style:decimal; }
.af-prose li{ margin-bottom:8px; }
.af-prose li::marker{ color:var(--faint); }
.af-prose blockquote{ margin:28px 0; padding:4px 0 4px 20px; border-left:2px solid var(--ink); font-size:17px; color:var(--ink); }
.af-prose blockquote p:last-child{ margin-bottom:0; }
.af-prose code{ padding:1px 5px; border-radius:4px; background:var(--bg2); font-size:14px; }
.af-prose pre{ margin:0 0 20px; padding:16px; overflow-x:auto; border:1px solid var(--line); background:var(--bg1); font-size:14px; }
.af-prose pre code{ padding:0; background:none; }
.af-prose p img{ margin:8px 0; }
@media (max-width:639px){ .af-prose{ line-height:1.65; } .af-prose h1, .af-prose h2{ margin-top:48px; font-size:22px; } }

/* Tablas: el envoltorio con scroll horizontal lo pone loaders.py; los degradados, articles.js. */
.af-prose .article-table-scroll{ position:relative; margin:28px 0; overflow:hidden; border:1px solid var(--line); border-radius:6px; }
.af-prose .article-table-scroll__viewport{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.af-prose table{ width:100%; border-collapse:collapse; font-size:14px; line-height:1.45; }
.af-prose th{ padding:10px 12px; border-bottom:1px solid var(--line); background:var(--bg1); text-align:left; font-weight:600; color:var(--ink); }
.af-prose thead th{ background:var(--bev); border-bottom-color:var(--bev); color:#fff; } /* cabecera en el verde Pizarra */
.af-prose td{ padding:10px 12px; border-bottom:1px solid var(--line2); vertical-align:top; font-variant-numeric:tabular-nums; }
.af-prose tr:last-child td{ border-bottom:0; }
.af-prose .article-table-scroll::before, .af-prose .article-table-scroll::after{ content:""; position:absolute; top:1px; bottom:1px;
  z-index:1; width:36px; pointer-events:none; opacity:0; transition:opacity .2s ease; }
.af-prose .article-table-scroll::before{ left:1px; background:linear-gradient(to right, rgb(var(--gris-900) / .12), rgb(var(--gris-900) / 0)); }
.af-prose .article-table-scroll::after{ right:1px; background:linear-gradient(to left, rgb(var(--gris-900) / .12), rgb(var(--gris-900) / 0)); }
.af-prose .article-table-scroll.can-scroll-left::before, .af-prose .article-table-scroll.can-scroll-right::after{ opacity:1; }

/* Clases que el texto de algunos artículos trae escritas a mano. Venían de articles.css, que esta
   página no carga (sus reglas de .article-content chocarían con las de aquí). */
.af-prose .image-float-right, .af-prose .image-float-left{ width:50%; height:auto; }
.af-prose .image-float-right{ float:right; margin:4px 0 16px 28px; }
.af-prose .image-float-left{ float:left; margin:4px 28px 16px 0; }
.af-prose .image-float-left-min{ float:left; width:18%; margin:16px 28px 16px 0; }
.af-prose .logo-float-right{ float:right; width:25%; margin:24px 0 16px 28px; }
.af-prose img.article-table-image{ display:inline-block; width:auto; height:30px; max-width:60px; vertical-align:middle; }
.af-prose .two-images{ display:flex; gap:8px; margin:24px 0; }
.af-prose .two-images img{ flex:1 1 0; min-width:0; height:auto; object-fit:cover; }
.af-prose blockquote:has(p.public-declaration){ padding:12px 0 12px 24px; border-left-width:4px; }
.af-prose p.public-declaration{ margin:0; font-size:20px; line-height:1.5; font-style:italic; color:var(--ink); }
.af-prose p.public-declaration strong{ display:block; margin-top:12px; font-size:14px; font-style:normal; font-weight:600; }
@media (max-width:767px){
  .af-prose .image-float-right, .af-prose .image-float-left{ float:none; width:100%; margin:16px 0; }
  .af-prose .two-images{ flex-direction:column; }
}

/* Aviso de enlaces de afiliado (artículos de tipo Promotion) */
.af-prose .af-aviso{ margin:0 0 24px; padding:8px 12px; border-left:2px solid var(--line); background:var(--bg1); font-size:13px; line-height:1.5; color:var(--mute); }

/* ── Imágenes y galerías del cuerpo ── */
.af-fig{ margin:24px 0 28px; }
.af-fig img{ width:100%; height:auto; background:var(--bg2); }
.af-fig figcaption{ margin-top:8px; font-size:12px; line-height:1.5; color:var(--soft); }
.af-hint{ color:var(--faint); }
.af .af-cap-a{ font-weight:600; color:var(--blue); }
.af .af-cap-a:hover{ color:var(--blue2); }
@media (min-width:768px){
  .af-fig--float{ float:right; width:50%; margin:4px 0 16px 28px; }
  .af-fig--center{ width:80%; margin-left:auto; margin-right:auto; }
}
.af-zoom{ position:relative; }
.af-zoom img, .af-strip img[data-article-zoom]{ cursor:zoom-in; }
.af-zoom-btn{ position:absolute; top:8px; right:8px; display:flex; align-items:center; justify-content:center; width:36px; height:36px;
  border:0; border-radius:50%; background:rgb(0 0 0 / .4); color:#fff; cursor:pointer; }
.af-zoom-btn:hover{ background:rgb(0 0 0 / .6); }
.af-zoom-btn svg{ width:18px; height:18px; }
.af-strip{ display:grid; grid-auto-flow:column; grid-auto-columns:88%; gap:8px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x mandatory; }
.af-strip:has(> img:only-child){ grid-auto-columns:100%; }
.af-strip img{ aspect-ratio:16/9; object-fit:cover; scroll-snap-align:start; }
.af-gal--adapt .af-strip{ align-items:start; }
.af-gal--adapt .af-strip img{ aspect-ratio:auto; }
@media (max-width:639px){
  .af-fig{ margin-left:-16px; margin-right:-16px; }
  .af-fig figcaption{ padding:0 16px; }
  .af-strip{ grid-auto-columns:85%; padding-left:16px; scroll-padding-left:16px; }
}

/* ── Qué leer durante la lectura ── */
.af-rec{ margin:32px 0; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.af-prose hr + .af-rec{ margin-top:0; border-top:0; }
.af-rec a{ display:grid; grid-template-columns:200px 1fr; gap:20px; align-items:center; }
.af-rec .af-ph{ aspect-ratio:16/9; }
.af-rec small{ display:block; margin-bottom:6px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); }
.af-rec b{ font-size:16px; line-height:1.35; font-weight:600; color:var(--ink); }
.af-rec a:hover b{ color:var(--blue2); }
@media (max-width:639px){ .af-rec a{ grid-template-columns:120px 1fr; gap:12px; } .af-rec b{ font-size:15px; } }
.af-relink{ margin:28px 0; padding:12px 0 12px 16px; border-left:2px solid var(--acc); }
.af-relink small{ display:block; margin-bottom:2px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); }
.af-relink a{ font-size:15px; line-height:1.4; font-weight:600; color:var(--ink); }
.af-relink a:hover{ color:var(--blue2); }
/* Varios enlaces en el mismo hueco (los agrupa loaders.py) */
.af-links{ margin:32px 0; }
.af-links > *{ margin:0 !important; }
.af-links > .af-rec + .af-rec{ border-top:0; }
.af-links > .af-relink + .af-relink, .af-links > .af-brand-w + *{ margin-top:12px !important; }

/* Marca destacada y fichas de coche */
.af-brand-w, .af-car-w{ margin:32px 0; }
.af-brand{ display:flex; align-items:center; gap:16px; padding:16px 20px; border:1px solid var(--line); border-radius:6px; }
.af-brand img{ width:48px; height:48px; object-fit:contain; }
.af-brand span{ flex:1; }
.af-brand small, .af-car small{ display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); }
.af-brand b{ display:block; font-size:16px; color:var(--ink); }
.af-brand em{ font-style:normal; font-size:13px; color:var(--soft); }
.af-brand i{ font-style:normal; color:var(--faint); }
.af-brand:hover, .af-car:hover{ border-color:var(--blue); }
.af-brand:hover i{ color:var(--blue); }
.af-car{ display:grid; grid-template-columns:240px 1fr; gap:20px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:6px; }
.af-car .af-ph{ aspect-ratio:16/9; }
.af-car small{ margin-bottom:2px; }
.af-car b{ display:block; margin-bottom:10px; font-size:17px; line-height:1.3; color:var(--ink); }
.af-car dl{ display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; margin-bottom:10px; }
.af-car dt{ font-size:11px; color:var(--soft); }
.af-car dd{ font-size:13.5px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.af-car em{ font-style:normal; font-size:13px; font-weight:600; color:var(--blue); }
.af-car:hover b{ color:var(--blue2); }
@media (max-width:639px){ .af-car{ grid-template-columns:1fr; } }

/* ── Índice plegado y serie ── */
.af-toc, .af-serie{ margin:32px 0; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.af-toc summary{ display:flex; justify-content:space-between; align-items:center; list-style:none; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--ink); }
.af-toc summary::-webkit-details-marker{ display:none; }
.af-toc summary span{ margin-left:auto; font-size:12px; font-weight:400; color:var(--soft); }
.af-toc summary::after{ content:"+"; margin-left:12px; font-size:16px; color:var(--faint); }
.af-toc[open] summary::after{ content:"–"; }
.af-prose .af-toc ol{ margin:0; padding:8px 0 0; list-style:none; counter-reset:t; }
.af-prose .af-toc li{ display:flex; align-items:baseline; gap:12px; margin:0; padding:6px 0; counter-increment:t; }
.af-toc li::before{ content:counter(t, decimal-leading-zero); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--acc); }
/* Con .af-prose delante: si no, gana la regla de enlaces del cuerpo (azul subrayado), como en la serie */
.af-prose .af-toc a{ font-size:13.5px; line-height:1.4; font-weight:600; color:var(--ink2); text-decoration:none; }
.af-prose .af-toc a:hover{ color:var(--blue); }
.af-serie:has(+ .af-toc){ margin-bottom:0; }
.af-serie + .af-toc{ margin-top:0; border-top:0; }
.af-prose .af-serie-hd{ margin:0; }
.af-serie-hd small{ display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); }
.af-serie-hd b{ font-size:15px; line-height:1.4; color:var(--ink); }
.af-prose .af-serie ol{ margin:0; padding:8px 0 0; list-style:none; }
.af-prose .af-serie li{ display:flex; align-items:baseline; gap:12px; margin:0; padding:6px 0; font-size:13.5px; line-height:1.4; }
.af-serie li span{ min-width:16px; font-size:12px; font-weight:600; color:var(--faint); }
.af-serie li b{ font-weight:600; color:var(--ink); }
.af-prose .af-serie li a{ font-weight:600; color:var(--ink2); text-decoration:none; }
.af-prose .af-serie li a:hover{ color:var(--blue); }
.af-serie li em{ margin-left:auto; white-space:nowrap; font-style:normal; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); }
.af-serie-on span{ color:var(--acc); }
.af-serie-off b{ font-weight:400; color:var(--faint); }

/* ── Publicidad (solo en dev): caja en móvil, lateral desde 1200 px y banda al final ── */
.af-ad{ display:flex; flex-direction:column; align-items:center; gap:6px; margin:40px 0; display:none}
.af-ad > span{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.af-slot{ display:flex; align-items:center; justify-content:center; width:100%; max-width:var(--w); height:var(--h);
  border:1px solid var(--line2); background:var(--bg1); font-size:12px; color:var(--faint); }
.af-ad--caja{ margin:32px -16px; padding:12px 16px 16px; border-top:1px solid var(--line2); border-bottom:1px solid var(--line2); background:var(--bg1); }
.af-ad--caja .af-slot, .af-ad--banda .af-slot{ border-color:var(--line); background:var(--bg); }
@media (min-width:640px){ .af-ad--caja{ margin:40px 0; border:1px solid var(--line2); border-radius:6px; } }
.af-ad--banda{ margin:48px 0; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg1); display:none; }
@media (max-width:767px){ .af-ad--banda .af-slot{ --w:300px !important; --h:250px !important; } }

/* ── Lateral ── */
.af-rail{ display:none; }
@media (min-width:1200px){ .af-rail{ display:flex; flex-direction:column; gap:32px; padding-top:24px; } }
.af-rail .af-ad{ margin:0; }
.af-rh{ margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid var(--line); font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--soft); }
.af-mini article{ margin-bottom:20px; }
.af-mini .af-ph{ aspect-ratio:16/9; margin-bottom:8px; }
.af-mini h4{ font-size:13.5px; line-height:1.4; font-weight:600; color:var(--ink); }
.af-mini a:hover h4{ color:var(--blue2); }
.af-sticky{ position:sticky; top:calc(var(--cabecera) + 24px); }

/* ── Final del artículo ── */
.af-faq{ margin-top:48px; }
.af-faq h2{ margin-bottom:16px; font-size:24px; line-height:1.25; font-weight:700; letter-spacing:-.01em; color:var(--ink);
  scroll-margin-top:calc(var(--cabecera) + 24px); }
.af-faq details{ padding:14px 0; border-top:1px solid var(--line); }
.af-faq details:last-child{ border-bottom:1px solid var(--line); }
.af-faq summary{ display:flex; justify-content:space-between; gap:16px; list-style:none; cursor:pointer; font-size:15px; font-weight:600; color:var(--ink); }
.af-faq summary::-webkit-details-marker{ display:none; }
.af-faq summary::after{ content:"+"; font-size:18px; line-height:1; color:var(--faint); }
.af-faq details[open] summary::after{ content:"–"; }
.af-faq p{ margin-top:10px; font-size:15px; line-height:1.65; color:var(--ink2); }

.af-refs{ display:grid; gap:32px; margin-top:40px; padding-top:24px; border-top:1px solid var(--line); }
@media (min-width:768px){ .af-refs{ grid-template-columns:1fr 1fr; gap:40px; } .af-refs--una{ grid-template-columns:1fr; } }
.af-refs h3{ display:flex; align-items:baseline; gap:8px; margin-bottom:12px; font-size:13px; font-weight:600; color:var(--ink); }
.af-refs h3 span{ font-size:12px; font-weight:400; color:var(--soft); }
.af-fu{ list-style:none; counter-reset:f; padding:0; }
.af-fu li{ display:flex; gap:12px; padding:8px 0; border-top:1px solid var(--line2); counter-increment:f; }
.af-fu li:first-child{ padding-top:0; border-top:0; }
.af-fu li::before{ content:counter(f); min-width:12px; padding-top:1px; font-size:12px; font-weight:600; color:var(--faint); }
.af-fu cite{ font-style:normal; font-size:13.5px; line-height:1.45; color:var(--ink2); }
.af-fu a::after{ content:" ↗"; font-size:12px; color:var(--faint); }
.af-fu a:hover cite{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
#actualizaciones{ scroll-margin-top:calc(var(--cabecera) + 24px); }
.af-up{ list-style:none; margin-left:3px; padding:0; border-left:1px solid var(--line); }
.af-up li{ position:relative; padding:0 0 20px 20px; }
.af-up li:last-child{ padding-bottom:0; }
.af-up li::before{ content:""; position:absolute; top:4px; left:-4px; width:7px; height:7px; border-radius:50%; background:var(--ink); }
.af-up time{ display:block; margin-bottom:4px; font-size:11px; line-height:1.4; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); }
.af-up div{ font-size:13.5px; line-height:1.55; color:var(--ink2); }
.af-up div a{ color:var(--blue); text-decoration:underline; }

.af-next{ display:grid; grid-template-columns:1fr; gap:24px; margin-top:48px; padding-top:24px; border-top:1px solid var(--ink); }
@media (min-width:768px){ .af-next{ grid-template-columns:1fr 1fr; gap:32px; align-items:center; } }
.af-next .af-ph{ aspect-ratio:16/9; }
.af-next small{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); }
.af-next h2{ margin:8px 0 12px; font-size:24px; line-height:1.25; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.af-next:hover h2{ color:var(--blue2); }
@media (max-width:639px){ .af-next h2{ font-size:20px; } }
.af-nextbar{ position:sticky; bottom:0; z-index:5; margin-top:40px; border-top:1px solid var(--line); background:var(--bg); }
.af-nextbar a{ display:flex; align-items:center; gap:12px; padding:10px 0; font-size:13px; }
.af-nextbar small{ white-space:nowrap; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); }
.af-nextbar b{ flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:600; color:var(--ink); }
.af-nextbar i{ font-style:normal; color:var(--faint); }
.af-nextbar a:hover b{ color:var(--blue2); }

/* ── Después del artículo: relacionados y últimos (cierra #promociones, que pinta promotions.js) ── */
.af-after{ padding-top:72px; }
.af-after--cerca{ padding-top:24px; }
.af-sec-hd{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:24px; }
.af-sec-hd h2{ font-size:24px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.af-rel{ display:grid; grid-template-columns:1fr 1fr; gap:24px 16px; }
@media (min-width:640px){ .af-rel{ gap:32px 24px; } }
@media (min-width:1024px){ .af-rel{ grid-template-columns:repeat(4,1fr); } }
.af-rel .af-ph{ aspect-ratio:16/9; margin-bottom:12px; }
.af-rel h3{ font-size:13.5px; line-height:1.35; font-weight:600; color:var(--ink); }
@media (min-width:640px){ .af-rel h3{ font-size:15px; } }
.af-rel a:hover h3, .af-lat a:hover h3{ color:var(--blue2); }
.af-lat{ display:grid; grid-template-columns:minmax(0,1fr); gap:40px 32px; }
@media (min-width:640px){ .af-lat{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .af-lat{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.af-lat .af-ph{ aspect-ratio:16/9; margin-bottom:16px; }
.af-lat h3{ margin:8px 0; font-size:16px; line-height:1.35; font-weight:600; color:var(--ink); }
.af-exc{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:13.5px; color:var(--mute); }
/* Pie de «Últimos artículos»: el molde de «Sigue explorando» del silo (propuesta K, style.css), sin azul.
   Carril gris verdoso, nombre en tinta con su descripción y la flecha en un círculo blanco, que se llena
   de tinta al pasar. Dos columnas desde 768 px; en móvil, una, y el carril a sangre como la caja de
   publicidad. */
.af-cat-links{ display:grid; grid-template-columns:minmax(0,1fr); column-gap:48px; margin:40px -16px 0; padding:4px 16px; background:var(--rail); }
@media (min-width:640px){ .af-cat-links{ margin:40px 0 0; padding:8px 24px; } }
@media (min-width:768px){ .af-cat-links{ grid-template-columns:1fr 1fr; } }
.af-go{ display:flex; align-items:center; gap:18px; padding:16px 2px; }
.af-go + .af-go{ border-top:1px solid color-mix(in srgb, var(--ink) 11%, var(--rail)); }
@media (min-width:768px){ .af-go + .af-go{ border-top:0; } }
.af-go span{ flex:1; min-width:0; }
.af-go b{ display:block; font-size:16.5px; line-height:1.2; font-weight:700; letter-spacing:-.015em; color:var(--ink);
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px; transition:text-decoration-color .15s; }
.af-go small{ display:block; margin-top:3px; font-size:13px; line-height:1.4; color:var(--mute); }
.af-go i{ flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--bg); color:var(--ink);
  transition:background .15s, color .15s, transform .15s; }
.af-go:hover b{ text-decoration-color:var(--ink); }
.af-go:hover i{ background:var(--ink); color:var(--bg); transform:translateX(3px); }
.af-go:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
/* Miniaturas de las guías: promotions.js las redondea (rounded-lg) en toda la web; aquí van rectas.
   Por estructura y no por la clase, que el build de prod renombra. */
.af #promociones div:has(> img){ border-radius:0; }
/* El div trae px-4/6/8 (el mismo que en base.html), pero aquí va dentro de .af-wrap, que ya da ese margen:
   sin anularlo, las guías quedan metidas respecto a la columna. Por id, que el build de prod renombra las clases. */
.af #promociones{ padding-left:0; padding-right:0; }