/* =========================================
   AJUSTES PARA MÓVIL Y TABLET
   ========================================= */

/* --- Agenda: las tarjetas deben caber completas en la pantalla ---
   Causa: la columna de la rejilla (1fr = minmax(auto,1fr)) crecía hasta el ancho de todas las tarjetas. */
@media (max-width:1024px){
  .agenda-layout{grid-template-columns:minmax(0,1fr)}
  .agenda-slider-wrapper{min-width:0;margin-right:0}
}
@media (max-width:600px){
  .agenda-scroller{gap:16px;padding-right:20px;scroll-snap-type:x mandatory}
  .event-card{flex:0 0 82%;max-width:310px;min-width:0;scroll-snap-align:start}
}

/* --- Cifras: menos aire vertical entre cifra y cifra --- */
@media (max-width:900px){
  .stats .inner.usb-dyn.usb-dyn{row-gap:32px}
}
@media (max-width:600px){
  .stats .inner.usb-dyn.usb-dyn{row-gap:22px}
  .stat{margin-bottom:0}
  .stat-number{font-size:52px}
}

/* --- Megamenú en móvil ---
   Causa del fallo: .mm-main-content seguía siendo una fila (flex) con 30 px de relleno y fondo blanco,
   así que las columnas no cabían (se veían 2 y la 2.ª cortada). Ahora se apilan, compactas y plegables. */
@media (max-width:900px){
  .mega-menu{padding:0 20px 12px;gap:0}
  .mm-main-content{display:block;flex:none;padding:0;gap:0;background:transparent}
  .mm-column{width:100%;min-width:0}
  .mm-side-content{flex:none;padding:0;background:transparent;border-left:0;border-top:1px solid rgba(255,255,255,.14);margin-top:6px}

  .mm-column h4,.mm-side-content h4{
    position:relative;margin:0;padding:13px 30px 13px 0;
    font-family:var(--font-main);font-size:13px;letter-spacing:.12em;color:var(--usb-yellow);
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .mm-column h4.mt-20,.mm-side-content h4.mt-20{margin-top:0}
  .mm-column h4[role="button"],.mm-side-content h4[role="button"]{cursor:pointer;user-select:none}
  .mm-column h4[role="button"]::after,.mm-side-content h4[role="button"]::after{
    content:"+";position:absolute;right:2px;top:50%;margin-top:-11px;width:22px;height:22px;
    font:700 20px/22px var(--font-main);text-align:center;color:var(--usb-yellow);
    transition:transform .15s var(--usb-ease-out,ease-out);
  }
  .mm-column h4.is-open::after,.mm-side-content h4.is-open::after{transform:rotate(45deg)}

  /* Con JS los grupos empiezan plegados; sin JS (clase ausente) se muestran todos */
  .mega-menu.usb-acc .mm-links{display:none}
  .mega-menu.usb-acc h4.is-open + .mm-links{display:flex}

  .mm-links{gap:0;padding:2px 0 8px}
  .mm-links a{padding:10px 0;min-height:42px;font-size:15px;color:#ddd}
  .mm-links a i{width:22px;color:var(--usb-yellow);opacity:.85}
  .mm-links a:hover{transform:none;background:none;padding-left:0;color:#fff}
}