/* ══════════════════════════════════════════════════════════════════════════
   Home institucional — Marcas Millonarias

   Extiende public/css/mm-2026.css; no lo reemplaza. Todo el color, la
   tipografía y el motion salen de los tokens del sistema.

   Jerarquía: el home no reparte peso por igual entre los ocho ejes. MAPA y
   NOVA son lo propietario de la agencia y ocupan el doble de superficie; los
   otros seis son servicios y secciones, y se leen como índice.

   Momento de marca: el símbolo MM se dibuja con un barrido de clip-path y un
   anillo que orbita. Reproduce la animación del outro de los videos de MM con
   el PNG oficial del manual, así que queda nítido a cualquier tamaño y no
   descarga un mp4. Bajo prefers-reduced-motion aparece ya dibujado.
   ══════════════════════════════════════════════════════════════════════════ */

.home-institucional main{min-width:0}
.home-institucional [id]{scroll-margin-top:100px}
.home-institucional a:focus-visible,
.home-institucional summary:focus-visible{outline:2px solid var(--lav);outline-offset:5px}

.skip-link{position:fixed;top:12px;left:12px;z-index:1000;transform:translateY(-160%);
  padding:12px 18px;background:var(--ink-0);color:var(--td-1);border:2px solid var(--lav)}
.skip-link:focus{transform:translateY(0)}

.home-contact-link{color:var(--td-2);font-size:13px;display:inline-flex;align-items:center;
  min-height:44px;padding:8px 0}
.home-anchor{position:absolute;top:0}
.home-accent{color:var(--lav)}

/* ── Hero ────────────────────────────────────────────────────────────────
   Dos columnas: la tesis tipográfica a la izquierda, el símbolo a la derecha.
   El hero deja de ser un rectángulo con un gradiente y pasa a tener un ancla
   visual: la marca dibujándose. */

.home-institucional .hero{min-height:0;padding:150px 0 0;position:relative;overflow:hidden}
.home-institucional .hero-in{display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:40px clamp(32px,5vw,80px);align-items:center;padding-bottom:clamp(64px,7vw,104px)}
.home-institucional .hero .eyebrow{margin-bottom:22px}
.home-institucional .display{font-size:clamp(2.15rem,1rem + 4.4vw,5.1rem);margin:0;
  line-height:1.08;letter-spacing:-.05em}
.home-institucional .hero .lead{max-width:46ch;margin:26px 0 0;
  font-size:clamp(15px,1.2vw,18px);line-height:1.8}

/* Datos institucionales: identidad, no métricas de venta. */
.home-facts{display:flex;flex-wrap:wrap;gap:12px clamp(28px,4vw,54px);margin:clamp(32px,4vw,46px) 0 0;
  padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--line)}
.home-facts div{min-width:0}
.home-facts dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--td-3);
  margin-bottom:7px}
.home-facts dd{margin:0;font-size:13.5px;line-height:1.5;color:var(--td-1)}

/* ── Momento de marca ─────────────────────────────────────────────────── */

.home-mark{position:relative;aspect-ratio:1;width:100%;max-width:340px;justify-self:center;
  display:grid;place-items:center;isolation:isolate}
.home-mark img{width:76%;height:auto;display:block;position:relative;z-index:2;
  clip-path:inset(0 100% 0 0)}
.home-mark.on img{animation:mm-sweep 1.15s cubic-bezier(.16,1,.3,1) forwards}
@keyframes mm-sweep{to{clip-path:inset(0 0 0 0)}}

/* Halo: el azul de marca como profundidad, no como relleno de fondo. Se mantiene
   por debajo del contraste del texto vecino para no competir con el titular. */
.home-mark-halo{position:absolute;inset:-14%;border-radius:50%;z-index:0;opacity:0;
  background:radial-gradient(circle at 50% 50%,rgba(1,0,191,.42),rgba(1,0,191,.1) 46%,transparent 70%);
  filter:blur(16px)}
.home-mark.on .home-mark-halo{animation:mm-halo 1.6s .25s var(--ease) forwards}
@keyframes mm-halo{to{opacity:1}}

/* Anillo que se cierra y luego orbita: el mismo gesto del outro de video. */
.home-mark-orbit{position:absolute;inset:2%;border-radius:50%;z-index:1;opacity:0;
  background:conic-gradient(from 0deg,var(--lav) 0deg,rgba(154,160,254,0) 130deg,rgba(154,160,254,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px))}
.home-mark.on .home-mark-orbit{animation:mm-orbit-in .8s .5s var(--ease) forwards,
  mm-orbit-spin 14s 1.3s linear infinite}
@keyframes mm-orbit-in{to{opacity:1}}
@keyframes mm-orbit-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.home-scroll{position:absolute;left:var(--gutter);bottom:26px;display:flex;align-items:center;
  gap:12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--td-3)}
.home-scroll-line{width:1px;height:34px;background:var(--line-2);position:relative;overflow:hidden}
.home-scroll-line::after{content:'';position:absolute;inset:0;background:var(--lav);
  animation:mm-cue 2.4s var(--ease) infinite}
@keyframes mm-cue{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* ── Directorio ──────────────────────────────────────────────────────────
   Seis columnas: MAPA y NOVA toman media fila cada uno; los seis restantes
   van de a tres. La numeración 01–08 se retiró: los ejes no son una secuencia
   y numerarlos sugería un orden que no existe. Cada eje lleva su propio
   glifo, dibujado para esta página. */

.home-institucional .home-directory{padding:clamp(56px,7vw,92px) 0 clamp(64px,8vw,110px);
  position:relative;border-top:1px solid var(--line)}
.home-section-label{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding-bottom:26px;color:var(--td-2)}
.home-section-label h2{font-size:11px;line-height:1.5;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--td-3)}
.home-section-label>span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  white-space:nowrap;color:var(--td-3)}

.home-index{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
.home-index-item{grid-column:span 2;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:18px;align-items:start;background:var(--ink-0);
  padding:clamp(22px,2.4vw,30px) clamp(18px,2vw,26px);position:relative;
  transition:background .4s var(--ease),color .4s var(--ease)}
.home-index-item:nth-child(-n+2){grid-column:span 3;padding:clamp(30px,3.4vw,44px) clamp(24px,2.6vw,34px)}
/* Curso y Blog cierran la cuadrícula a media fila cada uno: completan las seis
   columnas exactas (2×3 + 6×2 + 2×3 = 24) y ganan peso sin robárselo a MAPA. */
.home-index-item:nth-last-child(-n+2){grid-column:span 3}
.home-index-item:nth-last-child(-n+2) .home-glyph{width:42px;height:42px;color:var(--lav)}
.home-index-item:nth-last-child(-n+2) h3{font-size:clamp(1.15rem,1rem + .8vw,1.65rem)}
.home-index-item:nth-last-child(-n+2) .home-index-arrow{color:var(--lav)}

.home-glyph{width:36px;height:36px;flex-shrink:0;color:var(--td-3);
  transition:color .4s var(--ease),transform .5s var(--ease)}
.home-index-item:nth-child(-n+2) .home-glyph{width:48px;height:48px;color:var(--lav)}

.home-index-item h3{font-size:clamp(1rem,.95rem + .4vw,1.3rem);font-weight:500;line-height:1.25;
  letter-spacing:-.02em;overflow-wrap:anywhere}
.home-index-item:nth-child(-n+2) h3{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.5rem);font-weight:400;
  letter-spacing:-.04em}
.home-index-item p{font-size:12.5px;line-height:1.65;color:var(--td-2);margin-top:9px}
.home-index-item:nth-child(-n+2) p{font-size:14px;line-height:1.75;margin-top:14px;max-width:34ch}

.home-index-arrow{font-size:20px;color:var(--td-3);line-height:1;padding-top:4px;
  transition:transform .4s var(--ease),color .4s var(--ease)}
.home-index-item:nth-child(-n+2) .home-index-arrow{font-size:26px;color:var(--lav)}

/* Entrada escalonada del directorio. Va por animación de carga y no por el
   reveal .rv del scroll: estos diez enlaces son la navegación de la página y
   no pueden quedar en opacity:0 si el JS no llega a ejecutarse. */
.home-index-item{opacity:0;animation:mm-eje .7s var(--ease) forwards}
.home-index-item:nth-child(1){animation-delay:.05s}
.home-index-item:nth-child(2){animation-delay:.11s}
.home-index-item:nth-child(3){animation-delay:.17s}
.home-index-item:nth-child(4){animation-delay:.22s}
.home-index-item:nth-child(5){animation-delay:.27s}
.home-index-item:nth-child(6){animation-delay:.32s}
.home-index-item:nth-child(7){animation-delay:.37s}
.home-index-item:nth-child(8){animation-delay:.42s}
.home-index-item:nth-child(9){animation-delay:.47s}
.home-index-item:nth-child(10){animation-delay:.52s}
@keyframes mm-eje{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.home-index-item:hover{background:var(--ink-2)}
.home-index-item:hover .home-glyph{color:var(--lav);transform:translateY(-2px)}
.home-index-item:hover .home-index-arrow{transform:translate(3px,-3px);color:var(--lav)}
/* Filo de color en el borde superior al pasar: el azul de marca como estructura. */
.home-index-item::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--fill-brand);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.home-index-item:hover::after{transform:scaleX(1)}

/* ── MAPA ────────────────────────────────────────────────────────────────
   Aquí la secuencia sí es real, así que se muestra como secuencia: reutiliza
   .steps/.rail/.step de mm-2026.css, que ya trae el raíl de progreso atado al
   scroll. La letra de cada etapa va en contorno, a gran escala. */

.home-method{background:var(--ink-1);border-top:1px solid var(--line)}
.home-institucional .home-map{max-width:none;margin-top:clamp(40px,5vw,64px)}
.home-institucional .home-map .step{grid-template-columns:auto minmax(0,1fr);
  align-items:start;border-bottom:1px solid var(--line);padding:clamp(22px,2.6vw,30px) 0}
.home-institucional .home-map .step:last-child{border-bottom:0}
/* La letra vive en una caja de ancho fijo para que las cuatro etapas alineen
   su texto en la misma columna; sin ella el glifo estira la celda auto. */
.home-map-body{display:grid;grid-template-columns:clamp(58px,7vw,104px) minmax(0,1fr);
  gap:clamp(18px,2.6vw,38px);align-items:center;min-width:0}
.home-map-text{min-width:0}
/* La etiqueta de etapa alinea las cuatro filas en la misma columna. */
.home-institucional .home-map .step-k{width:clamp(74px,9vw,100px)}
.home-map-letter{display:block;width:100%;text-align:center;
  font-size:clamp(2.6rem,1.6rem + 3.6vw,5rem);line-height:.9;font-weight:300;
  color:transparent;-webkit-text-stroke:1.6px rgba(154,160,254,.42);letter-spacing:-.04em;
  transition:-webkit-text-stroke-color .6s var(--ease)}
.home-institucional .home-map .step.on .home-map-letter{-webkit-text-stroke-color:var(--lav)}
.home-institucional .home-map h3{font-size:clamp(1.15rem,1rem + .8vw,1.7rem);font-weight:500;
  letter-spacing:-.02em;margin-bottom:10px;overflow-wrap:anywhere}
.home-institucional .home-map p{font-size:14.5px;line-height:1.75;color:var(--td-2);max-width:46ch}

/* ── NOVA y Automatizaciones ─────────────────────────────────────────────
   Dos bloques de igual peso. Cada uno lleva un diagrama propio en SVG en
   lugar de una captura: representa la forma del producto sin afirmar cifras
   ni mostrar copy que no corresponde a esta marca. */

.home-technology{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,3vw,44px);padding:clamp(64px,8vw,110px) var(--gutter)}
.home-tech-card{min-width:0;display:flex;flex-direction:column;
  border:1px solid var(--line);background:var(--ink-1);
  padding:clamp(26px,3vw,40px);transition:border-color .5s var(--ease)}
.home-tech-card:hover{border-color:var(--line-2)}
.home-tech-head{display:flex;flex-direction:column;gap:16px}
/* Mirano Extended es ancha: «Automatizaciones» a 2.6rem no entra en la columna
   y el navegador partía la palabra por la mitad. El tope baja hasta que la
   palabra más larga de la sección entra en una línea. */
.home-technology h2{font-size:clamp(1.15rem,.9rem + 1.15vw,2rem);margin:0;letter-spacing:-.035em;
  overflow-wrap:break-word;text-wrap:balance;hyphens:auto}
.home-diagram{margin:clamp(26px,3vw,34px) 0 clamp(22px,2.6vw,30px);padding:0;
  background:var(--ink-0);border:1px solid var(--line)}
.home-diagram svg{width:100%;height:auto;display:block}
.home-technology p{color:var(--td-2);font-size:14.5px;line-height:1.8;margin:0}
.home-caps{margin-top:auto;padding:22px 0 0;list-style:none;
  border-top:1px solid var(--line);display:grid;gap:1px}
.home-caps li{font-size:12.5px;line-height:1.5;color:var(--td-2);padding:11px 0 11px 22px;
  position:relative}
.home-caps li::before{content:'';position:absolute;left:0;top:16px;width:9px;height:1px;
  background:var(--lav)}

/* Enlace de salida de sección: discreto, con la flecha separada del texto para
   que el subrayado no la cruce. */
.home-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:20px;
  color:var(--lav);font-size:13px;line-height:1.6;
  transition:gap .35s var(--ease),color .35s var(--ease)}
.home-link span{font-size:15px;line-height:1}
.home-link:hover{gap:16px;color:var(--lav-hi)}

/* ── Formación ───────────────────────────────────────────────────────────
   Cierra la promesa del titular: estrategia (MAPA), tecnología (NOVA y
   automatizaciones) y formación. Dos piezas distintas —la plataforma y el
   programa en grupo— y no una sola tarjeta genérica de «cursos». */

.home-learn{border-top:1px solid var(--line);background:var(--ink-1)}
.home-learn-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(20px,2.4vw,32px);margin-top:clamp(36px,4.5vw,56px)}
.home-learn-card{display:flex;flex-direction:column;min-width:0;
  border:1px solid var(--line);background:var(--ink-0);padding:clamp(24px,3vw,40px);
  transition:border-color .5s var(--ease)}
.home-learn-card:hover{border-color:var(--line-2)}
/* El programa en grupo lleva el acento: es lo que se puede cursar ahora. */
.home-learn-card.is-featured{border-color:rgba(154,160,254,.34);position:relative}
.home-learn-card.is-featured::before{content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;
  width:2px;background:var(--fill-brand)}
.home-learn-tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--td-3)}
.home-learn-card h3{font-size:clamp(1.15rem,1rem + 1vw,1.9rem);font-weight:500;letter-spacing:-.03em;
  margin:16px 0 14px;overflow-wrap:break-word;hyphens:auto}
.home-learn-card>p{font-size:14.5px;line-height:1.8;color:var(--td-2);margin:0}
.home-learn-card .home-caps{margin-top:26px}
.home-learn-card .home-link{margin-top:auto;padding-top:24px}

/* ── Blog ────────────────────────────────────────────────────────────────
   Tres notas en columnas iguales. Cada tarjeta es el enlace completo, así que
   el área de clic cubre toda la celda y no solo el titular. */

.home-blog{border-top:1px solid var(--line)}
.home-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:clamp(36px,4.5vw,56px)}
.home-post{display:flex;flex-direction:column;background:var(--ink-0);min-width:0;
  padding:clamp(24px,2.8vw,34px);position:relative;transition:background .4s var(--ease)}
.home-post:hover{background:var(--ink-2)}
.home-post::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--fill-brand);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.home-post:hover::after{transform:scaleX(1)}
.home-post-meta{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--td-3)}
.home-post h3{font-size:clamp(1rem,.95rem + .45vw,1.3rem);font-weight:500;line-height:1.32;
  letter-spacing:-.02em;margin:16px 0 12px;overflow-wrap:break-word}
.home-post p{font-size:13px;line-height:1.75;color:var(--td-2);margin:0 0 22px}
.home-post-go{margin-top:auto;font-size:12px;letter-spacing:.04em;color:var(--lav);
  transition:transform .4s var(--ease)}
.home-post:hover .home-post-go{transform:translateX(3px)}

/* ── Panel de control ────────────────────────────────────────────────────
   La captura del panel a ancho completo, después de las dos columnas de
   tecnología. El pie deja dicho que las cifras son de demostración: son datos
   de ejemplo del panel, no resultados de una cuenta. */

.home-panel-sec{border-top:1px solid var(--line);background:var(--ink-1)}
.home-panel{margin:clamp(36px,4.5vw,56px) 0 0;border:1px solid var(--line-2);overflow:hidden;
  background:var(--ink-0);position:relative}
.home-panel img{width:100%;height:auto;display:block}
/* Velo desde abajo: integra la captura con el fondo en vez de dejarla cortada. */
.home-panel::after{content:'';position:absolute;left:0;right:0;bottom:0;height:22%;
  pointer-events:none;background:linear-gradient(transparent,rgba(8,15,30,.72))}
.home-panel figcaption{position:relative;z-index:1;padding:16px clamp(16px,2vw,24px);
  border-top:1px solid var(--line);font-size:11.5px;line-height:1.6;color:var(--td-3);
  background:var(--ink-1)}

/* ── Clientes ────────────────────────────────────────────────────────────
   Dos marquesinas en direcciones opuestas: el movimiento cruzado hace que se
   lea como un muro vivo y no como una cinta sola. Reutiliza .mq de
   mm-2026.css —máscara en los bordes y pausa al pasar el ratón— y solo agrega
   el sentido inverso. Las marcas se repiten dentro de cada fila para que el
   bucle no tenga costura.

   La marquesina es decorativa (aria-hidden): los once nombres viven además en
   una lista solo para lectores de pantalla, así el contenido no depende de una
   animación. */

.home-institucional #clientes{border-top:1px solid var(--line)}
.home-marquee{display:grid;gap:14px;margin-top:clamp(36px,4.5vw,54px)}
.home-marquee .mq-row{animation-duration:64s}
.home-marquee .mq-rev .mq-row{animation-name:mm-slide-rev;animation-duration:52s}
@keyframes mm-slide-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* Pausa las dos filas a la vez: pausar solo la de debajo del cursor se lee
   como un fallo, no como una intención. */
.home-marquee:hover .mq-row{animation-play-state:paused}
.home-marquee .mq-item{padding:11px 22px 11px 11px}
.home-marquee .mq-item img{width:40px;height:40px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Casos ───────────────────────────────────────────────────────────────
   La sección ya funcionaba; solo gana el fondo alterno y aire. */

.home-institucional #casos{background:var(--ink-1);border-top:1px solid var(--line)}
.home-case-note{color:var(--td-3);font-size:12px;line-height:1.7;margin-top:28px}

/* ── Firma ───────────────────────────────────────────────────────────────
   Cierre de marca, no bloque comercial: el símbolo a escala y la promesa de
   la agencia. Sin enlaces ni llamada a la acción. */

.home-signature{padding:clamp(80px,10vw,140px) 0;border-top:1px solid var(--line);
  position:relative;overflow:hidden}
.home-signature-in{display:flex;flex-direction:column;align-items:center;gap:clamp(28px,4vw,44px);
  text-align:center}
.home-mark-lg{max-width:min(300px,52vw)}
.home-signature-tag{font-size:clamp(1rem,.9rem + .9vw,1.7rem);letter-spacing:-.02em;
  color:var(--td-1);line-height:1.4;margin:0}

/* ── Contacto ────────────────────────────────────────────────────────────
   Abierto y a la vista: el usuario pidió el 2026-08-31 que el formulario deje
   de estar plegado y que el bloque explique qué recibe quien lo completa.
   Dos columnas: la propuesta a la izquierda, el formulario a la derecha. */

.home-institucional .home-contact{padding:clamp(64px,8vw,110px) 0 clamp(64px,8vw,104px);
  border-top:1px solid var(--line);background:var(--ink-1)}
.home-contact-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,4vw,64px);align-items:start}
.home-contact-head{min-width:0}
.home-contact-head h2{font-size:clamp(1.6rem,1.1rem + 2vw,3rem);letter-spacing:-.04em;
  line-height:1.12;margin:22px 0 0;text-wrap:balance}
.home-contact-head>p{color:var(--td-2);font-size:15px;line-height:1.85;margin:24px 0 0;
  max-width:42ch}
.home-contact-head .home-caps{margin-top:28px;border-top:1px solid var(--line);padding-top:22px}
.home-institucional .home-contact .form-card{margin:0}

.home-institucional .footer-in{grid-template-columns:1fr;justify-items:center;text-align:center}
.home-institucional .footer-links{gap:8px 26px;justify-content:center}
.home-institucional .footer-links a{color:var(--td-2);min-height:44px;display:inline-flex;
  align-items:center}

/* ── Responsive ──────────────────────────────────────────────────────────
   El directorio pasa de 6 a 4 y a 1 columna; MAPA gira a vertical con la
   letra sobre el texto; el símbolo del hero se coloca antes del titular en
   móvil para que la marca sea lo primero que se ve. */

@media(max-width:1080px){
 /* Cuatro columnas: los diez ejes a span 2 dan cinco filas exactas. El span 3
    de MAPA/NOVA y de Curso/Blog tiene que resetearse aquí y en el breakpoint de
    móvil: un span mayor que las columnas del grid genera columnas implícitas y
    desborda la página. */
 .home-index{grid-template-columns:repeat(4,minmax(0,1fr))}
 .home-index-item,
 .home-index-item:nth-child(-n+2),
 .home-index-item:nth-last-child(-n+2){grid-column:span 2}
 .home-learn-grid{grid-template-columns:minmax(0,1fr)}
 .home-posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
 .home-institucional .hero{padding-top:124px}
 .home-institucional .hero-in{grid-template-columns:minmax(0,1fr);gap:32px}
 .home-institucional .hero .lead{max-width:62ch}
 .home-mark{max-width:190px;justify-self:start;order:-1}
 .home-scroll{display:none}
 .home-technology,.home-contact-in{grid-template-columns:minmax(0,1fr)}
 .home-map-body{grid-template-columns:minmax(0,1fr);gap:14px}
 .home-map-letter{font-size:3rem}
}
@media(max-width:640px){
 .home-institucional .hero{padding:104px 0 0}
 .home-institucional .hero .eyebrow{font-size:9px;letter-spacing:.08em}
 .home-facts{gap:16px 26px}
 .home-index{grid-template-columns:minmax(0,1fr)}
 .home-index-item,
 .home-index-item:nth-child(-n+2),
 .home-index-item:nth-last-child(-n+2){grid-column:span 1;gap:14px;
   padding:22px clamp(16px,4vw,20px)}
 .home-index-item:nth-child(-n+2) h3{font-size:1.55rem}
 .home-index-item:nth-child(-n+2) p{font-size:13px;max-width:none}
 .home-index-item:nth-child(-n+2) .home-glyph{width:36px;height:36px}
 .home-posts{grid-template-columns:minmax(0,1fr)}
 .home-institucional .home-map .step{grid-template-columns:minmax(0,1fr)}
 .home-institucional .home-map .step .step-k{padding-left:26px;margin-bottom:12px}
}

/* ── Motion reducido ─────────────────────────────────────────────────────
   El símbolo queda dibujado y el anillo visible y quieto: el momento de marca
   no se pierde, solo deja de moverse. */

@media(prefers-reduced-motion:reduce){
 .home-mark img{clip-path:none}
 .home-mark-halo,.home-mark-orbit{opacity:1}
 .home-mark.on img,.home-mark.on .home-mark-halo,.home-mark.on .home-mark-orbit,
 .home-scroll-line::after{animation:none}
 .home-glyph,.home-index-arrow,.home-index-item::after,
 .home-map-letter,.home-contact summary span{transition:none}
 /* Los ejes quedan visibles sin animarse: su opacidad inicial es 0 y sin esto
    la navegación desaparecería para quien pide menos movimiento. */
 .home-index-item{opacity:1;animation:none;transition:none}
 /* La marquesina se detiene y muestra la primera pantalla de cada fila. */
 .home-marquee .mq-row{animation:none}
 .home-marquee .mq{overflow-x:auto}
}