/* Páginas hub de la barra de abajo (hubs.js). Rodrigo, 22 oct: «una opción por línea, que se vea dinámico para que entren».
   Cada opción es una tarjeta ancha: imagen apaisada (16:7) con degradado oscuro abajo, título en Saira itálica, una línea, etiqueta
   NUEVO/PRONTO y flecha. Una columna en celular, 2 en computadora. Al bajar, la imagen se mueve un poco (parallax en hubs.js,
   solo transform); al tocar, la tarjeta se hunde. Con «reducir movimiento» todo queda quieto. */
main.hub:not(.oculto){animation:hubEntra var(--dur-3) var(--pl-suave,cubic-bezier(.22,1,.36,1)) both}
@keyframes hubEntra{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.hub .titulo{margin-bottom:var(--esp-4,16px)}
.hub-d{margin:0;color:var(--gris);font-size:var(--t-4)}
.hub-rejilla{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-3,12px)}
@media(min-width:700px){.hub-rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-4,16px)}}

.hub-tj{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:100%;min-width:0;aspect-ratio:16/7;padding:0;border-radius:var(--radio-3);overflow:hidden;isolation:isolate;cursor:pointer;text-align:left;color:#fff;
  background:#0B0F14;border:1px solid rgba(255,255,255,.08);box-shadow:var(--sombra-2);-webkit-tap-highlight-color:transparent;
  transition:transform var(--dur-2) var(--pl-suave,var(--curva-entra)),border-color var(--dur-2),box-shadow var(--dur-2)}
.hub-tj:active{transform:scale(.975);transition-duration:var(--dur-1)}
@media(hover:hover){.hub-tj:hover{transform:translateY(-2px);border-color:rgba(var(--menta-rgb),.45);box-shadow:0 16px 34px -16px rgba(var(--menta-rgb),.45)}}
.hub-tj:focus-visible{outline:2px solid var(--menta);outline-offset:3px}

/* imagen a todo lo ancho; --hub-y la mueve hubs.js al bajar (parallax leve) */
.hub-img{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#0B0F14}
.hub-img img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;display:block;
  transform:translate3d(0,var(--hub-y,0px),0) scale(1.04);transition:transform var(--dur-3) var(--pl-suave,var(--curva-entra))}
.hub-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(5,7,10,.94) 0%,rgba(5,7,10,.62) 42%,rgba(5,7,10,.08) 78%,transparent 100%)}
@media(hover:hover){.hub-tj:hover .hub-img img{transform:translate3d(0,var(--hub-y,0px),0) scale(1.09)}}
/* fotos de equipo y pantallas claras: completas a la derecha sobre fondo oscuro, el texto a la izquierda */
.hub-img.contiene{background:radial-gradient(120% 120% at 80% 30%,#22303f,#0B0F14 70%)}
.hub-img.contiene img{inset:0;height:100%;object-fit:contain;object-position:right center;padding:12px 16px 12px 42%}
/* en celular el título ocupa todo el ancho: la foto se queda arriba a la derecha, encima del título y de la flecha */
@media(max-width:699px){.hub-img.contiene:not(.marco) img{object-position:right top;padding:12px 14px 66px 40%}}
.hub-img.contiene::after{background:linear-gradient(90deg,rgba(5,7,10,.9) 0%,rgba(5,7,10,.55) 45%,transparent 70%)}
/* EMIR Claro formal (4 nov): equipos recortados y clips de la función arriba a la derecha; el arte (16:7) ya deja libre el texto y la flecha */
.hub-img.marco img,.hub-img.marco video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;padding:0;display:block;
  transform:translate3d(0,var(--hub-y,0px),0);transition:transform var(--dur-3) var(--pl-suave,var(--curva-entra))}
.hub-img.marco video{transform:none}

.hub-tx{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;padding:var(--esp-6,32px) 64px var(--esp-3,12px) var(--esp-4,16px)}
.hub-tx b{font:600 italic var(--t-7)/1.02 var(--num);letter-spacing:.005em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5);overflow-wrap:anywhere}
.hub-tx small{font-size:var(--t-3);line-height:1.3;color:rgba(238,241,245,.82)}
.hub-ir{position:absolute;right:var(--esp-3,12px);bottom:var(--esp-3,12px);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform var(--dur-2) var(--pl-suave,var(--curva-entra)),background var(--dur-2)}
.hub-ir svg{width:20px;height:20px;transform:rotate(180deg)}
.hub-tj:active .hub-ir,.hub-tj:hover .hub-ir{transform:translateX(3px);background:rgba(var(--menta-rgb),.3)}
.hub-tag{position:absolute;top:var(--esp-3,12px);left:var(--esp-3,12px);font:700 var(--t-1)/1 var(--f);font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px 4px;border-radius:var(--radio-pildora);color:#0B0F14;background:#C9D0D9}
.hub-tag.nuevo{background:linear-gradient(100deg,#FFD60A,#FFB020)}
.hub-tj.pronto .hub-img img{filter:saturate(.55) brightness(.8)}
@media(max-width:359px){.hub-tx b{font-size:var(--t-6)}}
@media(min-width:1100px){.hub-tx b{font-size:30px}}
@media(prefers-reduced-motion:reduce){.hub-img img,.hub-tj,.hub-ir{transition:none!important}.hub-img img{transform:none!important}}

/* equipo EMIR: volver al Panel desde el encabezado (solo celular) */
.hub-panel{margin-left:auto;margin-right:8px;padding:8px 12px;border-radius:var(--radio-pildora);border:1px solid rgba(var(--menta-rgb),.45);background:rgba(var(--menta-rgb),.1);color:var(--menta);font:600 var(--t-3) var(--num,var(--f));cursor:pointer}
@media(min-width:901px){.hub-panel{display:none}}
/* el robot Xamur (todavía «Pronto») flota y tapaba títulos de las tarjetas: en los hubs no sale, como en El Club (nada encimado) */
body[data-p^="hub-"] .xamur{display:none!important}

/* tarjetas propias (hubs.js, 26 oct): dibujo en blanco y negro a la derecha sobre negro con un brillo suave, monto grande arriba del título */
.hub-arte{display:block;background:radial-gradient(90% 120% at 82% 40%,rgba(255,255,255,.10),rgba(255,255,255,.02) 55%,transparent 80%),#0B0F14}
.hub-arte svg{position:absolute;right:5%;top:42%;width:auto;height:56%;transform:translate3d(0,calc(-50% + var(--hub-y,0px)),0);color:rgba(238,241,245,.9);
  transition:transform var(--dur-3) var(--pl-suave,var(--curva-entra))}
@media(hover:hover){.hub-tj:hover .hub-arte svg{transform:translate3d(0,calc(-50% + var(--hub-y,0px)),0) scale(1.05)}}
.hub-monto{font:700 italic clamp(34px,10vw,48px)/.9 var(--num);letter-spacing:-.01em;color:#fff;margin-bottom:4px}
.hub-esp .hub-tx{padding-top:var(--esp-4,16px)}
.hub-mas{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:var(--radio-pildora);background:rgba(255,255,255,.16);font-weight:700;font-size:var(--t-1);color:#fff;vertical-align:1px}
@media(min-width:700px){.hub-monto{font-size:44px}}