/* ═══════════════════════════════════════════════════════════════
   REDMACH — portada
   «Industrial Premium Logistics Technology»

   Hoja propia de la portada. Las otras cinco páginas siguen con
   styles.css: rediseñar el sitio entero no era el encargo, y
   mezclar los dos sistemas en un mismo archivo habría dejado
   ambos peor. Cuando el sistema nuevo baje al resto, esta hoja es
   el punto de partida.

   Dos cosas del encargo NO se aplican tal cual, y conviene que
   quede escrito aquí y no en un chat que se pierde:

   1. El rojo. El pliego fija #E30613, que es el rojo de la guía
      de G&I, no el de REDMACH. La guía de REDMACH manda #ED1C24
      (cap. 36). Se usa el de la guía; #FF2532 sí entra como
      acento, que para eso es un acento.

   2. La tipografía. El pliego pide Manrope, Inter o Geist. La
      guía fija Montserrat (cap. 37) y ya se decidió mantenerla en
      esta sesión. Entra JetBrains Mono para rótulos técnicos,
      códigos y datos de operación: eso no es identidad de marca,
      es vocabulario de instrumento.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg:      #080808;
  --sup:     #101010;
  --sup-2:   #161616;
  --sup-3:   #1c1c1c;

  --rojo:     #ED1C24;   /* guía REDMACH, cap. 36 */
  --rojo-acc: #FF2532;
  --rojo-tx:  #FF6B70;   /* rojo legible como TEXTO sobre negro */
  --rojo-btn: #C8151C;   /* relleno con texto blanco: 5.4:1 */

  --tx:   #F5F5F5;
  --tx-2: #A0A0A6;       /* el #8D8D92 del pliego da 4.3:1 sobre #080808 */
  --tx-3: #86868E;       /* rótulos y datos pequeños: 5.5:1 sobre el fondo,
                            4.97:1 sobre la superficie más clara. El #8D8D92
                            del pliego se queda en 4.3 y no pasa AA. */

  --borde:   rgba(255, 255, 255, .08);
  --borde-2: rgba(255, 255, 255, .14);

  --ok:   #2FBF71;
  --wait: #D9A520;

  --r:    10px;   /* botones: el pliego pide 8-12 */
  --r-m:  12px;
  --r-l:  16px;   /* tarjetas: 12-18 */
  --wrap: 1280px;
  --nav:  76px;

  --sans: "Montserrat", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx-2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

::selection { background: var(--rojo); color: #fff; }
:focus-visible { outline: 2px solid var(--rojo-acc); outline-offset: 3px; border-radius: var(--r); }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  padding: 14px 22px; background: var(--rojo-btn); color: #fff;
}
.saltar:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 768px)  { .wrap { padding-inline: 40px; } }
@media (min-width: 1200px) { .wrap { padding-inline: 56px; } }

/* ── Escala tipográfica ─────────────────────────────────────── */
h1, h2, h3, h4 { margin: 0; font-family: var(--sans); color: var(--tx); line-height: 1.08; }
h1 { font-size: clamp(2.4rem, 6.2vw, 5rem);   font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; }
h4 { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }

.rotulo {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tx-3);
}
.rotulo::before { content: ""; width: 26px; height: 1px; background: var(--rojo); flex: none; }

.lede { font-size: clamp(1rem, 1.3vw, 1.125rem); color: var(--tx-2); max-width: 56ch; }

/* ── Botones ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: 14px 28px;
  border: 1px solid transparent; border-radius: var(--r);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer;
  transition: background .3s var(--ease), border-color .3s, color .3s, box-shadow .3s;
}
.btn .flecha { display: inline-block; transition: transform .3s var(--ease); }
.btn:hover .flecha { transform: translateX(4px); }
.btn--rojo { background: var(--rojo-btn); color: #fff; }
.btn--rojo:hover { background: var(--rojo); box-shadow: 0 0 24px rgba(237,28,36,.32); }
.btn--linea { border-color: var(--borde-2); color: var(--tx); }
.btn--linea:hover { border-color: var(--rojo); color: var(--tx); background: var(--sup); }
.btn--sm { min-height: 40px; padding: 10px 18px; font-size: 11px; }
@media (max-width: 560px) { .btn--ancho { width: 100%; } }

/* ── Revelado ───────────────────────────────────────────────── */
.js .rev { opacity: 0; transform: translateY(18px); }
.js .rev.visto { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .rev { opacity: 1; transform: none; transition: none; }
}

/* ── Cabecera ───────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background .35s var(--ease), border-color .35s, backdrop-filter .35s;
}
.nav.fija {
  background: rgba(8, 8, 8, .78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--borde);
}
.nav__in { display: flex; align-items: center; gap: 28px; height: var(--nav); }

.marca { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.marca__iso {
  width: 34px; height: 32px; flex: none;
  background: url("/assets/isotipo-redmach-neg.png") center/contain no-repeat;
}
.marca__txt { display: flex; flex-direction: column; line-height: 1.1; }
.marca__n { font-size: .95rem; font-weight: 800; letter-spacing: .02em; color: var(--tx); }
.marca__s {
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3);
}

.nav__links { display: flex; gap: 2px; margin-left: auto; }
.nav__links a {
  padding: 10px 14px; border-radius: var(--r);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tx-2);
  transition: color .25s, background .25s;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--tx); background: rgba(255,255,255,.05); }

.nav__act { display: flex; align-items: center; gap: 12px; }

.hamb {
  display: none; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--borde-2); border-radius: var(--r);
  background: transparent; cursor: pointer;
}
.hamb span { display: block; width: 17px; height: 1.5px; margin: 4px auto; background: var(--tx); transition: transform .3s var(--ease), opacity .2s; }
.hamb[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamb[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamb[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Menú lateral en móvil */
.lateral {
  position: fixed; inset: 0 0 0 auto; z-index: 99;
  width: min(88vw, 380px); padding: calc(var(--nav) + 24px) 24px 32px;
  background: var(--sup); border-left: 1px solid var(--borde);
  display: flex; flex-direction: column; gap: 4px;
  transform: translateX(100%); visibility: hidden;
  /* La visibilidad cambia de golpe al abrir y solo espera al cerrar,
     para que el panel siga viéndose mientras se retira. Dejarla dentro
     de la transición hacía que el panel dependiera de que la animación
     llegara al final para existir. */
  transition: transform .4s var(--ease), visibility 0s linear .4s;
}
.lateral.abierto {
  transform: none; visibility: visible;
  transition: transform .4s var(--ease), visibility 0s;
}
.lateral a {
  padding: 16px 4px; border-bottom: 1px solid var(--borde);
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tx);
}
.lateral .btn { margin-top: 24px; }
.velo {
  position: fixed; inset: 0; z-index: 98;
  background: rgba(0,0,0,.6); opacity: 0; visibility: hidden;
  transition: opacity .35s, visibility 0s linear .35s;
}
.velo.abierto { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .lateral, .velo { transition: none; } }

@media (max-width: 1080px) {
  .nav__links { display: none; }
  .hamb { display: block; }
  .nav__act .btn { display: none; }
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 90vh;
  display: flex; align-items: center;
  padding: calc(var(--nav) + 40px) 0 80px;
  overflow: hidden;
}
.hero__fondo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Retícula técnica: presente, nunca protagonista */
.hero__rejilla {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
}
/* El mapa se corre a la derecha: centrado, las rutas cruzaban el
   titular y competían con él. Aquí la convergencia sobre Callao cae
   en el lado libre, que es además donde el ojo termina de leer. */
.hero__mapa {
  position: absolute; inset: 0 -14% 0 22%;
  display: grid; place-items: center;
  will-change: transform;
}
.hero__mapa svg { width: 100%; height: auto; opacity: .9; }
/* Y un velo por el lado del texto: el fondo se ve, pero nunca por
   encima de lo que hay que leer. */
.hero__velo {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--bg) 8%, rgba(8,8,8,.86) 34%, rgba(8,8,8,.35) 56%, transparent 78%);
}
@media (max-width: 900px) {
  .hero__mapa { inset: 0 -30% 8% 0; }
  .hero__velo { background: linear-gradient(180deg, rgba(8,8,8,.82) 0%, rgba(8,8,8,.92) 55%, var(--bg) 100%); }
}
.hero__in { position: relative; z-index: 2; display: grid; gap: 30px; }
.hero h1 { text-transform: none; }
.hero h1 .quiebre { display: block; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 2; display: grid; justify-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tx-3);
}
.hero__scroll i { display: block; width: 1px; height: 26px; background: linear-gradient(var(--tx-3), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .hero__scroll i { animation: bajar 2.2s var(--ease) infinite; transform-origin: top; }
  @keyframes bajar { 0%,100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }
}
@media (max-width: 900px) { .hero__scroll { display: none; } }

/* ── El mapa: nodos y rutas ─────────────────────────────────── */
.m-grat { stroke: rgba(255,255,255,.055); stroke-width: .6; fill: none; }
.m-ruta {
  fill: none; stroke: var(--rojo); stroke-width: 1.1; stroke-linecap: round;
  opacity: .72;
}
.js .m-ruta { stroke-dasharray: 900; stroke-dashoffset: 900; }
@media (prefers-reduced-motion: no-preference) {
  .js .m-ruta { animation: trazar 2.4s var(--ease) forwards; }
  .js .m-ruta:nth-of-type(2) { animation-delay: .25s; }
  .js .m-ruta:nth-of-type(3) { animation-delay: .5s; }
  .js .m-ruta:nth-of-type(4) { animation-delay: .75s; }
  @keyframes trazar { to { stroke-dashoffset: 0; } }
}
@media (prefers-reduced-motion: reduce) { .js .m-ruta { stroke-dashoffset: 0; } }

.m-nodo circle.punto { fill: var(--rojo-acc); }
.m-nodo circle.halo { fill: rgba(237,28,36,.16); }
.m-nodo--hub circle.punto { fill: #fff; }
.m-nodo--hub circle.halo { fill: rgba(255,255,255,.14); }
.m-nodo--soon circle.punto { fill: var(--wait); }
.m-nodo--soon circle.halo { fill: rgba(217,165,32,.14); }
@media (prefers-reduced-motion: no-preference) {
  .m-nodo circle.halo { transform-box: fill-box; transform-origin: center; animation: latir 3.4s ease-in-out infinite; }
  .m-nodo:nth-of-type(2) circle.halo { animation-delay: .5s; }
  .m-nodo:nth-of-type(3) circle.halo { animation-delay: 1s; }
  .m-nodo:nth-of-type(4) circle.halo { animation-delay: 1.5s; }
  .m-nodo:nth-of-type(5) circle.halo { animation-delay: 2s; }
  @keyframes latir { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(2.1); opacity: 0; } }
}
.m-etiq {
  font-family: var(--mono); font-size: 7.5px; font-weight: 600;
  letter-spacing: .1em; fill: var(--tx-3); text-transform: uppercase;
}

/* ── Marquesina ─────────────────────────────────────────────── */
.tira {
  border-block: 1px solid var(--borde); background: var(--sup);
  overflow: hidden; padding: 16px 0;
}
.tira__pista { display: flex; width: max-content; }
.tira__grupo {
  display: flex; align-items: center; gap: 30px; padding-right: 30px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tx-2);
  white-space: nowrap;
}
.tira__grupo i { color: var(--rojo); font-style: normal; }
@media (prefers-reduced-motion: no-preference) {
  .tira__pista { animation: correr 46s linear infinite; }
  @keyframes correr { to { transform: translateX(-50%); } }
}

/* ── Secciones ──────────────────────────────────────────────── */
.sec { position: relative; padding: clamp(72px, 9vw, 128px) 0; }
.sec--sup { background: var(--sup); border-block: 1px solid var(--borde); }
.sec__cab { display: grid; gap: 18px; max-width: 62ch; margin-bottom: 56px; }

/* ── Bento de servicios ─────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.mod {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 30px; min-height: 230px;
  border: 1px solid var(--borde); border-radius: var(--r-l);
  background: var(--sup);
  transition: transform .4s var(--ease), border-color .35s, box-shadow .35s, background .35s;
}
.mod--ancho { grid-column: span 4; }
.mod--medio { grid-column: span 3; }
.mod--tercio { grid-column: span 2; }
@media (hover: hover) {
  .mod:hover { transform: translateY(-6px); border-color: rgba(237,28,36,.45); box-shadow: 0 18px 40px -22px rgba(0,0,0,.9), 0 0 26px -6px rgba(237,28,36,.22); }
  .mod:hover .mod__ico { color: var(--rojo-acc); transform: scale(1.06); }
  .mod:hover .flecha { transform: translateX(4px); }
}
.mod__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.mod__ico {
  width: 44px; height: 44px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--borde-2); border-radius: var(--r-m);
  color: var(--rojo); background: var(--sup-2);
  transition: color .35s, transform .35s var(--ease);
}
.mod__n { font-family: var(--mono); font-size: 1.35rem; font-weight: 600; color: var(--tx-3); letter-spacing: -.02em; }
.mod p { font-size: .9375rem; color: var(--tx-2); }
.mod__link {
  margin-top: auto; display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--rojo-tx);
}
.mod__link .flecha { transition: transform .3s var(--ease); }

/* RM Suite: el módulo que enseña producto */
.mod--suite { grid-column: span 6; flex-direction: row; align-items: center; gap: 40px; background: var(--sup-2); }
.mod--suite .mod__cuerpo { display: flex; flex-direction: column; gap: 14px; max-width: 46ch; }
.mini-ui {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 78px 1fr;
  height: 168px; border: 1px solid var(--borde-2); border-radius: var(--r-m);
  background: #0a0a0a; overflow: hidden;
}
.mini-ui__lat { display: grid; gap: 5px; align-content: start; padding: 12px 8px; border-right: 1px solid var(--borde); background: #121212; }
.mini-ui__lat i { display: block; height: 5px; border-radius: 2px; background: rgba(255,255,255,.14); }
.mini-ui__lat i:first-child { background: var(--rojo); width: 60%; }
.mini-ui__cuerpo { display: grid; grid-template-rows: auto 1fr; gap: 10px; padding: 12px; }
.mini-ui__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini-ui__kpis span { height: 30px; border: 1px solid var(--borde); border-radius: 4px; background: #141414; }
.mini-ui__barras { display: flex; align-items: flex-end; gap: 6px; padding-top: 6px; }
.mini-ui__barras i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(var(--rojo), rgba(237,28,36,.25)); }
@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .mod--ancho, .mod--medio, .mod--tercio { grid-column: span 1; }
  .mod--suite { grid-column: span 2; flex-direction: column; align-items: stretch; }
  .mini-ui { height: 150px; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .mod--suite { grid-column: span 1; }
}

/* ── De origen a destino: recorrido pegajoso ────────────────── */
.viaje { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.viaje__fijo { position: sticky; top: calc(var(--nav) + 48px); display: grid; gap: 20px; }
.viaje__lista { display: grid; gap: 4px; position: relative; padding-left: 42px; }
/* La línea que avanza con el scroll */
.viaje__lista::before,
.viaje__lista::after {
  content: ""; position: absolute; left: 15px; top: 22px; bottom: 22px; width: 1px;
}
.viaje__lista::before { background: var(--borde-2); }
.viaje__lista::after {
  background: var(--rojo);
  transform: scaleY(var(--avance, 0)); transform-origin: top;
  transition: transform .45s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .viaje__lista::after { transition: none; } }

.etapa {
  position: relative; display: grid; gap: 4px; padding: 18px 0 18px 4px;
  opacity: .38; transition: opacity .45s var(--ease);
}
.etapa.activa, .etapa.hecha { opacity: 1; }
.etapa::before {
  content: ""; position: absolute; left: -31px; top: 25px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--sup); border: 1px solid var(--borde-2);
  transition: background .35s, border-color .35s, box-shadow .35s;
}
.etapa.hecha::before { background: var(--rojo); border-color: var(--rojo); }
.etapa.activa::before { background: var(--rojo-acc); border-color: var(--rojo-acc); box-shadow: 0 0 0 5px rgba(237,28,36,.16); }
.etapa__n { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--tx-3); }
.etapa h3 { font-size: 1.0625rem; }
.etapa p { font-size: .875rem; color: var(--tx-2); }
@media (max-width: 900px) {
  .viaje { grid-template-columns: 1fr; gap: 36px; }
  .viaje__fijo { position: static; }
}

/* ── Red global ─────────────────────────────────────────────── */
.red { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: center; }
.red__mapa { border: 1px solid var(--borde); border-radius: var(--r-l); background: var(--sup); padding: 20px; }
.red__lista { display: grid; gap: 12px; }
.plaza {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 18px 20px; border: 1px solid var(--borde); border-radius: var(--r-m);
  background: var(--sup); cursor: default;
  transition: border-color .3s, background .3s, transform .3s var(--ease);
}
.plaza:hover { border-color: var(--borde-2); background: var(--sup-2); transform: translateX(4px); }
.plaza__pin { width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); }
.plaza--hub  .plaza__pin { background: #fff; }
.plaza--soon .plaza__pin { background: var(--wait); }
.plaza b { display: block; font-size: .9375rem; color: var(--tx); font-weight: 700; }
.plaza span { font-size: .8125rem; color: var(--tx-2); }
.plaza__estado {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3);
  padding: 5px 10px; border: 1px solid var(--borde); border-radius: 999px;
}
.plaza--act  .plaza__estado { color: var(--ok);   border-color: rgba(47,191,113,.35); }
.plaza--soon .plaza__estado { color: var(--wait); border-color: rgba(217,165,32,.35); }
.plaza--hub  .plaza__estado { color: var(--tx);   border-color: var(--borde-2); }
@media (max-width: 900px) { .red { grid-template-columns: 1fr; gap: 32px; } }

/* ── Centro de control ──────────────────────────────────────── */
.control { background: var(--sup-2); border-block: 1px solid var(--borde); }
.control__in { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: center; }
.tablero {
  border: 1px solid var(--borde-2); border-radius: var(--r-l);
  background: #0a0a0a; overflow: hidden;
}
.tablero__barra {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--borde); background: #0d0d0d;
}
.tablero__barra i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.16); }
.tablero__barra i:first-child { background: var(--rojo); }
.tablero__barra em {
  margin-left: 6px; font-family: var(--mono); font-style: normal;
  font-size: 10px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tx-2);
}
.tablero__cuerpo { display: grid; gap: 22px; padding: 24px; }
.campos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.campo { display: grid; gap: 5px; }
.campo dt { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
.campo dd { margin: 0; font-family: var(--mono); font-size: .8125rem; font-weight: 600; color: var(--tx); }
.campo dd.vivo { color: var(--rojo-tx); }

.progreso-op { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--borde); }
.progreso-op > span {
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tx-3);
}
.hitos { display: grid; gap: 9px; }
.hito { display: flex; align-items: center; gap: 10px; font-size: .8125rem; color: var(--tx-3); }
.hito i {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 1px solid var(--borde-2); display: grid; place-items: center;
  font-size: 9px; font-style: normal; color: transparent;
}
.hito--ok    { color: var(--tx-2); }
.hito--ok i  { background: var(--ok); border-color: var(--ok); color: #04150b; }
.hito--curso { color: var(--tx); }
.hito--curso i { background: var(--rojo); border-color: var(--rojo); }
@media (prefers-reduced-motion: no-preference) {
  .hito--curso i { animation: pulso 2s ease-in-out infinite; }
  @keyframes pulso { 0%,100% { box-shadow: 0 0 0 0 rgba(237,28,36,.45); } 60% { box-shadow: 0 0 0 7px rgba(237,28,36,0); } }
}

.docs { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--borde); }
.docs__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.docs__fila b { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; color: var(--tx); }
.docs__fila span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--wait); }
.docs__pista { height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.docs__pista i {
  display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--rojo-btn), var(--rojo-acc));
  width: calc(var(--pct, 0) * 1%);
  transition: width 1.1s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .docs__pista i { transition: none; } }
@media (max-width: 1023px) {
  .control__in { grid-template-columns: 1fr; gap: 36px; }
  .campos { grid-template-columns: repeat(2, 1fr); }
}

/* ── Pilares ────────────────────────────────────────────────── */
.pilares { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--r-l); overflow: hidden; }
.pilar { display: grid; gap: 12px; padding: 36px 30px; background: var(--bg); transition: background .3s; }
.pilar:hover { background: var(--sup); }
.pilar svg { width: 26px; height: 26px; color: var(--rojo); }
.pilar h3 { font-size: 1.0625rem; letter-spacing: .04em; text-transform: uppercase; }
.pilar p { font-size: .875rem; color: var(--tx-2); }
@media (max-width: 900px) { .pilares { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pilares { grid-template-columns: 1fr; } }

/* ── Ecosistema ─────────────────────────────────────────────── */
.eco { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.eco__card {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--borde); border-radius: var(--r-l); overflow: hidden;
  background: var(--sup);
  transition: transform .4s var(--ease), border-color .35s;
}
.eco__card:hover { transform: translateY(-5px); border-color: var(--borde-2); }
.eco__lienzo { position: relative; display: grid; place-items: center; aspect-ratio: 16/10; padding: 22px; overflow: hidden; }
.eco__lienzo img { width: 100%; height: auto; object-fit: contain; transition: transform .5s var(--ease); }
.eco__card:hover .eco__lienzo img { transform: scale(1.04); }
/* Cada logotipo sobre el fondo para el que fue hecho */
.eco__lienzo--zenkai { background: #050505; }
.eco__lienzo--kalia  { background: #FEFCF8; }
.eco__lienzo--gi     { background: #FFFFFF; }
.eco__lienzo--suite  { background: #0a0a0a; }
.eco__lienzo--zenkai img { max-width: 190px; }
.eco__lienzo--kalia  img { max-width: 128px; }
.eco__lienzo--gi     img { max-width: 100%; }
.eco__lienzo--suite  img { max-width: 168px; }
.eco__pie { display: grid; gap: 6px; padding: 20px; border-top: 1px solid var(--borde); }
.eco__cat { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
.eco__pie h3 { font-size: 1rem; }
.eco__pie p { font-size: .8125rem; color: var(--tx-2); }
.eco__link {
  margin-top: 6px; font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--rojo-tx);
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s, transform .3s var(--ease);
}
.eco__card:hover .eco__link, .eco__card:focus-within .eco__link { opacity: 1; transform: none; }
@media (hover: none) { .eco__link { opacity: 1; transform: none; } }
@media (max-width: 1023px) { .eco { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .eco { grid-template-columns: 1fr; } }

/* ── Proceso de importación ─────────────────────────────────── */
.pasos { display: grid; gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--r-l); overflow: hidden; }
.paso {
  display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 18px;
  padding: 20px 24px; background: var(--sup); transition: background .3s;
}
.paso:hover { background: var(--sup-2); }
.paso b { font-family: var(--mono); font-size: .9375rem; font-weight: 600; color: var(--rojo-tx); }
.paso span { font-size: .9375rem; color: var(--tx); }
.pasos__extra { display: grid; gap: 1px; overflow: hidden; }
.pasos__extra[hidden] { display: none; }
.pasos__mas { justify-self: start; margin-top: 24px; }

/* ── Insights ───────────────────────────────────────────────── */
.notas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.nota { display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 1px solid var(--borde-2); transition: border-color .3s; }
.nota:hover { border-top-color: var(--rojo); }
.nota__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.nota__meta .cat { color: var(--rojo-tx); }
.nota h3 { font-size: 1.125rem; line-height: 1.3; }
.nota p { font-size: .875rem; color: var(--tx-2); }
.nota__link { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tx); display: inline-flex; gap: .5em; }
.nota__link .flecha { transition: transform .3s var(--ease); }
.nota:hover .flecha { transform: translateX(4px); }
@media (max-width: 900px) { .notas { grid-template-columns: 1fr; gap: 30px; } }

/* ── Cierre ─────────────────────────────────────────────────── */
.cierre { position: relative; overflow: hidden; padding: clamp(88px, 12vw, 160px) 0; border-top: 1px solid var(--borde); }
.cierre__linea { position: absolute; inset: 0; pointer-events: none; }
.cierre__linea svg { width: 100%; height: 100%; }
.cierre__linea path { fill: none; stroke: var(--rojo); stroke-width: 1; opacity: .16; }
.cierre__in { position: relative; z-index: 1; display: grid; gap: 24px; justify-items: center; text-align: center; max-width: 720px; margin-inline: auto; }
.cierre__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ── Pie ────────────────────────────────────────────────────── */
.pie { border-top: 1px solid var(--borde); background: var(--bg); }
.pie__in { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 44px; padding-block: 72px 44px; }
.pie__logo { display: block; width: 210px; max-width: 100%; height: 48px; background: url("/assets/logo-redmach-neg.png") left center/contain no-repeat; }
.pie__frase { margin-top: 18px; font-size: .9375rem; color: var(--tx); font-weight: 600; }
.pie__datos { margin-top: 14px; font-family: var(--mono); font-size: 11px; line-height: 2; color: var(--tx-2); }
.pie__col { display: grid; gap: 11px; align-content: start; }
.pie__col h4 { padding-bottom: 12px; border-bottom: 1px solid var(--borde); font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); font-weight: 600; }
.pie__col a { font-size: .875rem; color: var(--tx-2); transition: color .25s; }
.pie__col a:hover { color: var(--rojo-tx); }
.pie__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 22px; border-top: 1px solid var(--borde); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--tx-3); }
@media (max-width: 900px) { .pie__in { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 520px) { .pie__in { grid-template-columns: 1fr; } }

/* ── WhatsApp ───────────────────────────────────────────────── */
.wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: #128C7E; color: #fff;
  box-shadow: 0 10px 26px -8px rgba(0,0,0,.8);
  transition: transform .3s var(--ease);
}
.wa:hover { transform: scale(1.06); }
.wa svg { width: 26px; height: 26px; }

/* ── Objetivos táctiles ───────────────────────────────────────
   Los enlaces de texto medían 17–18 px de alto: se ven bien pero
   se fallan con el pulgar. El relleno agranda el área sensible y
   el margen negativo lo compensa, así que el dibujo no se mueve
   ni un píxel — solo se vuelve más fácil de acertar.
   ---------------------------------------------------------- */
.mod__link, .eco__link, .nota__link {
  padding-block: 14px; margin-block: -14px;
}
.marca { min-height: 44px; }
.pie__col a { padding-block: 12px; margin-block: -12px; }
.pie__datos a { display: inline-block; padding-block: 11px; margin-block: -8px; }

/* ══════════════════════════════════════════════════════════════
   Segunda pasada del pliego (2026-09-01)
   ══════════════════════════════════════════════════════════════ */

/* ── Estado en los nodos del mapa ───────────────────────────── */
.m-estado { font-family: var(--mono); font-size: 6px; font-weight: 600; letter-spacing: .14em; fill: var(--ok); }
.m-nodo--soon .m-estado { fill: var(--wait); }
.m-nodo--hub  .m-estado { fill: var(--tx); }

/* ── Navegación lateral de progreso ───────────────────────────
   Solo el número activo y una línea. Si distrae, ha fallado.
   ---------------------------------------------------------- */
.brujula {
  position: fixed; right: 26px; top: 50%; transform: translateY(-50%);
  z-index: 80; display: grid; gap: 14px;
}
.brujula a {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--tx-3); opacity: .55; transition: opacity .3s, color .3s;
}
.brujula a::after { content: ""; width: 14px; height: 1px; background: currentColor; transition: width .3s var(--ease); }
.brujula .nombre { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s var(--ease); }
.brujula a.aqui { opacity: 1; color: var(--rojo-acc); }
.brujula a.aqui::after { width: 26px; }
.brujula a:hover { opacity: 1; color: var(--tx); }
.brujula a:hover .nombre, .brujula a:focus-visible .nombre { max-width: 120px; }
@media (max-width: 1280px) { .brujula { display: none; } }

/* ── El panel de RM Suite ─────────────────────────────────────
   Las cifras son de EJEMPLO y la etiqueta lo dice. El pliego pide
   mostrar la herramienta y a la vez prohíbe inventar datos; se
   resuelve enseñando la interfaz y marcándola como demostración.
   ---------------------------------------------------------- */
.suite-panel { flex: 1; min-width: 0; display: grid; gap: 12px; padding: 18px; border: 1px solid var(--borde-2); border-radius: var(--r-m); background: #0a0a0a; }
.suite-panel__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.suite-panel__top em { font-family: var(--mono); font-style: normal; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
.demo { font-family: var(--mono); font-size: 8px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wait); border: 1px solid rgba(217,165,32,.45); border-radius: 999px; padding: 3px 9px; }
.suite-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.suite-cifras > div { display: grid; gap: 3px; padding: 10px; border: 1px solid var(--borde); border-radius: 8px; background: #121212; }
.suite-cifras dt { font-family: var(--mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.suite-cifras dd { margin: 0; font-family: var(--mono); font-size: 1.15rem; font-weight: 600; color: var(--tx); line-height: 1; }
.suite-cifras dd.rojo { color: var(--rojo-tx); }
.suite-docs { display: grid; gap: 6px; }
.suite-docs > span { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.suite-docs i { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.suite-docs i b { display: block; height: 100%; width: 87%; border-radius: 2px; background: linear-gradient(90deg, var(--rojo-btn), var(--rojo-acc)); }
@media (max-width: 640px) { .suite-cifras { grid-template-columns: repeat(2, 1fr); } }

/* ── La etapa activa crece un poco ──────────────────────────── */
.etapa { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.etapa.activa { transform: translateX(3px); }

/* ── Ficha emergente sobre cada plaza ──────────────────────── */
.plaza { position: relative; }
.plaza__ficha {
  position: absolute; left: 20px; bottom: calc(100% + 8px); z-index: 5;
  min-width: 216px; padding: 12px 14px;
  border: 1px solid var(--borde-2); border-radius: var(--r-m);
  background: var(--sup-2); box-shadow: 0 16px 34px -18px rgba(0,0,0,.95);
  display: grid; gap: 5px;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .25s, transform .25s var(--ease), visibility 0s linear .25s;
}
.plaza:hover .plaza__ficha, .plaza:focus-within .plaza__ficha {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .25s, transform .25s var(--ease), visibility 0s;
}
.plaza__ficha p { display: flex; justify-content: space-between; gap: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--tx-3); }
.plaza__ficha p b { color: var(--tx); font-weight: 600; }
@media (hover: none) { .plaza__ficha { display: none; } }

/* ── Ruta del centro de control ─────────────────────────────── */
.ruta-op { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--borde); }
.ruta-op > span { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; color: var(--tx); }
.ruta-op i { position: relative; height: 1px; background: rgba(255,255,255,.14); }
.ruta-op i::before, .ruta-op i::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; transform: translateY(-50%); }
.ruta-op i::before { left: -3px; background: var(--rojo); }
.ruta-op i::after { right: -3px; background: var(--tx); }
.ruta-op i b { position: absolute; left: 0; top: 0; height: 1px; width: 42%; background: var(--rojo); }
@media (prefers-reduced-motion: no-preference) {
  .ruta-op i b { animation: avanzarRuta 3.4s ease-in-out infinite alternate; }
}
@keyframes avanzarRuta { from { width: 34%; } to { width: 52%; } }

/* ── Por qué REDMACH: palabras grandes, mucho aire ──────────── */
.pilares-aire { display: grid; border-top: 1px solid var(--borde); }
.pilar-linea {
  display: grid; grid-template-columns: 46px minmax(180px, 280px) 1fr;
  align-items: baseline; gap: 28px;
  padding: 34px 0; border-bottom: 1px solid var(--borde);
  transition: background .3s;
}
.pilar-linea:hover { background: rgba(255,255,255,.016); }
.pilar-linea__n { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--tx-3); }
.pilar-linea h3 { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; }
.pilar-linea p { font-size: 1rem; color: var(--tx-2); max-width: 46ch; }
@media (max-width: 760px) {
  .pilar-linea { grid-template-columns: 34px 1fr; gap: 8px 18px; padding: 26px 0; }
  .pilar-linea p { grid-column: 2; }
}

/* ── Desde Cusco al mundo ───────────────────────────────────── */
.cusco { display: grid; grid-template-columns: 1fr 1.1fr; gap: 52px; align-items: center; }
.cusco__texto { display: grid; gap: 22px; justify-items: start; }
.plazas-mini { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--r-l); overflow: hidden; }
.plaza-mini { display: grid; gap: 6px; padding: 28px 24px; background: var(--sup); transition: background .3s; }
.plaza-mini:hover { background: var(--sup-2); }
.plaza-mini b { font-size: 1.125rem; font-weight: 800; color: var(--tx); letter-spacing: -.01em; }
.plaza-mini span { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
.plaza-mini--hq span { color: var(--rojo-tx); }
@media (max-width: 900px) { .cusco { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 460px) { .plazas-mini { grid-template-columns: 1fr; } }

/* ── Insights numerados ─────────────────────────────────────── */
.nota__idx { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--tx-3); }

/* ── Pie: las palabras grandes ──────────────────────────────── */
.pie__lema { display: grid; gap: 1px; margin-bottom: 26px; }
.pie__lema span { font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.03em; color: var(--tx); line-height: 1.06; text-transform: uppercase; }
.pie__lema span:last-child { color: var(--rojo-tx); }

/* ═══════════════════════════════════════════════════════════════
   FASE 3 — pulido premium (2026-09-01)

   Va al final a propósito: es una capa de afinado sobre el sistema
   que ya está publicado, no una hoja nueva. Lo que no se toca aquí
   se queda exactamente como está.

   Del pliego se mantienen las dos salvedades ya anotadas arriba
   (rojo de la guía REDMACH, tipografía Montserrat). Se añade una
   tercera: el gris secundario del pliego, #8D8D92, da 4.3:1 y no
   pasa AA; se conserva --tx-2/--tx-3, que sí pasan.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg:    #070707;   /* pliego */
  --bg-2:  #0D0D0D;   /* fondo alterno */
  --sup:   #111111;
  --sup-2: #161616;
  --rojo-hl: #180708; /* rojo muy oscuro para superficies con carga */
}

/* ── Profundidad: superficies distintas, no todo el mismo negro ── */
.sec--sup { background: var(--bg-2); }
.sec { position: relative; }

/* Un grano finísimo, generado con un SVG en línea. Sin peticiones,
   sin imagen, sin librería: 300 bytes que quitan el aspecto plano
   del negro puro en pantallas grandes. */
.hero__grano,
.cierre::after {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .32; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.cierre::after { content: ""; }

/* Halo radial sobre Sudamérica: el ojo va donde está el hub. */
.hero__fondo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 52% at 78% 66%, rgba(237,28,36,.10), transparent 70%);
}

/* ── Marquesina editorial ───────────────────────────────────── */
.tira__grupo { gap: 0; }
.tira__grupo span { padding: 0 34px; }
/* Sin la opacidad .8: el rombo se quedaba en 4.17 sobre la cinta.
   Es decorativo y va en un bloque aria-hidden, pero cuesta nada. */
.tira__grupo i { color: var(--rojo); font-style: normal; }
.tira__ruta { color: var(--tx); font-weight: 600; }

/* ── Hero: la ruta vertical del móvil ───────────────────────── */
.hero__ruta-m { display: none; }
@media (max-width: 760px) {
  .hero__mapa { opacity: .28; }
  /* .hero es flex en fila y esto entraba como segundo hijo: la
     ruta se quedaba en 56 px pegada al borde y CALLAO salía
     cortado. Se envuelve la fila y ambos ocupan el ancho. */
  .hero { flex-wrap: wrap; }
  .hero > .hero__in { flex: 0 0 100%; }
  .hero__ruta-m {
    flex: 0 0 100%;
    display: grid; justify-items: center; gap: 6px;
    margin: 34px auto 0; position: relative; z-index: 2;
  }
  .hero__ruta-n {
    display: grid; justify-items: center; gap: 2px;
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase; color: var(--tx);
  }
  .hero__ruta-n em {
    font-style: normal; font-size: 9px; letter-spacing: .16em; color: var(--tx-3);
  }
  .hero__ruta-n::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--rojo); margin-bottom: 6px;
  }
  .hero__ruta-n--hub::before { background: var(--tx); box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
  .hero__ruta-m > i {
    width: 1px; height: 56px;
    background: linear-gradient(180deg, var(--rojo), rgba(255,255,255,.18));
  }
}

/* ── RM Suite: módulos y salida ─────────────────────────────── */
.suite-mods { display: grid; gap: 7px; padding-top: 12px; border-top: 1px solid var(--borde); }
.suite-mods em {
  font-family: var(--mono); font-style: normal; font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3);
}
.suite-mods ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.suite-mods li {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-2); border: 1px solid var(--borde); border-radius: 999px; padding: 4px 10px;
}
.suite-abrir {
  display: inline-flex; align-items: center; gap: 8px; align-self: start;
  margin-top: 14px; padding: 11px 18px; min-height: 44px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tx);
  border: 1px solid var(--borde-2); border-radius: var(--r);
  transition: background .22s, border-color .22s, transform .22s var(--ease);
}
.suite-abrir:hover { background: var(--rojo-btn); border-color: var(--rojo-btn); transform: translateY(-2px); }

/* La barra de documentos se dibuja al entrar (la mueve el JS). */
.suite-docs i b { width: 0; transition: width 1s var(--ease); }
.suite-docs.visto i b { width: 87%; }

/* ── Red global: el mapa responde al panel y viceversa ───────
   Se atenúa lo que NO es la zona activa en lugar de encender la
   activa: así el mapa no parpadea y la lectura es más tranquila. */
.red__mapa .m-nodo,
.red__mapa .m-ruta { transition: opacity .3s var(--ease); }
.red.hay-zona .m-nodo,
.red.hay-zona .m-ruta { opacity: .18; }
.red.hay-zona .m-nodo[data-zona].zona-on,
.red.hay-zona .m-ruta[data-zona].zona-on { opacity: 1; }
.red.hay-zona .m-nodo.zona-on .halo { r: 7; }
.red.hay-zona .m-grat { opacity: .5; }

/* La fila es un botón: se le quita el aspecto de botón, no el
   comportamiento (foco, teclado, target de 44px). */
.plaza {
  /* Cuatro columnas ahora: índice · punto · texto · estado. Con las
     tres de antes el índice ocupaba la del punto y el estado se caía
     a una segunda fila (139 px de alto en vez de 56). */
  grid-template-columns: auto 8px 1fr auto; gap: 14px;
  appearance: none; -webkit-appearance: none;
  width: 100%; text-align: left; font: inherit; color: inherit;
  cursor: pointer; min-height: 56px;
}
.plaza__idx {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--tx-3); margin-right: 2px;
}
.plaza.zona-on { background: var(--sup-2); }
.plaza:focus-visible { outline: 2px solid var(--rojo-acc); outline-offset: -2px; }

/* ── Centro de control: que parezca software, no una tarjeta ── */
.tablero__bar { position: relative; }
.tablero__demo {
  margin-left: auto;
  font-family: var(--mono); font-size: 8px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--wait);
  border: 1px solid rgba(217,165,32,.45); border-radius: 999px; padding: 3px 9px;
}
.tablero__tabs {
  display: flex; gap: 22px; padding: 0 20px;
  border-bottom: 1px solid var(--borde); background: rgba(255,255,255,.012);
}
.tablero__tab {
  position: relative; padding: 13px 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tx-3);
}
.tablero__tab--on { color: var(--tx); }
.tablero__tab--on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--rojo);
}

/* Estado en vivo: un latido lento, uno solo en toda la pantalla. */
.campo dd.vivo::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rojo); margin-right: 8px; vertical-align: middle;
}
@media (prefers-reduced-motion: no-preference) {
  .campo dd.vivo::before { animation: latido 2.6s ease-in-out infinite; }
}
@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(237,28,36,.45); }
  60%      { box-shadow: 0 0 0 7px rgba(237,28,36,0); }
}

/* Un destello que recorre la ruta de vez en cuando. */
@media (prefers-reduced-motion: no-preference) {
  .ruta-op i::after { animation: none; }
  .ruta-op i b::after {
    content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 1px;
    background: linear-gradient(90deg, transparent, #fff);
    animation: destello 5.5s ease-in-out infinite;
  }
}
@keyframes destello { 0%, 72% { opacity: 0; } 82% { opacity: .9; } 100% { opacity: 0; } }

/* ── Por qué REDMACH: el número como pieza gráfica ──────────── */
.pilar-linea { grid-template-columns: 108px minmax(180px, 280px) 1fr; align-items: center; }
.pilar-linea__n {
  font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 800; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.14); line-height: 1;
}
.pilar-linea:hover .pilar-linea__n { -webkit-text-stroke-color: rgba(237,28,36,.55); }
@media (max-width: 760px) {
  .pilar-linea { grid-template-columns: 64px 1fr; align-items: baseline; }
  .pilar-linea__n { font-size: 2rem; }
}

/* ── Ecosistema: portafolio, no muestrario de logos ─────────── */
.eco__lienzo { position: relative; overflow: hidden; }
.eco__lienzo img { transition: transform .5s var(--ease); }
.eco__card:hover .eco__lienzo img,
.eco__card:focus-within .eco__lienzo img { transform: scale(1.02); }
.eco__capa {
  position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  background: linear-gradient(180deg, transparent, rgba(7,7,7,.86));
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-2);
  opacity: 0; transform: translateY(6px);
  transition: opacity .28s, transform .28s var(--ease);
}
.eco__card:hover .eco__capa,
.eco__card:focus-within .eco__capa { opacity: 1; transform: none; }
.eco__idx { color: var(--rojo-tx); font-weight: 600; }
@media (hover: none) { .eco__capa { opacity: 1; transform: none; } }

/* ── Proceso: qué haces tú y qué hacemos nosotros ───────────── */
.paso { align-items: baseline; }
/* El <em> es el tercer hijo de una rejilla de dos columnas: sin
   colocarlo, cae en la columna del número (62 px) y parte una
   palabra por línea. Va debajo del titular, en su misma columna. */
.paso em {
  grid-column: 2; grid-row: 2; margin-top: 2px;
  font-style: normal; font-size: .82rem; line-height: 1.5; color: var(--tx-3);
}
.paso span { font-weight: 600; color: var(--tx); }

/* ── Insights: editorial, con línea entre piezas ────────────── */
.nota { border-radius: 0; }
.nota + .nota { border-top: 1px solid var(--borde); }
.nota h3 { font-size: clamp(1.25rem, 2.3vw, 1.75rem); letter-spacing: -.02em; }

/* ── Cierre: el titular grande ──────────────────────────────── */
.cierre { position: relative; }
.cierre__titular {
  font-size: clamp(2.6rem, 8.4vw, 5.6rem);
  line-height: .96; letter-spacing: -.04em; text-transform: uppercase;
}

/* ── Sistema de movimiento: cuatro gestos y ninguno más ─────── */
.rev { transition-duration: .62s; }
.mod, .eco__card, .nota { transition: transform .24s var(--ease), border-color .24s, background .24s; }
.mod:hover, .eco__card:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .hero__grano, .cierre::after { display: none; }
  * { animation: none !important; }
}

/* ── Ecosistema: qué hizo REDMACH en cada proyecto ─────────────
   Etiquetas cortas, no párrafos: de un vistazo se ve si el trabajo
   fue la importación, la marca, la web o el sistema. */
.eco__hizo {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 12px 0 0; padding: 0; list-style: none;
}
.eco__hizo li {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-2); border: 1px solid var(--borde); border-radius: 999px; padding: 4px 10px;
}
.eco__pie p { margin-bottom: 0; }

/* Fase del proyecto: mismo lenguaje que «En apertura» en el mapa.
   Si la marca todavía se está montando, la tarjeta lo dice. */
.eco__fase {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  font-family: var(--mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--wait);
  border: 1px solid rgba(217,165,32,.45); border-radius: 999px; padding: 3px 9px;
}

/* ── El mapa del hero, en vídeo ────────────────────────────────
   Hecho con HyperFrames desde la misma geometría que el SVG, así que
   ocupan exactamente la misma caja y uno sustituye al otro sin mover
   nada. `screen` deja pasar el negro del vídeo: la retícula y el halo
   de la página siguen viéndose debajo, sin rectángulo visible.
   ---------------------------------------------------------------- */
.hero__mapa > svg,
.hero__video { grid-area: 1 / 1; }
.hero__video {
  width: 100%; height: auto; aspect-ratio: 1920 / 884;
  opacity: 0; transition: opacity .9s var(--ease);
  pointer-events: none;
  /* Sin mezcla: el vídeo va en rango limitado y con mix-blend-mode:screen
     su negro no llegaba a 0, lo que levantaba un rectángulo gris sobre el
     hero. Va opaco, con el mismo #070707 dentro, y son los bordes los que
     se disuelven con una máscara: así no hay caja que delatar. */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 16%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 84%, transparent);
  mask-image:
    linear-gradient(to right, transparent, #000 16%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero__video.listo { opacity: 1; }
/* El SVG se retira solo cuando el vídeo ya está pintando: si el vídeo
   no llega a cargar, lo que queda es el mapa de siempre. */
.hero__mapa.con-video > svg { opacity: 0; transition: opacity .9s var(--ease); }

/* En móvil manda la ruta vertical y el mapa va casi apagado: un vídeo
   ahí sería peso sin lectura. */
@media (max-width: 760px) { .hero__video { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero__mapa.con-video > svg { opacity: .9; }
}

/* ── Fondos en movimiento de las tarjetas y del cierre ──────────
   Mismo criterio que el hero: el vídeo lleva dentro el color exacto
   de su superficie y son los bordes los que se disuelven, así no hay
   caja que delatar. Van muy por debajo del texto —opacidad baja y
   siempre detrás— porque son fondo, no contenido.
   ---------------------------------------------------------------- */
.mod { overflow: hidden; }
/* Esta regla existía para levantar el contenido por encima del vídeo
   de fondo, que ya no está: la foto va en el flujo y el texto debajo,
   sin capas que ordenar. Además valía 0,3,0 y le ganaba a cualquier
   posicionamiento que se le pusiera después a sus hijos. Fuera. */
.mod__fondo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1s var(--ease);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 96%);
}
/* Estas dos cifras están medidas, no elegidas a ojo: compuse el píxel
   más claro de cada vídeo sobre el #111111 de la tarjeta y busqué la
   opacidad máxima que deja el texto en AA. El techo real es .76 en
   Transporte —el más brillante de los tres—, así que .5 en reposo y
   .68 al pasar por encima quedan con margen. */
.mod__fondo.listo { opacity: .5; }
@media (hover: hover) { .mod:hover .mod__fondo.listo { opacity: .68; } }

/* El número de la tarjeta iba en --tx-3, que sobre el vídeo se queda
   en 3.35:1. Sube a --tx-2 SOLO donde hay fondo en movimiento: con
   ese gris el techo de opacidad pasa de .33 a .76. */
.mod:has(.mod__fondo) .mod__n,
.mod:has(.mod__foto)  .mod__n { color: var(--tx-2); }

.cierre__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s var(--ease);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.cierre__video.listo { opacity: 1; }
/* La curva estática sobra en cuanto el vídeo pinta; si no llega, se queda. */
.cierre.con-video .cierre__linea { opacity: 0; transition: opacity 1.2s var(--ease); }

@media (max-width: 760px) {
  .mod__fondo, .cierre__video { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mod__fondo, .cierre__video { display: none; }
  .cierre.con-video .cierre__linea { opacity: 1; }
}

/* ── RM Suite: que se vea funcionando ──────────────────────────
   Sin vídeo, a propósito: el panel es texto real, y en vídeo se
   volvería borroso en pantallas densas y mudo para un lector de
   pantalla. Se anima el HTML que ya está.

   Las cifras NO cambian. Un número que se mueve solo parecería un
   dato en vivo, y no lo es: el panel lleva su etiqueta de demo y así
   se queda. Lo que se mueve es lo que indica actividad —el estado en
   tránsito y el recorrido por los módulos—, que no afirma nada.
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* La cifra en tránsito respira: es la única operación en curso. */
  .suite-cifras dd.rojo { animation: suiteVivo 3.2s ease-in-out infinite; }

  /* Un barrido recorre los módulos, uno cada 1,1 s. */
  .suite-mods li { animation: suiteBarrido 4.4s ease-in-out infinite; }
  .suite-mods li:nth-child(2) { animation-delay: 1.1s; }
  .suite-mods li:nth-child(3) { animation-delay: 2.2s; }
  .suite-mods li:nth-child(4) { animation-delay: 3.3s; }
}
@keyframes suiteVivo {
  0%, 100% { opacity: 1; }
  50%      { opacity: .62; }
}
@keyframes suiteBarrido {
  0%, 74%, 100% { border-color: var(--borde); color: var(--tx-2); }
  12%, 26%      { border-color: rgba(237,28,36,.5); color: var(--tx); }
}

/* ══════════════════════════════════════════════════════════════
   FOTOGRAFÍA

   El velo no está elegido a ojo. Medí el píxel más claro de cada
   foto y busqué el velo negro mínimo con el que el texto secundario
   (--tx-2, #A0A0A6) llega a 5:1 sobre él. Salía entre el 70 % y el
   81 %, y por eso el velo de las tarjetas es 80 %: por debajo, el
   párrafo de alguna tarjeta se cae por debajo de AA justo donde la
   foto tiene su brillo.

   Puede parecer mucho velo. No lo es para este sitio: la foto aquí
   es textura y profundidad, no el asunto. Lo que se lee es el texto.
   ══════════════════════════════════════════════════════════════ */

/* ── Tarjetas de servicios ─────────────────────────────────────
   La foto sustituyó al vídeo que había: en 230 px de alto las dos
   capas se estorbaban. El movimiento se queda donde lleva dato —el
   mapa del hero y la ruta del cierre—, la foto donde hay un sujeto. */
.mod__foto {
  position: absolute; inset: 0; z-index: 0;
  display: block; overflow: hidden;
  border-radius: inherit;
}
.mod__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform .6s var(--ease), opacity .6s;
  opacity: .9;
}
.mod__foto::after {
  content: ""; position: absolute; inset: 0;
  /* Negro puro y no #111111: con el gris hay que subir el alfa 6-8
     puntos para el mismo resultado, y entonces la foto se apaga más.
     Medido sobre el píxel más claro de las cinco fotos, el mínimo con
     negro es 80 % (Abastecimiento); aquí va 86 % para tener margen. */
  background: linear-gradient(180deg, rgba(0,0,0,.87) 0%, rgba(0,0,0,.86) 45%, rgba(0,0,0,.90) 100%);
}
@media (hover: hover) {
  .mod:hover .mod__foto img { transform: scale(1.05); opacity: 1; }
}

/* El ecosistema se queda con los logotipos sobre el fondo para el
   que cada marca fue hecha, como estaba. Se probó con fotografía de
   producto detrás y el usuario prefirió la versión limpia: cuatro
   marcas, cuatro lienzos, sin ruido. */

/* ══════════════════════════════════════════════════════════════
   REVISIÓN DE LUZ (2026-09-02)

   El sitio se veía demasiado oscuro, y con razón. Dos causas, las
   dos medibles:

   1. La escalera de superficies era plana. Entre el fondo de página
      y la tarjeta más clara había 6 milésimas de luminancia: el ojo
      no distingue esos saltos, así que todo se leía como un único
      plano negro. La escalera nueva casi dobla cada peldaño.

   2. Las fotos estaban al 14 % de su brillo. Al ponerlas DEBAJO del
      texto había que taparlas al 86 % para que el párrafo llegara a
      AA. Eso no se arregla subiendo el brillo —el texto se caería—,
      se arregla no poniendo el texto encima: la foto pasa a ser una
      banda superior con su propio espacio y se ve entera.
   ══════════════════════════════════════════════════════════════ */

:root {
  --bg-2:  #0E0E0E;
  --sup:   #151515;
  --sup-2: #1C1C1C;
  --borde:   rgba(255, 255, 255, .10);
  --borde-2: rgba(255, 255, 255, .17);
}

/* ── La foto sale de debajo del texto ─────────────────────────
   Sangra hasta los bordes de la tarjeta con márgenes negativos que
   compensan el padding de 30 px, y se funde por abajo con el color
   de la tarjeta para que no quede un corte duro. */
.mod__foto {
  position: relative; inset: auto;
  margin: -30px -30px 20px; height: 154px;
  border-radius: var(--r-l) var(--r-l) 0 0;
}
.mod--ancho .mod__foto { height: 196px; }
.mod__foto img { opacity: 1; }
.mod__foto::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.10) 40%, rgba(21,21,21,.55) 82%, var(--sup) 100%);
}
@media (hover: hover) {
  .mod:hover .mod__foto img { transform: scale(1.06); }
}
@media (max-width: 900px) {
  .mod__foto, .mod--ancho .mod__foto { height: 168px; }
}

/* Con la foto fuera del área de texto, el número recupera su gris. */
.mod:has(.mod__fondo) .mod__n,
.mod:has(.mod__foto)  .mod__n { color: var(--tx-3); }

/* ── El hero, con algo más de luz ──────────────────────────────
   Es la parte más oscura de la página y el concepto lo pide, pero
   estaba apagando su propio mapa: la retícula al 5 % de blanco y el
   halo rojo al 10 % no llegaban a leerse en una pantalla normal. */
.hero__fondo::after {
  background: radial-gradient(48% 56% at 78% 64%, rgba(237,28,36,.17), transparent 72%);
}
.hero__mapa svg { opacity: 1; }
.m-grat { stroke: rgba(255, 255, 255, .075); }
.hero__rejilla { opacity: 1.35; }
/* El velo suelta antes por la derecha: el mapa es el argumento del
   hero y estaba tapado hasta más de la mitad del ancho. */
.hero__velo {
  background: linear-gradient(100deg, var(--bg) 6%, rgba(8,8,8,.84) 30%, rgba(8,8,8,.28) 52%, transparent 72%);
}

/* ── Las secciones se separan ──────────────────────────────────
   Con la escalera nueva, una línea superior basta para que se note
   dónde empieza cada bloque sin cambiar el fondo. */
.sec--sup { border-top: 1px solid var(--borde); }

/* ── El mapa de la red también se dibuja ───────────────────────
   Pediste el vídeo aquí. No lo pongo, y conviene que quede escrito
   por qué: este mapa NO es decorado, es el que responde al panel —al
   pasar por Japón se apagan las demás rutas— y un vídeo no puede
   hacer eso. Lo que se hace es darle al SVG el mismo movimiento que
   tiene el vídeo: las rutas se dibujan, se mantienen y se retiran,
   con los mismos tiempos. Se ve igual, sigue respondiendo y no pesa
   nada. Si prefieres el vídeo literal, es un cambio de diez líneas.

   `pathLength="1"` en cada ruta normaliza su longitud a 1, y por eso
   el dibujado se puede hacer en CSS: sin eso habría que medir cada
   curva en JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  #redMapa .m-ruta {
    stroke-dasharray: 1;
    animation: dibujarRuta 12s ease-in-out infinite;
  }
  #redMapa .m-ruta[data-zona="china"] { animation-delay: 0s; }
  #redMapa .m-ruta[data-zona="japon"] { animation-delay: .45s; }
  #redMapa .m-ruta[data-zona="usa"]   { animation-delay: .9s; }
  #redMapa .m-ruta[data-zona="usa"] + .m-ruta[data-zona="usa"] { animation-delay: 1.35s; }

  /* Los nodos aparecen con su ruta y se quedan. */
  #redMapa .m-nodo { animation: aparecerNodo 12s ease-in-out infinite; }
}
@keyframes dibujarRuta {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  4%   { opacity: .9; }
  26%  { stroke-dashoffset: 0; opacity: .9; }
  70%  { stroke-dashoffset: 0; opacity: .9; }
  92%  { stroke-dashoffset: -1; opacity: 0; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes aparecerNodo {
  0%, 100% { opacity: .55; }
  10%, 80% { opacity: 1; }
}
/* Mientras hay una zona elegida manda el panel, no el bucle: si no,
   la ruta que el usuario acaba de encender se borraría sola. */
.red.hay-zona #redMapa .m-ruta,
.red.hay-zona #redMapa .m-nodo { animation: none; stroke-dashoffset: 0; }

/* ══════════════════════════════════════════════════════════════
   REDISEÑO DEL BENTO (2026-09-02)

   Se veía desordenado, y era culpa de la propia rejilla: seis
   tarjetas con cuatro anchos distintos (span 4, 3, 2…) sobre seis
   columnas. Al añadir las bandas de foto, cada fila creció distinto
   y el bloque quedó dentado, sin una línea que seguir.

   Ahora: tres columnas iguales, cinco servicios del mismo tamaño y
   RM Suite ocupando la fila entera, que es lo que es —una plataforma,
   no un servicio más—.

   Y para que se entienda de un vistazo qué hace cada uno, el icono y
   el número se van ENCIMA de la foto. El área de texto se queda con
   tres cosas y en este orden: qué es, qué hace, dónde seguir.
   ══════════════════════════════════════════════════════════════ */
.bento { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mod--ancho, .mod--medio, .mod--tercio { grid-column: auto; }
.mod--suite { grid-column: span 3; }

.mod { padding: 0 26px 26px; gap: 10px; min-height: 0; }
.mod__foto,
.mod--ancho .mod__foto { margin: 0 -26px 0; height: 178px; }

/* El icono y el número, sobre la banda de foto */
/* Con selector de hijo: .mod > *:not(...) vale 0,2,0 y le ganaba a
   .mod__top, que se quedaba en position:relative y caía al pie de la
   banda en vez de ir sobre ella. */
.mod > .mod__top {
  position: absolute; top: 18px; left: 18px; right: 18px; z-index: 2;
  align-items: center;
}
.mod--suite > .mod__top { position: static; }
.mod__ico { background: rgba(7,7,7,.62); backdrop-filter: blur(6px); }
/* El número lleva su propia placa, igual que el icono: sobre el
   píxel más claro posible da 5.15:1, y la foto se queda entera. */
.mod__n {
  color: var(--tx); font-size: 1.05rem;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(7,7,7,.62); backdrop-filter: blur(6px);
}
.mod--suite .mod__n { background: none; backdrop-filter: none; padding: 0; font-size: 1.35rem; color: var(--tx-3); }

/* Debajo, solo el mensaje */
.mod h3 { font-size: 1.2rem; letter-spacing: -.02em; margin-top: 20px; }
.mod p  { font-size: .9375rem; line-height: 1.65; }
.mod__link { margin-top: 14px; }

/* La foto se aclara: ya no tiene texto encima, solo el número y el
   icono, que llevan su propio fondo. */
.mod__foto::after {
  /* Velo suave: el tramo fuerte que puse antes para proteger el
     número dejaba en negro la mitad superior de las fotos que ya eran
     oscuras (Abastecimiento, Marcas). La legibilidad del número se
     resuelve donde toca —debajo del número— y no oscureciendo la foto
     entera. */
  background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.08) 48%, rgba(21,21,21,.5) 86%, var(--sup) 100%);
}

/* RM Suite: texto a la izquierda, la interfaz a la derecha */
.mod--suite { padding: 30px; }
.mod--suite .mod__top { position: static; margin-bottom: 4px; }
.mod--suite .mod__ico { background: var(--sup-2); backdrop-filter: none; }
.mod--suite h3 { margin-top: 0; }

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .mod--suite { grid-column: span 2; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .mod--suite { grid-column: auto; }
  .mod__foto, .mod--ancho .mod__foto { height: 164px; }
}

/* ── El brillo de cada banda, medido ───────────────────────────
   Las fotos vienen deliberadamente oscuras —así se pidieron— y al
   recortarlas a una banda de 178 px las dos más apagadas se leían
   como un rectángulo negro. Medí la luminancia media de la franja
   que se ve en cada una: 0.0156 en Abastecimiento frente a 0.0371
   en Marcas, más del doble. De ahí los dos niveles.

   Subir el brillo aquí es seguro porque encima ya no hay texto: el
   número y el icono llevan su propia placa, y el blanco puro sigue
   siendo blanco puro, así que el peor caso de contraste no cambia. */
.mod__foto[data-tono="oscura"] img { filter: brightness(1.75) saturate(1.06); }
.mod__foto[data-tono="media"]  img { filter: brightness(1.28) saturate(1.04); }

/* El rombo de la marquesina en el rojo de texto: el #ED1C24 sobre la
   cinta da 4.17, y aunque es decorativo y va en un bloque aria-hidden
   —donde bastaría 3:1— no cuesta nada dejarlo por encima de 4.5. */
.tira__grupo i { color: var(--rojo-tx); }

/* ── Enlaces legales del pie de la portada ─────────────────────
   Van en su propia fila, sobre la barra del copyright: son cuatro
   documentos que deben poder encontrarse, no letra pequeña. */
.pie__legal {
  display: flex; flex-wrap: wrap; gap: 6px 26px;
  padding-top: 22px; border-top: 1px solid var(--borde);
}
.pie__legal a {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tx-2);
  min-height: 44px; display: inline-flex; align-items: center;
  transition: color .2s;
}
.pie__legal a:hover { color: var(--rojo-tx); }