/* =========================================================
   MOVIE FINANCE — Sistema visual propio
   Identidad: "sala a oscuras + subtítulo + timecode"
   Paleta, tipografía e iconografía originales.
   No se emplean colores, logos ni estilizaciones de terceros.
   ========================================================= */

:root{
  /* Color */
  --paper:      #E7E9F0;  /* blanco proyectado, frío */
  --paper-2:    #F4F5F9;  /* documento */
  --ink:        #0E121C;  /* sala a oscuras */
  --ink-soft:   #1B2131;
  --velvet:     #4A2B3D;  /* butaca de terciopelo */
  --lumen:      #FFB43F;  /* luz de proyector */
  --rule:       #C3C8D8;
  --muted:      #5C6377;

  /* Tipografía */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* Métrica */
  --measure: 66ch;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --max: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1.02rem, .55vw + .92rem, 1.16rem);
  line-height:1.62;
  font-optical-sizing:auto;
}

img,svg{ max-width:100%; display:block; }

a{ color:inherit; }

:focus-visible{
  outline:3px solid var(--lumen);
  outline-offset:3px;
}

.contenedor{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.salto-contenido{
  position:absolute; left:-9999px;
  background:var(--ink); color:var(--paper);
  padding:.7rem 1rem; z-index:99;
}
.salto-contenido:focus{ left:1rem; top:1rem; }

/* ---------- Tipografía de titulares ---------- */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  font-stretch:125%;
  line-height:1.02;
  letter-spacing:-.005em;
  margin:0 0 .6em;
  text-wrap:balance;
}

h1{ font-size:clamp(2.2rem, 5.2vw, 4rem); text-transform:uppercase; letter-spacing:.005em; }
h2{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); }
h3{ font-size:clamp(1.15rem, 1.6vw, 1.35rem); }

p{ margin:0 0 1.15em; }

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1rem;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:""; width:1.6rem; height:2px; background:var(--lumen); flex:none;
}

/* Timecode: marca el minuto exacto de la escena analizada */
.timecode{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.1em;
  color:var(--velvet);
  background:rgba(74,43,61,.09);
  border:1px solid rgba(74,43,61,.2);
  padding:.18rem .5rem;
  border-radius:2px;
  white-space:nowrap;
}

/* ---------- Cabecera ---------- */

.cabecera{
  background:var(--ink);
  color:var(--paper);
  border-bottom:6px solid #000;
}
.cabecera-fila{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem;
  padding-block:1.1rem;
}
.marca{
  display:flex; align-items:center; gap:.8rem;
  text-decoration:none; color:inherit;
}
.marca-nombre{
  font-family:var(--display);
  font-weight:800; font-stretch:125%;
  text-transform:uppercase; letter-spacing:.03em;
  font-size:1.32rem; line-height:1;
}
.marca-nombre span{ color:var(--lumen); }

.etiqueta-independiente{
  font-family:var(--mono);
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgba(231,233,240,.42);
  color:#D5D9E6;
  padding:.34rem .6rem; border-radius:2px;
  white-space:nowrap;
}

.nav{ margin-left:auto; }
.nav ul{
  list-style:none; display:flex; flex-wrap:wrap; gap:.2rem 1.35rem;
  margin:0; padding:0;
}
.nav a{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none; color:#C9CEDD;
  padding:.35rem 0; display:inline-block; border-bottom:2px solid transparent;
}
.nav a:hover{ color:#fff; border-bottom-color:var(--lumen); }
.nav a[aria-current="page"]{ color:#fff; border-bottom-color:var(--lumen); }

/* ---------- Logo propio (isotipo: carrete + gráfico) ---------- */
.isotipo{ width:38px; height:38px; flex:none; }

/* ---------- Exenciones de responsabilidad ---------- */

.aviso-superior{
  background:var(--velvet);
  color:#F6EEF2;
  border-bottom:2px solid rgba(255,180,63,.5);
}
.aviso-superior .contenedor{
  display:grid; grid-template-columns:auto 1fr; gap:1rem;
  padding-block:1.15rem;
}
.aviso-superior p{ margin:0; font-size:.95rem; line-height:1.55; }
.aviso-superior strong{ color:var(--lumen); }
.aviso-icono{ width:26px; height:26px; margin-top:.15rem; }

/* Exención breve junto a menciones destacadas de marcas */
.aviso-marca{
  font-family:var(--mono);
  font-size:.78rem; line-height:1.6;
  border-left:3px solid var(--lumen);
  background:rgba(74,43,61,.06);
  padding:.75rem .95rem;
  margin:0 0 1.8rem;
  color:#3A4054;
}
.aviso-marca.sobre-oscuro{
  background:rgba(255,255,255,.07);
  color:#DDE1EC;
}

/* ---------- Barra de subtítulo (elemento firma) ---------- */

.subtitulo{
  font-family:var(--display);
  font-stretch:100%;
  font-weight:500;
  font-size:clamp(1.05rem, 2vw, 1.5rem);
  line-height:1.4;
  color:#fff;
  text-align:center;
  max-width:46ch;
  margin-inline:auto;
  text-shadow:0 2px 10px rgba(0,0,0,.85);
}
.subtitulo::before{
  content:"— "; color:var(--lumen);
}

/* ---------- INICIO: hero en formato pantalla ---------- */

.pantalla{
  position:relative;
  background:
    radial-gradient(120% 90% at 50% 0%, #232B3F 0%, #0E121C 62%);
  color:var(--paper);
  border-block:14px solid #000;   /* letterbox */
  overflow:hidden;
}
.pantalla::after{ /* textura de proyección */
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
  opacity:.5; pointer-events:none;
}
.pantalla .contenedor{
  position:relative; z-index:1;
  padding-block:clamp(3.2rem, 9vw, 6.5rem);
  text-align:center;
}
.pantalla h1{
  font-size:clamp(2.3rem, 7vw, 5.2rem);
  letter-spacing:.01em;
  margin-bottom:1.4rem;
}
.pantalla h1 em{
  font-style:normal;
  color:var(--lumen);
}
.pantalla-meta{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:#9AA2B8;
  margin-top:2.4rem;
}

.aparece{ animation:aparece .8s cubic-bezier(.2,.7,.3,1) both; }
.aparece-2{ animation-delay:.12s; }
.aparece-3{ animation-delay:.24s; }
@keyframes aparece{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}

/* ---------- Qué es / qué no es ---------- */

.definicion{
  display:grid; gap:0;
  grid-template-columns:repeat(2, 1fr);
  border:2px solid var(--ink);
  margin-block:clamp(2.5rem, 6vw, 4rem);
}
.definicion > div{ padding:clamp(1.4rem, 3vw, 2.2rem); }
.definicion .es{ background:var(--paper-2); }
.definicion .no-es{ background:var(--ink); color:var(--paper); border-left:2px solid var(--ink); }
.definicion h2{ font-size:1.15rem; text-transform:uppercase; letter-spacing:.08em; }
.definicion ul{ margin:0; padding-left:1.1rem; }
.definicion li{ margin-bottom:.55rem; }
.definicion .no-es li::marker{ color:var(--lumen); }

/* ---------- Rejilla de artículos ---------- */

.seccion{ padding-block:clamp(2.5rem, 6vw, 4.5rem); }
.seccion-titulo{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  border-bottom:2px solid var(--ink);
  padding-bottom:.7rem; margin-bottom:2rem;
}
.seccion-titulo h2{ margin:0; text-transform:uppercase; letter-spacing:.04em; }
.seccion-titulo span{ font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; }

.rejilla{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.6rem;
}
.rejilla .destacado{ grid-column:span 3; }

.tarjeta{
  display:flex; flex-direction:column;
  background:var(--paper-2);
  border:1px solid var(--rule);
  text-decoration:none;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
a.tarjeta:hover{
  transform:translateY(-4px);
  border-color:var(--ink);
  box-shadow:0 10px 0 -4px rgba(74,43,61,.18);
}
.tarjeta-cinta{
  height:8px;
  background:
    repeating-linear-gradient(to right, var(--ink) 0 10px, transparent 10px 20px),
    var(--lumen);
}
.tarjeta-cuerpo{ padding:1.3rem 1.35rem 1.5rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.tarjeta-meta{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.tarjeta h3{ margin:0; }
.tarjeta p{ margin:0; font-size:.95rem; color:#3A4054; }
.tarjeta-pie{
  margin-top:auto; padding-top:.6rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--velvet);
}

.destacado{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.destacado .tarjeta-cuerpo{ padding:clamp(1.5rem,3vw,2.4rem); }
.destacado h3{ font-size:clamp(1.5rem,3vw,2.2rem); }
.destacado p{ color:#C6CBDA; font-size:1.02rem; max-width:56ch; }
.destacado .tarjeta-pie{ color:var(--lumen); }
.destacado .timecode{ background:rgba(255,180,63,.14); border-color:rgba(255,180,63,.42); color:var(--lumen); }

.tarjeta.inactiva{
  background:transparent; border-style:dashed; color:var(--muted);
}
.tarjeta.inactiva h3{ color:var(--muted); }

/* ---------- ACERCA DE: editorial a dos columnas ---------- */

.franja-velvet{
  background:var(--velvet); color:#F7F0F4;
  border-bottom:6px solid #000;
  padding-block:clamp(2.4rem, 6vw, 4rem);
}
.franja-velvet h1{ margin-bottom:.5rem; }
.franja-velvet .entradilla{
  font-size:clamp(1.05rem,1.6vw,1.28rem);
  max-width:52ch; color:#EBDDE4;
}
.franja-velvet .eyebrow{ color:#E4C8D6; }

.editorial{
  display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(2rem, 5vw, 4rem);
  padding-block:clamp(2.5rem, 6vw, 4.5rem);
  align-items:start;
}
.columna-lateral{ position:sticky; top:1.5rem; }
.retrato{
  border:1px solid var(--rule);
  background:var(--paper-2);
  padding:1rem;
}
.ficha{
  font-family:var(--mono);
  font-size:.78rem; line-height:1.7;
  border:1px solid var(--rule);
  background:var(--paper-2);
  margin-top:1.2rem;
}
.ficha dl{ margin:0; padding:1.1rem 1.2rem; display:grid; grid-template-columns:1fr; gap:.15rem; }
.ficha dt{ color:var(--muted); letter-spacing:.1em; text-transform:uppercase; font-size:.66rem; margin-top:.75rem; }
.ficha dt:first-child{ margin-top:0; }
.ficha dd{ margin:0; color:var(--ink); word-break:break-word; }
.ficha a{ color:var(--velvet); }

.columna-principal h2{ margin-top:2.2rem; }
.columna-principal h2:first-child{ margin-top:0; }
.columna-principal p, .columna-principal li{ max-width:var(--measure); }

.declaracion{
  border:2px solid var(--ink);
  border-left-width:10px;
  padding:1.4rem 1.5rem;
  background:var(--paper-2);
  margin-block:2rem;
}
.declaracion p:last-child{ margin-bottom:0; }

/* ---------- POLÍTICA EDITORIAL: lista numerada con iconos ---------- */

.encabezado-simple{
  border-bottom:2px solid var(--ink);
  padding-block:clamp(2.2rem,5vw,3.4rem) 1.6rem;
}
.encabezado-simple .entradilla{ max-width:58ch; font-size:1.1rem; color:#333B4F; }

.pasos{ list-style:none; margin:0; padding:0; counter-reset:paso; }
.paso{
  counter-increment:paso;
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  gap:1.2rem 1.4rem;
  align-items:start;
  padding-block:2rem;
  border-bottom:1px solid var(--rule);
}
.paso:last-child{ border-bottom:0; }
.paso::before{
  content:counter(paso, decimal-leading-zero);
  font-family:var(--mono); font-size:1.5rem; font-weight:600;
  color:var(--lumen);
  -webkit-text-stroke:0;
  line-height:1;
  padding-top:.35rem;
}
.paso-icono{
  width:46px; height:46px;
  border:2px solid var(--ink);
  border-radius:50%;
  padding:8px;
  background:var(--paper-2);
}
.paso h3{ margin:0 0 .5rem; }
.paso p{ margin:0; max-width:62ch; }
.paso p + p{ margin-top:.8rem; }

/* ---------- LEGALES: documento tipográfico ---------- */

.page-legal{ background:var(--paper-2); }

.doc-cabecera{
  border-bottom:1px solid var(--rule);
  padding-block:clamp(2.2rem,5vw,3.2rem) 1.4rem;
}
.doc-cabecera h1{
  font-size:clamp(1.8rem,4vw,2.9rem);
}
.doc-meta{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem;
}
.doc{
  display:grid;
  grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:clamp(1.6rem,5vw,3.5rem);
  padding-block:2.5rem 4rem;
  align-items:start;
}
.doc-indice{ position:sticky; top:1.5rem; font-family:var(--mono); font-size:.78rem; }
.doc-indice p{
  text-transform:uppercase; letter-spacing:.14em; font-size:.66rem;
  color:var(--muted); margin-bottom:.7rem;
}
.doc-indice ol{ list-style:none; margin:0; padding:0; counter-reset:idx; }
.doc-indice li{ counter-increment:idx; margin-bottom:.45rem; }
.doc-indice a{ text-decoration:none; color:var(--ink); border-bottom:1px solid var(--rule); }
.doc-indice a::before{ content:counter(idx) ". "; color:var(--velvet); }
.doc-indice a:hover{ border-bottom-color:var(--velvet); }

.doc-cuerpo{ max-width:var(--measure); }
.doc-cuerpo h2{
  font-size:1.2rem; text-transform:uppercase; letter-spacing:.06em;
  margin-top:2.6rem; padding-top:1rem; border-top:1px solid var(--rule);
}
.doc-cuerpo h2:first-child{ margin-top:0; border-top:0; padding-top:0; }
.doc-cuerpo h3{ font-size:1rem; margin-top:1.6rem; }
.doc-cuerpo ul{ padding-left:1.15rem; }
.doc-cuerpo li{ margin-bottom:.5rem; }
.doc-cuerpo table{
  width:100%; border-collapse:collapse; font-size:.9rem; margin-bottom:1.4rem;
}
.doc-cuerpo th, .doc-cuerpo td{
  border:1px solid var(--rule); padding:.6rem .7rem; text-align:left; vertical-align:top;
}
.doc-cuerpo th{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; background:#E9EBF2;
}

/* ---------- ARTÍCULOS ---------- */

.art-cabecera{
  background:var(--ink); color:var(--paper);
  border-bottom:14px solid #000;
  padding-block:clamp(2.4rem,6vw,4.2rem);
}
.art-cabecera h1{ max-width:20ch; }
.art-cabecera .entradilla{
  max-width:56ch; color:#C6CBDA; font-size:clamp(1.02rem,1.5vw,1.2rem);
}
.art-datos{
  display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:center;
  margin-top:1.6rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:#9AA2B8;
}
.art-cabecera .timecode{
  background:rgba(255,180,63,.14); border-color:rgba(255,180,63,.42); color:var(--lumen);
}

.art-cuerpo{
  padding-block:clamp(2rem,5vw,3.5rem) 3.5rem;
  max-width:var(--measure);
  margin-inline:auto;
}
.art-cuerpo h2{
  margin-top:2.6rem;
  font-size:1.35rem;
}
.art-cuerpo .destacado-texto{
  font-family:var(--display); font-stretch:100%; font-weight:600;
  font-size:clamp(1.15rem,2vw,1.45rem); line-height:1.35;
  border-left:5px solid var(--lumen);
  padding-left:1.1rem; margin-block:2rem;
}
.ficha-pelicula{
  border:1px solid var(--rule);
  background:var(--paper-2);
  font-family:var(--mono); font-size:.8rem; line-height:1.7;
  padding:1.1rem 1.2rem;
  margin-bottom:2rem;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.8rem 1.4rem;
}
.ficha-pelicula dt{ color:var(--muted); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; }
.ficha-pelicula dd{ margin:0; }
.fuentes{
  margin-top:3rem; padding-top:1.4rem; border-top:2px solid var(--ink);
  font-size:.92rem;
}
.fuentes h2{ font-size:1rem; text-transform:uppercase; letter-spacing:.08em; margin-top:0; }
.fuentes ol{ padding-left:1.2rem; color:#3A4054; }
.fuentes li{ margin-bottom:.5rem; }

/* ---------- Contacto ---------- */
.tarjetas-contacto{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.4rem; padding-block:clamp(2rem,5vw,3.5rem);
}
.tarjeta-dato{
  border:1px solid var(--rule); background:var(--paper-2);
  padding:1.4rem 1.4rem 1.6rem;
}
.tarjeta-dato .eyebrow{ margin-bottom:.7rem; }
.tarjeta-dato p{ margin:0; font-family:var(--mono); font-size:.9rem; line-height:1.7; word-break:break-word; }
.tarjeta-dato a{ color:var(--velvet); }

/* ---------- Pie ---------- */

.pie{
  background:var(--ink); color:#C6CBDA;
  border-top:6px solid #000;
  padding-block:clamp(2.4rem,5vw,3.5rem);
  font-size:.92rem;
}
.pie-aviso{
  border:1px solid rgba(255,180,63,.45);
  background:rgba(255,180,63,.06);
  padding:1.2rem 1.3rem;
  margin-bottom:2.4rem;
}
.pie-aviso h2{
  font-size:.82rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--lumen); margin-bottom:.6rem; font-stretch:100%;
}
.pie-aviso p{ margin:0 0 .8rem; color:#DDE1EC; }
.pie-aviso p:last-child{ margin-bottom:0; }

.pie-rejilla{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1.8rem 2rem;
}
.pie h3{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.16em;
  color:#fff; margin-bottom:.8rem; font-stretch:100%;
}
.pie ul{ list-style:none; margin:0; padding:0; }
.pie li{ margin-bottom:.45rem; }
.pie a{ color:#C6CBDA; text-decoration:none; border-bottom:1px solid rgba(198,203,218,.3); }
.pie a:hover{ color:#fff; border-bottom-color:var(--lumen); }
.pie-datos{ font-family:var(--mono); font-size:.78rem; line-height:1.8; }
.pie-legal{
  margin-top:2.4rem; padding-top:1.4rem;
  border-top:1px solid rgba(198,203,218,.22);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:#8F97AC;
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
}

/* ---------- Responsive ---------- */

@media (max-width:900px){
  .editorial{ grid-template-columns:1fr; }
  .columna-lateral{ position:static; }
  .doc{ grid-template-columns:1fr; }
  .doc-indice{ position:static; border:1px solid var(--rule); padding:1rem 1.1rem; background:#fff; }
  .rejilla{ grid-template-columns:repeat(2,1fr); }
  .rejilla .destacado{ grid-column:span 2; }
}

@media (max-width:640px){
  .nav{ margin-left:0; width:100%; }
  .nav ul{ gap:.2rem 1rem; }
  .definicion{ grid-template-columns:1fr; }
  .definicion .no-es{ border-left:0; border-top:2px solid var(--ink); }
  .rejilla{ grid-template-columns:1fr; }
  .rejilla .destacado{ grid-column:span 1; }
  .paso{ grid-template-columns:auto minmax(0,1fr); }
  .paso-icono{ grid-row:1; }
  .paso::before{ grid-row:1; }
  .paso > div{ grid-column:1 / -1; }
  .aviso-superior .contenedor{ grid-template-columns:1fr; }
  .aviso-icono{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

@media print{
  .cabecera,.pie,.nav{ background:#fff; color:#000; }
  body{ background:#fff; }
}

/* ---------- Índice de artículos (listado tipo hoja de montaje) ---------- */

.indice-articulos{ list-style:none; margin:0; padding:0 0 4rem; }
.indice-articulos li{ border-top:1px solid var(--rule); }
.indice-articulos li:last-child{ border-bottom:1px solid var(--rule); }
.fila-articulo{
  display:grid;
  grid-template-columns:120px minmax(0,1fr) auto;
  gap:1rem 1.8rem;
  align-items:start;
  padding-block:1.8rem;
  text-decoration:none;
  color:inherit;
  transition:background .2s ease, padding-left .2s ease;
}
a.fila-articulo:hover{ background:#DFE2EC; padding-left:.8rem; }
.fila-articulo .col-tc{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  color:var(--muted); line-height:1.9;
}
.fila-articulo .col-tc strong{ display:block; color:var(--velvet); font-weight:600; }
.fila-articulo h2{ font-size:clamp(1.15rem,2vw,1.5rem); margin:0 0 .5rem; }
.fila-articulo p{ margin:0; font-size:.96rem; color:#3A4054; max-width:64ch; }
.fila-articulo .flecha{
  font-family:var(--mono); font-size:1.1rem; color:var(--velvet); padding-top:.2rem;
}
.fila-articulo.sin-enlace{ opacity:.62; }
.fila-articulo .estado{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  border:1px dashed var(--muted); padding:.2rem .5rem; color:var(--muted); white-space:nowrap;
}

@media (max-width:640px){
  .fila-articulo{ grid-template-columns:1fr; gap:.6rem; }
  .fila-articulo .flecha{ display:none; }
}