/* ============================================================
   Recorrido por industria: tira, explorador y accesos
   ============================================================ */

/* En pantallas táctiles no hay hover: lo que sólo se revela al pasar el cursor
   quedaría invisible para siempre. */
@media (hover:none){
  .prod-row .ar{ opacity:1; transform:none; }
}

/* ------------------------------------------------------------
   Bloque de presentación (apertura de Minería). Texto a la
   izquierda con el logotipo; a la derecha, material propio de la
   empresa. La columna se limita a 380 px a propósito: los
   originales miden entre 343 y 454 px de ancho y por encima de eso
   empiezan a verse pixelados.
   ------------------------------------------------------------ */
.presenta{ display:grid; grid-template-columns:1fr 380px; gap:clamp(var(--sp-8),4vw,var(--sp-16)); align-items:start; }
.presenta-media{ display:grid; gap:var(--sp-4); }
.presenta-media .foto img{ width:100%; height:auto; border-radius:var(--radius-sm); }
/* Las dos fotos de equipo van en pareja y a media columna: son las de menor
   resolución del archivo y a tamaño grande se degradan. */
@media (max-width:900px){
  .presenta{ grid-template-columns:1fr; }
  .presenta-media{ max-width:420px; }
}
/* Tope de ancho para fotografías de origen pequeño, para no ampliarlas. */
.split-media.media-cap{ max-width:480px; }

/* Figura con pie: unidad fotográfica reutilizable en cualquier sección */
.foto{ margin:0; }
.foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.foto figcaption{
  font-family:var(--font-mono); font-size:var(--fs-lbl); letter-spacing:.06em;
  color:var(--steel-light); margin-top:var(--sp-2); line-height:1.5;
}
.on-dark .foto figcaption, .section.on-blue .foto figcaption{ color:#9FB0C2; }
/* Pedido del cliente: las fotos van solas, sin descripción. Los textos
   siguen en el marcado; basta quitar esta regla para que vuelvan. */
.foto figcaption{ display:none; }

/* Tira de fotografías: cuatro o dos por fila, misma altura */
.photo-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(var(--sp-3),1.6vw,var(--sp-6)); }
.photo-strip.cols-2{ grid-template-columns:1fr 1fr; }
.photo-strip .foto img{ aspect-ratio:16/10; }
.photo-strip.cols-2 .foto img{ aspect-ratio:16/9; }
.mb-48{ margin-bottom:var(--sp-12); }
@media (max-width:820px){ .photo-strip{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .photo-strip, .photo-strip.cols-2{ grid-template-columns:1fr; } }

.ind-featured{
  position:relative; display:grid; grid-template-columns:1.15fr 1fr; align-items:stretch;
  background:var(--navy); overflow:hidden; min-height:340px;
}
.ind-featured img{ width:100%; height:100%; object-fit:cover; }
.ind-featured::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,43,79,0) 22%, rgba(0,43,79,.75) 46%, var(--navy) 58%);
}
.ind-featured-body{ position:relative; z-index:1; padding:clamp(var(--sp-6),3.4vw,var(--sp-12)); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--sp-8); color:var(--white); }
.ind-flag{
  display:inline-block; background:var(--yellow); color:var(--navy);
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; padding:var(--sp-2) var(--sp-3);
}
.ind-featured-title{ font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; font-size:var(--fs-d4); line-height:1.05; }
.ind-featured-body p{ font-size:var(--fs-xs); line-height:1.6; color:var(--on-dark-200); max-width:38ch; }
.ind-figures{ display:flex; flex-wrap:wrap; width:100%; border-top:1px solid var(--line-on-dark); margin:var(--sp-2) 0 var(--sp-1); }
.ind-figures > div{ padding:var(--sp-4) var(--sp-6) 0 0; }
.ind-figures > div + div{ border-left:1px solid var(--line-on-dark); padding-left:var(--sp-6); }
.ind-figures dt{ font-family:var(--font-mono); font-size:var(--fs-lbl); letter-spacing:.08em; text-transform:uppercase; color:#dfe3e8; }
.ind-figures dd{ margin:var(--sp-1) 0 0; font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; font-size:var(--fs-d6); color:var(--yellow); }

@media (max-width:760px){
  .ind-featured{ grid-template-columns:1fr; }
  .ind-featured img{ aspect-ratio:16/9; }
  .ind-featured::after{ background:linear-gradient(180deg, rgba(0,43,79,0) 30%, var(--navy) 62%); }
}

/* Listas y píldoras dentro del panel lateral */
.pill.pill-dark{ background:var(--navy); border-color:var(--navy); color:var(--white); text-transform:none; font-weight:500; letter-spacing:.02em; padding:var(--sp-2) var(--sp-4); }
.pill.pill-dark b{ color:var(--yellow); font-weight:600; text-transform:uppercase; letter-spacing:.09em; font-size:var(--fs-lbl); margin-right:var(--sp-2); }

/* Noticias */
.news-meta{ display:flex; align-items:center; gap:var(--sp-4); margin-top:var(--sp-4); }
.news-tag{ background:var(--yellow); color:var(--navy); font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:var(--sp-1) var(--sp-2); }
.news-date{ font-family:var(--font-mono); font-size:var(--fs-lbl); letter-spacing:.08em; color:var(--steel-light); }

/* ------------------------------------------------------------
   9a-bis. ÍNDICE DE NOTICIAS (revista)
   La portada abre en dos columnas y el resto va en tarjetas. El cuerpo
   completo se lee en la página de cada noticia, no en el índice.
   ------------------------------------------------------------ */
.post-lead{
  display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(var(--sp-6),3.5vw,var(--sp-12));
  align-items:center; color:inherit;
}
.post-lead-media{ aspect-ratio:16/10; overflow:hidden; border-radius:var(--radius); background:var(--navy-soft); }
.post-lead-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.post-lead:hover .post-lead-media img{ transform:scale(1.03); }
.post-lead .news-meta{ margin-top:0; }

.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(var(--sp-4),2.4vw,var(--sp-8)); }
.post-card{
  display:flex; flex-direction:column; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  color:inherit; transition:border-color .25s ease, transform .25s ease;
}
.post-card:hover{ border-color:var(--navy); transform:translateY(-3px); }
.post-card-media{ aspect-ratio:16/10; overflow:hidden; background:var(--navy-soft); }
.post-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.post-card:hover .post-card-media img{ transform:scale(1.05); }
.post-card-body{ display:flex; flex-direction:column; flex:1; padding:var(--card-pad); }
.post-card-body .news-meta{ margin-top:0; }
.post-card-body p{ font-size:var(--fs-xs); line-height:1.55; color:var(--steel); margin:var(--sp-2) 0 0; flex:1; }
.post-more{
  display:inline-flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-4);
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--yellow-dim);
}
.post-card:hover .post-more{ color:var(--navy); }
@media (max-width:980px){ .post-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .post-lead{ grid-template-columns:1fr; } .post-grid{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------
   9a-ter. CUERPO CON COLUMNA DE NAVEGACIÓN
   Fichas y noticias comparten el mismo esqueleto: documento a la
   izquierda, dónde ir después a la derecha.
   ------------------------------------------------------------ */
.doc-layout, .post-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(var(--sp-8),4vw,var(--sp-16)); align-items:start; margin-top:var(--sp-8);
}
.doc-aside, .post-aside{ display:flex; flex-direction:column; gap:var(--sp-4); position:sticky; top:calc(var(--header-h) + 24px); }
.aside-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:var(--card-pad); }
.aside-list{ display:flex; flex-direction:column; }
.aside-list a{
  display:flex; align-items:baseline; gap:var(--sp-2); padding:var(--sp-3) 0;
  border-top:1px solid var(--line); font-size:var(--fs-xs); line-height:1.4;
  color:var(--graphite); transition:color .2s ease;
}
.aside-list a:last-child{ border-bottom:1px solid var(--line); }
.aside-list a:hover{ color:var(--navy); }
.aside-list .t{ flex:1; }
.aside-list .ar{ color:var(--steel-light); }
.post-body p + p{ margin-top:var(--sp-4); }
.post-body .news-meta{ margin:0 0 var(--sp-6); }
/* Los enlaces dentro del cuerpo de una noticia tienen que verse como enlaces */
.post-body p a{ color:var(--navy); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--yellow-ochre); }
.post-body p a:hover{ color:var(--yellow-ochre); }
@media (max-width:900px){
  .doc-layout, .post-layout{ grid-template-columns:1fr; }
  .doc-aside, .post-aside{ position:static; }
}

/* Tarjeta de especificaciones: la tabla técnica deja de flotar sobre el
   documento y se lee como una unidad cerrada. */
.spec-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:var(--card-pad); }
.spec-card-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-4); }

/* Índice de páginas hermanas (Empresa, industrias, catálogo) */
.subnav-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(var(--sp-4),1.8vw,var(--sp-6)); }
.subnav-card{
  display:flex; flex-direction:column; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  padding:var(--card-pad); color:inherit;
  transition:border-color .25s ease, transform .25s ease;
}
.subnav-card.is-media{ padding:0; }
.subnav-card:hover{ border-color:var(--navy); transform:translateY(-3px); }
.subnav-media{ aspect-ratio:16/10; overflow:hidden; background:var(--navy-soft); }
.subnav-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.subnav-card:hover .subnav-media img{ transform:scale(1.05); }
.subnav-card h3{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; font-size:var(--fs-d6); color:var(--navy); }
.subnav-card p{ font-size:var(--fs-xs); line-height:1.55; color:var(--steel); margin-top:var(--sp-2); flex:1; }
.subnav-card.is-media h3{ margin:var(--card-pad) var(--card-pad) 0; }
.subnav-card.is-media p{ margin:var(--sp-2) var(--card-pad) 0; }
.subnav-ar{ display:inline-flex; margin-top:var(--sp-4); color:var(--yellow-dim); transition:transform .25s ease; }
.subnav-card.is-media .subnav-ar{ margin:var(--sp-4) var(--card-pad) var(--card-pad); }
.subnav-card:hover .subnav-ar{ transform:translateX(4px); color:var(--navy); }

/* Las cuatro cifras dejan de ser cuatro filas con una regla encima: cada una
   va en su placa, que es lo que hace que se lean como el pliego de lo que la
   máquina puede dar —del 10 cm al 12 m, bicapa o tricapa, con o sin impresión—
   y no como una nota al margen del titular. */
.products-figs{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2); margin:0; }
.products-figs > div{
  padding:var(--sp-4) var(--sp-4); border:1px solid var(--line); border-radius:var(--radius);
  background:var(--white);
}
.products-figs dt{ font-family:var(--font-mono); font-size:var(--fs-lbl); letter-spacing:.08em; text-transform:uppercase; color:var(--steel); line-height:1.4; }
.products-figs dd{ margin:var(--sp-2) 0 0; font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; font-size:var(--fs-d5); line-height:1.15; color:var(--navy); }

/* La placa del formato se invierte: de las cuatro, es la única que no es un
   límite de la máquina sino la forma de trabajar de la empresa. El amarillo
   la sostiene sin subirle el cuerpo a la tipografía. */
.products-figs > div.is-medida{ background:var(--navy-deep); border-color:var(--navy-deep); }
.products-figs > div.is-medida dt{ color:rgba(255,255,255,.72); }
.products-figs > div.is-medida dd{ color:var(--yellow); }

/* Placa de especificación: sustituye a la fotografía cuando no hay imagen
   propia del producto. Habla el idioma del sitio (retícula técnica, mono,
   amarillo) para que se lea como una decisión, no como un hueco. */
.spec-plate{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(var(--sp-4),1.4vw,var(--sp-5)); background:var(--navy); color:var(--white);
}
.spec-plate-type{
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--yellow);
}
.spec-plate-figs{ display:flex; flex-direction:column; gap:var(--sp-2); margin:0; }
.spec-plate-figs dt{
  font-family:var(--font-mono); font-size:var(--fs-lbl); letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-dark-600);
}
.spec-plate-figs dd{
  margin:2px 0 0; font-family:var(--font-display); font-weight:700;
  letter-spacing:-.01em; font-size:var(--fs-d6); line-height:1.15; color:var(--white);
}
.spec-plate-note{
  font-family:var(--font-mono); font-size:var(--fs-lbl); letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-dark-600);
}
/* En la tarjeta grande del catálogo hay aire para respirar más. */
.ficha-media .spec-plate{ padding:clamp(var(--sp-4),1.8vw,var(--sp-6)); }

@media (max-width:900px){ .products-figs{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){
  .products-figs{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   Explorador de industrias en pestañas

   Reutiliza .ind-featured tal cual: la tarjeta es la misma que la
   destacada de siempre, sólo cambia quién decide qué industria muestra.
   Baja el alto mínimo porque la barra de pestañas ya suma su propia
   altura y el bloque completo no debe crecer.
   ============================================================ */
.ind-tabs{ background:var(--navy-ink); border-radius:var(--radius); overflow:hidden; }
.ind-tabs .ind-featured{ min-height:340px; border-radius:0; }

/* Las cinco fotos vienen con proporciones dispares y una es casi cuadrada.
   Como los paneles se apilan en la misma celda, esa foto estiraba el bloque
   entero y dejaba un vacío bajo los paneles más cortos. Normalizarlas a 16/10
   —la misma proporción que ya usan las tarjetas de industria— hace que el alto
   lo decida el contenido y no el archivo que subieron. */
.ind-tabs .ind-featured > img{ aspect-ratio:16/10; }

/* Acá el titular es una frase completa, no el nombre de la industria: baja un
   paso de tamaño y se limita en ancho para que no salga a cuatro líneas. El
   nombre del área lo lleva la placa amarilla de arriba. */
.ind-tabs .ind-featured-title{ font-size:var(--fs-d4); line-height:1.15; max-width:22ch; }

.ind-tabbar{ display:flex; align-items:stretch; border-bottom:1px solid var(--line-on-dark); }
.ind-tabbar-label{
  display:flex; align-items:center; gap:var(--sp-2); flex:0 0 auto; padding:0 var(--sp-6);
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--yellow); white-space:nowrap;
}
.ind-tabbar-label::after{ content:""; width:1px; align-self:stretch; background:var(--line-on-dark); margin-left:var(--sp-6); }
/* La flecha late para señalar que la barra es navegable: sin ella, una fila de
   cinco rótulos puede leerse como títulos y no como controles. El movimiento
   es el único de la sección, así que no compite con nada.
   La regla global de prefers-reduced-motion en 01-tokens.css la detiene. */
.ind-tabbar-label svg{ transform-origin:center; animation:ind-tabbar-arrow 1.8s ease-in-out infinite; }
@keyframes ind-tabbar-arrow{
  0%, 100%{ transform:scale(1); opacity:.75; }
  50%     { transform:scale(1.32); opacity:1; }
}
.ind-tablist{ display:flex; flex:1; min-width:0; }
.ind-tab{
  position:relative; flex:1; display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); text-align:left; cursor:pointer;
  background:transparent; border:0; border-bottom:3px solid transparent;
  color:#A9BCCD; transition:background .22s ease, color .22s ease;
}
.ind-tab:hover{ color:var(--white); background:rgba(255,255,255,.05); }
.ind-tab[aria-selected="true"]{ color:var(--white); background:rgba(255,255,255,.07); border-bottom-color:var(--yellow); }
.ind-tab-n{
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:700;
  letter-spacing:.1em; color:#6E8497; transition:color .22s ease;
}
.ind-tab[aria-selected="true"] .ind-tab-n{ color:var(--yellow); }
.ind-tab-name{ font-family:var(--font-display); font-size:var(--fs-d7); font-weight:600; letter-spacing:-.01em; line-height:1.2; }

/* Barra de avance de la rotación automática: hace visible cuánto falta
   para el próximo cambio, que es lo que vuelve tolerable que se mueva
   solo. Sólo corre mientras el temporizador está activo. */
.ind-tab-fill{
  position:absolute; left:0; right:0; bottom:-3px; height:3px;
  background:var(--yellow); opacity:0; transform:scaleX(0); transform-origin:left;
}
.ind-tab[aria-selected="true"] .ind-tab-fill{ opacity:1; }
.ind-tab[aria-selected="true"].is-running .ind-tab-fill{ animation:ind-tab-fill 6000ms linear forwards; }
@keyframes ind-tab-fill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.ind-tabstack{ display:grid; }
.ind-panel{
  grid-area:1/1; display:grid; opacity:0; visibility:hidden;
  transition:opacity .5s ease, visibility 0s linear .5s;
}
.ind-panel.is-active{ opacity:1; visibility:visible; transition:opacity .5s ease, visibility 0s; }

@media (max-width:900px){
  .ind-tabbar{ flex-direction:column; align-items:stretch; }
  .ind-tabbar-label{ padding:var(--sp-3) var(--sp-4); }
  .ind-tabbar-label::after{ display:none; }
  .ind-tablist{ overflow-x:auto; border-top:1px solid var(--line-on-dark); }
  .ind-tab{ flex:0 0 auto; white-space:nowrap; }
  .ind-tabs .ind-featured{ min-height:0; }
}

/* La entradilla va apilada sobre la retícula de tarjetas, no en una
   columna al costado: por eso no es sticky —flotaría por encima de las
   tarjetas al bajar— y cierra con su propio aire antes de la lista. */
.mercados-intro{
  margin-bottom:clamp(var(--sp-8),3.6vw,var(--sp-12));
}
.mercados-intro .title{ margin-top:0; max-width:20ch; text-wrap:balance; }
.mercados-intro .lede{ margin-top:var(--sp-5); max-width:60ch; }
.mercados-intro .btn{ margin-top:clamp(var(--sp-6),3vw,var(--sp-8)); }

/* Dos columnas: las cinco tarjetas van una al lado de la otra en vez de
   apiladas en una sola pila larga. */
.mercados-lista{
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-3);
}

/* Cada paso lleva la fotografía de su mercado detrás. La separación entre
   tarjetas la hace el propio aire de la retícula —el blanco de la sección
   entre ellas—, sin ninguna regla de por medio. */
.mercado-paso{ position:relative; height:100%; }
.mercado-paso > a{
  position:relative; isolation:isolate; overflow:hidden; height:100%;
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(var(--sp-4),2.2vw,var(--sp-8)); align-items:start;
  padding:clamp(var(--sp-8),3vw,var(--sp-10)) clamp(var(--sp-6),2.6vw,var(--sp-8));
  border-radius:var(--radius);
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
  background:var(--navy-deep);
}

.mercado-fondo{ position:absolute; inset:0; z-index:-2; }
.mercado-fondo img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.06) brightness(1.08);
  transition:filter .35s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
/* Velo: en dos columnas el texto ocupa el ancho completo de la tarjeta, así
   que baja de arriba abajo en vez de cargarse a la izquierda, y va más
   liviano que antes para que se vea la fotografía. */
.mercado-paso > a::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,20,38,.62) 0%, rgba(0,20,38,.72) 45%, rgba(0,20,38,.84) 100%);
}

/* El ordinal va en contorno para que pese como cifra sin competir con
   el título. Si el navegador no sabe dibujar el contorno, se queda
   relleno en gris tenue: transparente sin contorno sería invisible. */
/* Sobre la fotografía la tinta se invierte: blanco, y el acento vuelve a
   ser el amarillo de señalética, que sobre azul oscuro da 10,6:1. */
.mercado-n{
  font-family:var(--font-display); font-weight:800; letter-spacing:-.04em;
  font-size:clamp(2.6rem,5vw,4.2rem); line-height:.9;
  color:rgba(255,255,255,.38); transition:color .28s ease, -webkit-text-stroke-color .28s ease;
}
@supports (-webkit-text-stroke: 1px currentColor){
  .mercado-n{
    color:transparent;
    -webkit-text-stroke:1.4px rgba(255,255,255,.55);
  }
}
.mercado-cuerpo h3{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.025em;
  font-size:var(--fs-d4); line-height:1.12; color:var(--white); max-width:13ch;
  transition:color .22s ease;
}
.mercado-cuerpo p{
  margin-top:var(--sp-3); max-width:62ch;
  font-size:var(--fs-body); line-height:1.65; color:rgba(255,255,255,.9);
}
.mercado-cta{
  display:inline-flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-4);
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--yellow);
  transition:color .22s ease;
}
.mercado-cta svg{ transition:transform .22s ease; }

@media (hover:hover) and (pointer:fine){
  .mercado-paso > a:hover{ transform:translateX(8px); }
  .mercado-paso > a:hover .mercado-n{
    color:var(--yellow);
    -webkit-text-stroke-color:var(--yellow);
  }
  /* Al pasar por encima sólo la fotografía hace zoom y se aclara un
     punto: el resto del bloque no se mueve. */
  .mercado-paso > a:hover .mercado-fondo img{ transform:scale(1.08); filter:saturate(1.1) brightness(1.18); }
  .mercado-paso > a:hover .mercado-cta svg{ transform:translateX(4px); }
}
.mercado-paso > a:focus-visible{ outline-offset:6px; }

/* Escalonado de entrada. Se apoya en el .reveal que ya existe: sólo
   añade el retardo por posición. */
.js .mercado-paso.reveal{ transition-delay:calc(var(--i, 0) * .15s); }

@media (max-width:900px){
  .mercados-lista{ grid-template-columns:1fr; }
  .mercado-paso > a{ grid-template-columns:1fr; gap:var(--sp-2); padding:clamp(var(--sp-6),6vw,var(--sp-8)) clamp(var(--sp-5),5vw,var(--sp-8)); }
  .mercado-n{ font-size:clamp(2.2rem,9vw,3rem); }
}

@media (prefers-reduced-motion: reduce){
  .js .mercado-paso.reveal{ transition-delay:0s; }
  .mercado-paso > a:hover{ transform:none; }
  .mercado-paso > a:hover .mercado-fondo img{ transform:none; }
}