/* Capa de responsividad móvil/tablet. No afecta el layout de escritorio (>=901px). */

/* --- Drawer / hamburguesa (siempre en el DOM, visible sólo en móvil) --- */
.jm-burger{
  display:none;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  width:44px;height:44px;flex:0 0 auto;
  border:0;border-radius:8px;
  background:transparent;color:var(--text-strong);
  cursor:pointer;padding:0;
}
.jm-burger:active{transform:scale(.96)}
.jm-burger span{display:block;width:24px;height:2px;border-radius:0;background:currentColor;margin:0}

.jm-scrim{position:fixed;inset:0;background:rgba(27,26,25,.44);opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:998}
.jm-open .jm-scrim{opacity:1;pointer-events:auto}

.jm-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);
  background:var(--surface-card,#fff);
  box-shadow:-18px 0 48px -24px rgba(27,26,25,.5);
  transform:translateX(102%);transition:transform .26s cubic-bezier(.2,.7,.2,1);
  z-index:999;display:flex;flex-direction:column;
  padding:18px 20px calc(24px + env(safe-area-inset-bottom));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.jm-open .jm-drawer{transform:none}
.jm-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.jm-drawer__close{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:var(--text-body);font-size:26px;line-height:1;cursor:pointer;border-radius:12px}
.jm-drawer__close:active{background:rgba(0,0,0,.05)}
.jm-drawer a,.jm-drawer button.jm-link{
  display:flex;align-items:center;gap:10px;
  min-height:52px;padding:0 6px;
  font-family:var(--font-display);font-size:17px;font-weight:600;
  color:var(--text-strong);text-decoration:none;background:none;border:0;
  border-bottom:1px solid var(--border-subtle);width:100%;text-align:left;cursor:pointer;
}
.jm-drawer a:active,.jm-drawer button.jm-link:active{color:var(--jeff-red,#E62741)}
.jm-drawer .jm-cta{
  margin-top:18px;justify-content:center;min-height:52px;border:0;border-radius:12px;
  background:var(--jeff-red,#E62741);color:#fff;font-size:16px;
}

@media (max-width:900px){
  html,body{overflow-x:hidden;max-width:100%}
  .jm-burger{display:flex}
  header nav[aria-label]{display:none!important}
  img,svg,video,iframe{max-width:100%}
  /* tipografía mínima cómoda */
  body{-webkit-text-size-adjust:100%}

  /* Cintillos (marquee) más delgados sólo en móvil */
  section[data-screen-label*="intillo"]{padding-top:7px!important;padding-bottom:7px!important}
  section[data-screen-label*="intillo"] span{font-size:11.5px!important;letter-spacing:.03em!important}
  section[data-screen-label*="intillo"] span[style*="padding-right"]{padding-right:32px!important}
}

@media (max-width:900px) and (pointer:coarse){
  a,button{touch-action:manipulation}
}

/* En teléfonos el CTA del header vive en el drawer; el header queda limpio. */
@media (max-width:600px){
  header > a:not([aria-label]),
  header > div.sc-host-x:has(a){display:none!important}
  header{padding-left:16px!important;padding-right:16px!important;gap:12px!important}
}
