/* Paez440Pro · Home · legibilidad en teléfono · v1 (21-oct-2026)
   PROBLEMA MEDIDO (Playwright, iPhone 390 px): el 93 % del texto del Home mide 6–9 px; las pestañas miden 7 px y 26 px de alto;
   los nombres se cortan ("ToolWallet440…", "FixtureLab440…"). Lighthouse marca <12 px como ilegible; Apple HIG pide 17 pt de cuerpo
   y 44×44 pt de toque; WCAG 2.2 exige 24×24 px mínimo.
   CAUSA: cada lámina 2U es una imagen de proporción fija 1086:184; a 390 px de ancho mide 66 px de alto y el texto se encoge para caber.
   SOLUCIÓN SIN CAMBIAR LA APARIENCIA: en teléfono (≤640 px) cada lámina usa el MISMO arte del rack pero en su versión apilable
   (SCROLL-PANEL tapa + loseta + base, ya usado en Tools/Academy), que crece en alto lo que haga falta. El escritorio no se toca.
   Se carga DESPUÉS de home-rack.css. */
@media (max-width:640px){
  /* 1) Pestañas: fila única con desplazamiento horizontal, 44 px de alto, 13 px, sin cortar nombres */
  .homeTabs{
    height:auto;min-height:48px;padding:3px 6px;
    display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;
  }
  .homeTabs::-webkit-scrollbar{display:none}
  .homeTab{
    flex:0 0 auto;min-width:max-content;min-height:42px;padding:0 12px;border-radius:0 0 4px 4px;
    font-size:13px;letter-spacing:.01em;overflow:visible;text-overflow:clip;scroll-snap-align:start;
  }
  .homeTab[aria-current="true"]{transform:translateY(1px)}
  /* 2) Láminas: mismo arte del rack, pero apilable (la lámina crece con el texto) */
  .homeRackUnit,.homeRackUnit.unit2u,.homeRackUnit.unit3u{
    aspect-ratio:auto;min-height:0;
    background-color:#111820;
    background-image:url("/shared/design-system/rack/v1/assets/scroll/SCROLL-PANEL-TOP.png"),url("/shared/design-system/rack/v1/assets/scroll/SCROLL-PANEL-BOTTOM.png"),url("/shared/design-system/rack/v1/assets/scroll/SCROLL-PANEL-MIDDLE-TILE.png");
    background-position:top center,bottom center,center top;background-size:100% auto,100% auto,100% auto;background-repeat:no-repeat,no-repeat,repeat-y;
    scroll-margin-top:calc(min(160px,14.7329vw) + 52px);
  }
  .homeUnitContent{padding:22px 18px 20px;gap:12px;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .homeKicker{font-size:11px;letter-spacing:.12em;margin-bottom:6px;opacity:.85}
  .homeUnitContent h2{font-size:22px;line-height:1.05}
  .homeUnitContent p{font-size:15px;line-height:1.35;max-width:100%;max-height:none;overflow:visible;margin-top:6px;opacity:.9}
  /* 3) Botón ABRIR: 48 px de toque y etiqueta legible (mismo botón gris Package 07) */
  .homeOpen{width:auto;min-width:56px;min-height:56px;font-size:11px;letter-spacing:.06em}
  .homeOpen::before{width:40px;min-width:40px;margin-bottom:5px}
}
/* Teléfonos en horizontal y tablets pequeñas: las láminas originales siguen, pero sin texto por debajo de 12 px */
@media (min-width:641px) and (max-width:900px){
  .homeTab{font-size:max(9px,.95cqw)}
  .homeUnitContent p{font-size:max(11px,1.05cqw)}
  .homeKicker{font-size:max(9px,.9cqw)}
}
/* Escritorio: las pestañas se reparten por el ancho real de cada nombre (hoy 12 columnas iguales cortan "ToolWallet440…", "RiderPlot440…", "FixtureLab44…").
   Mismo alto, mismo degradado, mismo tamaño de letra; solo cambia el reparto. */
@media (min-width:641px){
  .homeTabs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(max-content,1fr)}
  .homeTab{letter-spacing:0;padding:0 4px;overflow:visible;text-overflow:clip}
}
/* 21-oct: pista visual de que la fila de pestañas sigue hacia la derecha */
@media (max-width:640px){.homeTabs{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}}