/* La Factory — componentes compartidos de una "sala".
   Depende de tokens.css (variables de color/tipografía). */

.page{max-width:1180px;margin:0 auto;position:relative;}

/* masthead — el logo ("LA FACTORY") siempre a la izquierda. */
.masthead{display:flex;justify-content:space-between;align-items:flex-start;padding:24px clamp(18px,4vw,48px) 10px;flex-wrap:wrap;gap:8px;}
.masthead .brand{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.masthead .brand a{text-decoration:none;}
.masthead .brand .wordmark{font-family:'Archivo Black';font-size:29px;letter-spacing:-.015em;}
.masthead .brand .sub{font-family:'IBM Plex Mono';font-size:10.5px;letter-spacing:0;text-transform:uppercase;color:var(--cobalt);display:inline-block;text-align:justify;text-align-last:justify;-moz-text-align-last:justify;}
@media (max-width:640px){
  .masthead .brand .sub{width:auto !important;text-align:left;text-align-last:left;-moz-text-align-last:left;}
}
.masthead .tag{font-family:'IBM Plex Mono';font-size:11px;color:var(--sub);padding-top:3px;}

/* hero — grilla de dos columnas (≈58/42) en todas las páginas: el
   panel de imagen queda centrado verticalmente contra todo el bloque
   de texto (título + bajada), no solo contra la primera línea, que
   es como quedaba con el flex anterior (align-items:flex-start). */
.hero{padding:22px clamp(18px,4vw,48px) 34px;display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:36px;}

/* banner-explode — ilustración ancha entre el hero y "Cómo trabaja
   la Factory" (home). Fondo transparente propio de la ilustración, sin
   recuadro ni borde, para que se sienta parte de la página. */
.banner-explode{
  margin:0 clamp(18px,4vw,48px) 48px;padding:0;
}
.banner-explode img{width:100%;height:auto;display:block;}
.banner-explode figcaption{
  margin-top:12px;font-family:'IBM Plex Mono';font-size:11.5px;letter-spacing:.04em;
  color:var(--sub);text-align:center;
}

.hero-copy{max-width:none;}
.hero .eyebrow{font-family:'IBM Plex Mono';font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt);margin-bottom:14px;}
.hero h1.disp{font-size:clamp(30px,4.8vw,54px);margin:0 0 18px;max-width:16ch;}
.hero p.lede{font-family:'IBM Plex Sans';font-size:clamp(15px,1.3vw,17px);line-height:1.65;color:var(--sub);max-width:56ch;margin:0;}

/* hero de Inicio — dos columnas (≈58/42), imagen bastante más grande
   y protagonista, centrada verticalmente contra todo el bloque de
   texto (no solo contra el título), y pegada más cerca del texto.
   Se pasa a grid porque el flex anterior alineaba la imagen contra
   la primera línea del texto (align-items:flex-start), no contra
   el bloque completo. */
.hero--home{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:56px;padding-top:38px;padding-bottom:96px;}
.hero--home .hero-copy{max-width:none;}
.hero--home h1.disp{font-size:clamp(32px,4vw,46px);max-width:22ch;margin:0 0 20px;}
.hero--home p.lede{max-width:42ch;margin:0;}

/* panel lateral del hero — foto real de una placa de la Factory, o
   ilustración. El contenedor tiene un ancho fijo y la imagen se acota
   por ALTURA (max-height), así que ninguna imagen del sitio llega a
   verse gigante ni queda perdida con espacio vacío de sobra. Mismo
   criterio que en Inicio: corrida hacia arriba y a la derecha desde
   el centro vertical del bloque de texto. */
.hero-panel{max-width:300px;margin:-40px 0 0 56px;}
.hero-panel img{
  display:block;width:auto;height:auto;max-width:100%;max-height:238px;
  animation:hero-reveal 1.2s cubic-bezier(.2,.7,.2,1) both;
}
/* aparición de la imagen del hero — arranca desenfocada y algo más
   clara/brillante, y se va enfocando y asentando a su brillo normal.
   Da un efecto de "revelado" más cinematográfico sin sacrificar la
   nitidez final del detalle técnico de la ilustración. */
@keyframes hero-reveal{
  0%{opacity:0;filter:blur(16px) brightness(1.35);}
  55%{opacity:1;filter:blur(3px) brightness(1.18);}
  100%{opacity:1;filter:blur(0) brightness(1);}
}
@media (prefers-reduced-motion:reduce){
  .hero-panel img{animation:none;}
}
.hero-panel-illustration svg{width:100%;height:auto;display:block;}
@media (max-width:840px){
  .hero{grid-template-columns:1fr;}
  .hero-panel{max-width:280px;margin:0 auto;}
}

/* hero de Inicio — la ilustración es la más protagonista del sitio:
   entre 50% y 70% más grande que el resto de los paneles, centrada
   verticalmente contra todo el bloque de texto (el align-items:center
   del grid de más arriba ya resuelve eso) y pegada a la izquierda de
   su columna, sin quedar centrada dentro de ella. */
.hero-panel--compact{max-width:320px;margin:-48px 0 0 76px;}
.hero-panel--compact img{max-height:238px;margin:0;}
@media (max-width:840px){
  .hero--home{grid-template-columns:1fr;}
  .hero-panel--compact{max-width:280px;margin:0 auto;}
}

/* hero de Banco de Pruebas — la ilustración explosionada es bien
   apaisada (2.33:1); con el tope general de 240px de ancho quedaba
   achicada a una tira de ~100px de alto. Este modificador le da más
   lugar para que se vea con peso real. */
.hero-panel--lg{max-width:420px;}
.hero-panel--lg img{max-height:270px;}
@media (max-width:840px){ .hero-panel--lg{max-width:340px;margin:0 auto;} }

.section-head{padding:0 clamp(18px,4vw,48px);margin-bottom:16px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;}
.section-head .eyebrow{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt);}
.section-head p{margin:0;font-size:13px;color:var(--sub);max-width:38ch;}

/* vidriera — índice compacto de todos los hitos reales, agrupados por
   tipo de problema; no fuerza el formato de ficha/panel para cada uno */
.showcase-list{padding:0 clamp(18px,4vw,48px);margin:0 0 40px;}

/* vfilter — barra de categorías de la vidriera (Sala 04), como
   filtro de la grilla de abajo en vez de dividirla en secciones. Las
   dos versiones anteriores (grilla fija por categoría, y columnas en
   cascada) dejaban filas o alturas dispares entre categorías porque
   cada una tiene una cantidad de ítems distinta (7, 2, 5, 2, 2, 8) —
   eso es lo que se veía desprolijo. Con un solo listado parejo abajo
   y la categoría como filtro arriba, la grilla siempre es una sola
   grilla uniforme (nunca se corta a mitad de categoría), y "Todos"
   muestra las 26 fichas parejas, sin huecos ni filas incompletas. */
.vfilter{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:0 clamp(18px,4vw,48px);margin:0 0 20px;
}
.vfilter-btn{
  font-family:'IBM Plex Mono';font-size:11.5px;letter-spacing:.02em;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;cursor:pointer;color:var(--sub);transition:all .15s ease;
}
.vfilter-btn .vcount{opacity:.65;margin-left:2px;}
.vfilter-btn:hover{border-color:var(--cobalt);color:var(--ink);}
.vfilter-btn.is-active{background:var(--cobalt);border-color:var(--cobalt);color:var(--cobalt-ink);}
.vfilter-btn.is-active .vcount{opacity:.85;}

/* vgrid — una sola grilla pareja (columnas fijas, no auto-fill), con
   todas las fichas juntas en el orden de categoría. El JS de más
   abajo oculta (display:none) las que no matchean el filtro activo —
   al sacarlas del flujo, la grilla se reacomoda sola sin dejar
   huecos. */
.vgrid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  padding:0 clamp(18px,4vw,48px);margin:0 0 40px;
}
@media (max-width:900px){ .vgrid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .vgrid{grid-template-columns:repeat(2,1fr);} }
.vchip{
  background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--cobalt);
  border-radius:10px;padding:14px 16px;text-align:left;cursor:pointer;
  transition:transform .15s ease, border-color .15s ease;
}
.vchip.is-hidden{display:none;}
.vchip:hover{transform:scale(0.97);}
.vchip .vcat-tag{display:block;font-family:'IBM Plex Mono';font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);margin-bottom:6px;}
.vchip .vname{display:block;font-family:'IBM Plex Mono';font-weight:600;font-size:12.5px;color:var(--ink);}
.vchip-cobalt{border-left-color:var(--cobalt);}
.vchip-ink{border-left-color:var(--ink);}
.vchip-coral{border-left-color:var(--coral);}
.vchip-soon{border-left:4px dashed var(--line);}
.vchip-soon .vname{color:var(--sub);}

.showcase-row{display:flex;gap:22px;padding:13px 0;border-top:1px solid var(--line);align-items:baseline;}
.showcase-row:first-of-type{border-top:none;}
.showcase-name{flex:0 0 220px;font-family:'IBM Plex Mono';font-weight:600;font-size:12.5px;color:var(--ink);}
.showcase-desc{margin:0;font-size:13px;line-height:1.55;color:var(--sub);}
@media (max-width:720px){
  .showcase-row{flex-direction:column;gap:5px;}
  .showcase-name{flex-basis:auto;}
}

/* mosaic — auto-fit: funciona igual con 2, 3 o 4 fichas */
.mosaic{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  grid-auto-rows:minmax(190px,1fr);gap:14px;
  padding:0 clamp(18px,4vw,48px) clamp(28px,4vw,48px);
}
.tile{
  border:2px solid transparent;text-align:left;border-radius:18px;cursor:pointer;position:relative;overflow:hidden;
  padding:24px;display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  break-inside:avoid;
}
.tile:not(.tile-soon):hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px -18px rgba(20,20,15,.4);
}
.tile-cobalt{background:var(--cobalt);color:var(--cobalt-ink);}
.tile-ink{background:var(--ink);color:var(--bone);}
.tile-coral{background:var(--coral);color:var(--coral-ink);}
.tile-cobalt:hover{border-color:var(--coral);}
.tile-ink:hover{border-color:var(--coral);}
.tile-coral:hover{border-color:var(--ink);}
.tile-soon{
  background:none;border:2px dashed var(--line);color:var(--sub);cursor:default;
  align-items:center;justify-content:center;text-align:center;gap:8px;padding:16px;
}
.tile-soon .soon-plus{font-size:20px;line-height:1;color:var(--line);}
.tile-soon .soon-text{margin:0;font-size:11px;letter-spacing:.02em;max-width:20ch;}
.tile .idx{font-family:'IBM Plex Mono';font-size:12px;opacity:.75;}
.tile h2.disp{font-size:clamp(19px,2.2vw,27px);margin:0;}
.tile .code{font-family:'IBM Plex Mono';font-size:11px;opacity:.75;margin-bottom:6px;display:block;}
.tile .go{font-family:'IBM Plex Mono';font-size:11.5px;display:flex;align-items:center;gap:6px;transition:gap .18s ease;}
.tile:not(.tile-soon):hover .go{gap:10px;}

/* impacto */
.impact{padding:6px clamp(18px,4vw,48px) 40px;}
.impact-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
@media (max-width:760px){ .impact-row{grid-template-columns:1fr;} }
.impact-cell{background:var(--panel);padding:20px 20px;font-size:13.5px;line-height:1.6;color:var(--sub);}
.impact-cell strong{display:block;color:var(--ink);font-family:'Archivo Black';font-weight:400;font-size:15px;margin-bottom:6px;}
/* variante oscura — un momento de contraste real en la página en vez
   de que todas las secciones sean fondo blanco seguido. */
.impact-row--dark{background:var(--ink);border-color:var(--ink);}
.impact-row--dark .impact-cell{background:var(--ink);color:#b9b9ae;}
.impact-row--dark .impact-cell strong{color:var(--bone);}

/* fact-grid — para la sala de proceso (Banco de Pruebas), sin overlay ni click.
   Mismo lenguaje visual que .step-card (tarjeta blanca con borde) para
   mantener un solo patrón de color en todo el sitio. 3 columnas fijas
   para que un número par de celdas nunca deje un hueco vacío. */
.fact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 clamp(18px,4vw,48px) 40px;align-items:stretch;}
.fact-block{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--ink);border-radius:12px;padding:20px 20px 6px;break-inside:avoid;}
.fact-block .block-title{margin:0 0 16px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);}
.fact-block.block-cobalt{border-top-color:var(--cobalt);}
.fact-block.block-ink{border-top-color:var(--ink);}
.fact-block.block-coral{border-top-color:var(--coral);}
.fact-block .fact-cell{padding:0 0 18px;break-inside:avoid;}
.fact-block .fact-cell:last-child{padding-bottom:20px;}
.fact-block .fact-cell .mono{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);margin-bottom:8px;}
.fact-block.block-cobalt .fact-cell .mono{color:var(--cobalt);}
.fact-block.block-coral .fact-cell .mono{color:var(--coral);}
.fact-block .fact-cell p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink);}
/* fact-photo-trigger — la foto real de la placa ya no va pegada en
   el bloque de texto (se sentía encimada); ahora es una ventanita
   que aparece al pasar el mouse (o con foco/teclado) sobre "Ver la
   placa", en vez de ocupar espacio fijo en el flujo. */
.fact-photo-trigger{
  position:relative;display:inline-block;margin-left:4px;
  font-family:'IBM Plex Mono';font-size:11px;color:var(--cobalt);
  border-bottom:1px dotted var(--cobalt);cursor:default;
}
.fact-photo-pop{
  position:absolute;left:0;bottom:calc(100% + 10px);width:180px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px;box-shadow:0 14px 30px -14px rgba(20,20,15,.35);
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease;z-index:5;
}
.fact-photo-pop img{width:100%;height:auto;display:block;margin-bottom:6px;}
.fact-photo-pop .mono{font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--sub);}
.fact-photo-trigger:hover .fact-photo-pop,
.fact-photo-trigger:focus .fact-photo-pop,
.fact-photo-trigger:focus-within .fact-photo-pop{
  opacity:1;visibility:visible;transform:translateY(0);
}

@media (max-width:820px){ .fact-grid{grid-template-columns:1fr;} }

/* modo rapido */
.fastpath{padding:0 clamp(18px,4vw,48px) 40px;}
.fastpath-inner{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px clamp(20px,3vw,30px);}
.fastpath-row{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;}
.fastpath-row p{margin:0;font-size:13px;color:var(--sub);max-width:44ch;}
.fastpath .eyebrow{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt);margin-bottom:6px;}
.toggle-btn{
  font-family:'IBM Plex Mono';font-size:12px;background:var(--ink);color:var(--bone);border:none;border-radius:8px;
  padding:11px 18px;cursor:pointer;white-space:nowrap;
}
.toggle-btn:hover{background:var(--cobalt);}
.fast-list{display:none;margin-top:18px;border-top:1px solid var(--line);}
.fast-list.on{display:block;}
.fast-row{display:grid;grid-template-columns:90px 1fr 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:12.5px;}
@media (max-width:640px){ .fast-row{grid-template-columns:1fr;gap:3px;} }
.fast-row.head{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--sub);padding-top:14px;}
.fast-row .mono{color:var(--cobalt);font-size:11px;}

/* cta */
.cta{padding:0 clamp(18px,4vw,48px) 60px;}
.cta-band{
  border-radius:18px;padding:clamp(28px,4.5vw,48px);background:var(--ink);color:var(--bone);
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.cta-band h2.disp{margin:0 0 6px;max-width:16ch;font-size:clamp(22px,3vw,32px);}
.cta-band p{margin:0;opacity:.7;font-size:13.5px;max-width:34ch;}
.btn-primary{
  font-family:'IBM Plex Mono';font-size:13px;font-weight:600;text-decoration:none;
  background:var(--coral);color:var(--coral-ink);padding:14px 24px;border-radius:9px;white-space:nowrap;
  display:inline-block;
}
.btn-primary:hover{background:var(--bone);color:var(--ink);}


/* splash — pantalla de entrada, solo Home */
.splash{
  position:fixed;inset:0;z-index:9000;background:var(--bone);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  opacity:1;visibility:visible;transition:opacity .55s ease, visibility .55s ease;
}
.splash.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}
.splash-mark{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:0 20px;}
.splash-word{
  font-family:'Archivo Black';font-size:clamp(26px,6vw,50px);letter-spacing:-.01em;color:var(--ink);
  opacity:0;transform:translateY(14px) scale(.96);
}
.splash-sub{
  font-family:'IBM Plex Mono';font-size:11.5px;letter-spacing:.06em;color:var(--cobalt);text-transform:uppercase;
  opacity:0;
}
.splash.is-active .splash-word{animation:splash-word-in .7s cubic-bezier(.2,.8,.2,1) .1s forwards;}
.splash.is-active .splash-sub{animation:splash-sub-in .6s ease .5s forwards;}
@keyframes splash-word-in{to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes splash-sub-in{to{opacity:1;}}

.splash-orbit{position:absolute;inset:0;pointer-events:none;z-index:1;}
.splash-img{
  position:absolute;width:clamp(64px,9vw,110px);height:auto;border-radius:12px;
  opacity:0;filter:saturate(.85);
}
.splash-img--1{top:12%;left:10%;}
.splash-img--2{top:14%;right:9%;}
.splash-img--3{bottom:13%;left:11%;}
.splash-img--4{bottom:11%;right:10%;}
.splash.is-active .splash-img--1{animation:splash-img-in .9s cubic-bezier(.2,.8,.2,1) .05s forwards;}
.splash.is-active .splash-img--2{animation:splash-img-in .9s cubic-bezier(.2,.8,.2,1) .2s forwards;}
.splash.is-active .splash-img--3{animation:splash-img-in .9s cubic-bezier(.2,.8,.2,1) .35s forwards;}
.splash.is-active .splash-img--4{animation:splash-img-in .9s cubic-bezier(.2,.8,.2,1) .5s forwards;}
@keyframes splash-img-in{
  from{opacity:0;transform:scale(.85) translateY(10px);}
  to{opacity:.5;transform:scale(1) translateY(0);}
}
@media (max-width:640px){
  .splash-img{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .splash{display:none;}
}

footer{padding:18px clamp(18px,4vw,48px);font-family:'IBM Plex Mono';font-size:10.5px;color:var(--sub);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.footer-info{display:flex;flex-direction:column;gap:3px;}
.footer-socials{display:flex;align-items:center;gap:16px;}
.footer-socials a{color:var(--sub);display:inline-flex;align-items:center;justify-content:center;transition:color .15s ease;}
.footer-socials a:hover,.footer-socials a:focus-visible{color:var(--cobalt);}
.footer-socials svg{width:16px;height:16px;display:block;}

/* overlay */
.overlay{
  position:fixed;inset:0;background:color-mix(in srgb, var(--ink) 55%, transparent);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .16s ease;z-index:50;
}
.overlay.on{opacity:1;pointer-events:auto;}
.panel{
  width:min(640px,100%);max-height:88vh;overflow:auto;border-radius:20px;background:var(--panel);
  padding:clamp(26px,4vw,40px);transform:translateY(10px) scale(.98);transition:transform .16s ease;
  border-top:10px solid var(--panel-accent, var(--cobalt));
}
.overlay.on .panel{transform:translateY(0) scale(1);}
.panel-photo-wrap{display:flex;align-items:center;justify-content:center;height:180px;margin:0 0 18px;background:var(--bone);border-radius:10px;overflow:hidden;}
.panel-photo-wrap[hidden]{display:none;}
.panel-photo{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:0;}
@media (prefers-reduced-motion:reduce){ .overlay,.panel,.tile{transition:none;} }
.panel-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;}
.panel-code{font-family:'IBM Plex Mono';font-size:11.5px;color:var(--panel-accent,var(--cobalt));}
.panel h3.disp{font-size:clamp(24px,3.4vw,32px);margin:8px 0 0;max-width:22ch;}
.panel-close{
  background:var(--bone);border:none;border-radius:50%;width:34px;height:34px;cursor:pointer;
  font-size:16px;line-height:1;color:var(--ink);flex:none;
}
.panel-close:hover{background:var(--line);}
.prow{display:grid;grid-template-columns:96px 1fr;gap:4px 14px;margin-bottom:12px;font-size:14.5px;line-height:1.65;}
@media (max-width:480px){ .prow{grid-template-columns:1fr;gap:2px;} }
.prow dt{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--sub);padding-top:2px;}
.prow dd{margin:0;}
.prow.result dd{font-weight:600;color:var(--panel-accent,var(--cobalt));}
.panel-spec{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-family:'IBM Plex Mono';font-size:11px;color:var(--sub);}
.panel-nav{display:flex;justify-content:space-between;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
.panel-nav button{background:none;border:none;font-family:'IBM Plex Mono';font-size:12px;color:var(--sub);cursor:pointer;}
.panel-nav button:hover{color:var(--ink);}


/* sección con etiqueta vertical al costado (home) — la etiqueta siempre
   queda nítida, arranca a la misma altura que el contenido de al lado */
.v-section{display:flex;gap:20px;padding:0 clamp(18px,4vw,48px);margin-bottom:56px;align-items:stretch;}
.v-section .v-label{
  font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cobalt);
  /* ancho fijo (no auto) — "Cómo trabaja la Factory" ocupa 2 líneas
     y "Salas" 1 sola; con flex:auto cada una consumía un ancho
     horizontal distinto (el doble en el caso de 2 líneas), y por eso
     el contenido de al lado (.v-content, con los cuadros) terminaba
     con un ancho disponible distinto entre una sección y otra. Con
     un ancho fijo e igual en las dos, .v-content también queda
     igual, y los cuadros de arriba y abajo miden lo mismo. */
  flex:0 0 34px;
  writing-mode:vertical-rl;transform:rotate(180deg);
  text-align:center;white-space:nowrap;
}
.v-section .v-content{flex:1;min-width:0;}
@media (max-width:640px){
  .v-section{flex-direction:column;gap:8px;}
  .v-section .v-label{flex:0 0 auto;writing-mode:horizontal-tb;transform:none;text-align:left;white-space:normal;}
}

/* pasos de "cómo trabaja la Factory" — foco por scroll: el paso activo
   queda nítido, los demás quedan blurreados hasta que les toca */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .steps{grid-template-columns:1fr;} }
.step-card{
  background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--cobalt);
  border-radius:12px;padding:24px 28px 26px;
  box-shadow:0 10px 24px -16px rgba(31,63,214,.35);
}
.step-card .mono{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalt);margin-bottom:10px;}
.step-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink);}
/* el efecto "solo el paso bajo el cursor queda nítido" es exclusivo de
   dispositivos con mouse de verdad (hover:hover + pointer:fine) — en
   touch (celular/tablet) no hay forma de disparar :hover, así que ahí
   las 4 tarjetas quedan siempre nítidas y visibles */
@media (hover:hover) and (pointer:fine){
  .step-card{
    transition:filter .3s ease, opacity .3s ease;
    filter:blur(3px);opacity:.45;
  }
  .step-card:first-child{filter:blur(0);opacity:1;}
  .steps:hover .step-card:first-child{filter:blur(3px);opacity:.45;}
  .steps .step-card:hover{filter:blur(0) !important;opacity:1 !important;}
}
@media (prefers-reduced-motion:reduce){
  .step-card{transition:none;filter:none;opacity:1;}
}


/* navegación entre salas — volver arriba, anterior/siguiente abajo */
.back-link{
  display:inline-block;font-family:'IBM Plex Mono';font-size:11.5px;color:var(--sub);
  text-decoration:none;padding:0 clamp(18px,4vw,48px);margin:2px 0 0;
}
.back-link:hover{color:var(--cobalt);}
.sala-nav{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:0 clamp(18px,4vw,48px) 40px;font-family:'IBM Plex Mono';font-size:12.5px;
}
.sala-nav a{color:var(--sub);text-decoration:none;}
.sala-nav a:hover{color:var(--cobalt);}
.sala-nav .next{margin-left:auto;text-align:right;}

/* home / index */
.rooms{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media (max-width:900px){ .rooms{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .rooms{grid-template-columns:1fr;} }
.room-card{border-radius:18px;padding:26px 24px;display:flex;flex-direction:column;gap:14px;min-height:200px;text-decoration:none;transition:transform .18s ease;}
.room-card:hover{transform:scale(0.986);}
.room-card .idx{font-family:'IBM Plex Mono';font-size:11.5px;opacity:.75;}
.room-card h2.disp{font-size:22px;margin:0;}
.room-card p{font-size:13px;line-height:1.55;margin:0;opacity:.85;}
.room-card .go{font-family:'IBM Plex Mono';font-size:11.5px;margin-top:auto;}
.room-soon{background:none;border:2px dashed var(--line);color:var(--sub);}

.room-outline{background:var(--panel);border:1px solid var(--line);color:var(--ink);}
.room-outline .idx,.room-outline .go{color:var(--cobalt);}