/* sm-menu: menú único canchadefutbol7.mx (Sportmaster). Prefijo .sm-menu para no chocar con estilos de cada plantilla. */

.sm-menu{
  --sm-green:#0a7a2e;
  --sm-green-2:#16a34a;
  --sm-ink:#0b1220;
  --sm-muted:#4b5563;
  --sm-line:#e5e7eb;
  --sm-soft:#f1f7f2;
  --sm-h:64px;
  position:sticky;top:0;left:0;right:0;z-index:2000;
  margin:0;padding:0;
  background:#fff;
  border-bottom:1px solid var(--sm-line);
  box-shadow:0 1px 0 rgba(11,18,32,.03);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.2;font-weight:600;
  color:var(--sm-ink);
  -webkit-font-smoothing:antialiased;
}
.sm-menu *,.sm-menu *::before,.sm-menu *::after{box-sizing:border-box}
.sm-menu--fixed{position:fixed}

.sm-menu__bar{
  max-width:1200px;margin:0 auto;height:var(--sm-h);padding:0 20px;
  display:flex;align-items:center;gap:16px;
}

/* Logo */
.sm-menu__brand{display:flex;align-items:center;flex:0 0 auto;margin:0;padding:0;line-height:0;border-radius:8px}
.sm-menu__brand img{display:block;width:auto;height:40px;max-width:none;margin:0;padding:0;border:0;transform:none;animation:none;transition:none}

/* Lista principal (desktop) */
.sm-menu__nav{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.sm-menu__list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.sm-menu__item{position:relative;margin:0;padding:0;display:block}
.sm-menu__item--cta{display:none}

.sm-menu__link,.sm-menu__sub-toggle{
  display:inline-flex;align-items:center;gap:6px;
  height:40px;padding:0 13px;margin:0;border:0;border-radius:9px;
  background:transparent;color:var(--sm-ink);
  font:inherit;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  text-decoration:none;cursor:pointer;
  transition:background-color .15s ease,color .15s ease;
}
.sm-menu__link:hover,.sm-menu__sub-toggle:hover{background:var(--sm-soft);color:var(--sm-green)}
.sm-menu__link[aria-current="page"],.sm-menu__sub-toggle.is-active{color:var(--sm-green)}
.sm-menu__link[aria-current="page"]::after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;border-radius:2px;background:var(--sm-green-2);
}
.sm-menu__link{position:relative}
.sm-menu__link:focus-visible,.sm-menu__sub-toggle:focus-visible,.sm-menu__cta:focus-visible,
.sm-menu__burger:focus-visible,.sm-menu__brand:focus-visible,.sm-menu__sub a:focus-visible{
  outline:2px solid var(--sm-green-2);outline-offset:2px;
}

.sm-menu__chev{width:14px;height:14px;flex:0 0 auto;color:var(--sm-muted);transition:transform .18s ease}
.sm-menu__sub-toggle[aria-expanded="true"] .sm-menu__chev,
.sm-menu__item--has-sub.is-open .sm-menu__chev{transform:rotate(180deg)}

/* Desplegable Canchas (desktop) */
.sm-menu__sub{
  list-style:none;margin:0;padding:8px;
  position:absolute;top:100%;left:0;min-width:270px;
  background:#fff;border:1px solid var(--sm-line);border-radius:14px;
  box-shadow:0 18px 44px rgba(11,18,32,.14);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s;
}
.sm-menu__sub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.sm-menu__item--has-sub.is-open > .sm-menu__sub{opacity:1;visibility:visible;transform:translateY(6px);transition-delay:0s}
@media (hover:hover) and (min-width:1024px){
  .sm-menu__item--has-sub:hover > .sm-menu__sub{opacity:1;visibility:visible;transform:translateY(6px);transition-delay:0s}
}
.sm-menu__sub li{margin:0;padding:0;display:block}
.sm-menu__sub a{
  display:block;padding:10px 12px;margin:0;border-radius:9px;
  font:inherit;font-size:14.5px;font-weight:600;color:var(--sm-ink);text-decoration:none;white-space:nowrap;
  transition:background-color .12s ease,color .12s ease;
}
.sm-menu__sub a:hover{background:var(--sm-soft);color:var(--sm-green)}
.sm-menu__sub a[aria-current="page"]{color:var(--sm-green);background:var(--sm-soft)}

/* CTA verde */
.sm-menu__cta{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  height:42px;padding:0 18px;margin:0;border:0;border-radius:999px;
  background:var(--sm-green-2);color:#fff;
  font:inherit;font-weight:700;letter-spacing:-.005em;white-space:nowrap;text-decoration:none;
  box-shadow:0 6px 16px rgba(22,163,74,.26);
  transition:background-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.sm-menu__cta:hover{background:var(--sm-green);color:#fff;transform:translateY(-1px);box-shadow:0 8px 20px rgba(10,122,46,.28)}
.sm-menu__cta svg{width:18px;height:18px;flex:0 0 auto;display:block;fill:currentColor;color:#fff}
.sm-menu__cta-short{display:none}

/* Hamburguesa */
.sm-menu__burger{
  display:none;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:10px;
  background:transparent;color:var(--sm-ink);cursor:pointer;flex:0 0 auto;
  align-items:center;justify-content:center;
}
.sm-menu__burger:hover{background:var(--sm-soft)}
.sm-menu__burger-box{position:relative;display:block;width:22px;height:16px}
.sm-menu__burger-box span{
  position:absolute;left:0;width:22px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .2s ease,opacity .2s ease,top .2s ease;
}
.sm-menu__burger-box span:nth-child(1){top:0}
.sm-menu__burger-box span:nth-child(2){top:7px}
.sm-menu__burger-box span:nth-child(3){top:14px}
.sm-menu--open .sm-menu__burger-box span:nth-child(1){top:7px;transform:rotate(45deg)}
.sm-menu--open .sm-menu__burger-box span:nth-child(2){opacity:0}
.sm-menu--open .sm-menu__burger-box span:nth-child(3){top:7px;transform:rotate(-45deg)}

/* Móvil / tablet */
@media (max-width:1023px){
  .sm-menu{--sm-h:56px;font-size:16px}
  .sm-menu__bar{padding:0 16px;gap:10px}
  .sm-menu__brand img{height:34px}
  .sm-menu__burger{display:inline-flex;order:3;margin-right:-8px}
  .sm-menu__cta--bar{order:2;margin-left:auto;height:38px;padding:0 14px;font-size:14px;box-shadow:none}
  .sm-menu__cta--bar .sm-menu__cta-long{display:none}
  .sm-menu__cta--bar .sm-menu__cta-short{display:inline}

  .sm-menu__nav{
    display:none;position:fixed;top:var(--sm-h);left:0;right:0;bottom:0;
    background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:8px 16px 40px;justify-content:flex-start;
  }
  .sm-menu--open .sm-menu__nav{display:block}
  .sm-menu__list{display:block}
  .sm-menu__item{border-bottom:1px solid var(--sm-line)}
  .sm-menu__item--cta{display:block;border:0;padding:18px 0 0}
  .sm-menu__link,.sm-menu__sub-toggle{
    display:flex;width:100%;height:auto;min-height:54px;padding:14px 6px;border-radius:0;
    justify-content:space-between;font-size:17px;
  }
  .sm-menu__link:hover,.sm-menu__sub-toggle:hover{background:transparent}
  .sm-menu__link[aria-current="page"]::after{display:none}
  .sm-menu__chev{width:18px;height:18px}
  .sm-menu__sub{
    position:static;min-width:0;padding:0 0 10px 14px;
    border:0;border-radius:0;box-shadow:none;background:transparent;
    opacity:1;visibility:visible;transform:none;transition:none;display:none;
  }
  .sm-menu__sub::before{display:none}
  .sm-menu__item--has-sub.is-open > .sm-menu__sub{display:block}
  .sm-menu__sub a{padding:12px 8px;font-size:16px;white-space:normal}
  .sm-menu__cta--panel{display:flex;justify-content:center;width:100%;height:50px;font-size:16px}
}
@media (max-width:359px){
  .sm-menu__brand img{height:30px}
  .sm-menu__cta--bar{padding:0 11px;font-size:13px}
}

/* Bloqueo de scroll con el panel móvil abierto */
html.sm-menu-lock,html.sm-menu-lock body{overflow:hidden!important}

/* position:sticky falla si <body> es contenedor de scroll (overflow-x:hidden en html Y body, como en las plantillas pilar).
   overflow-x:clip evita el scroll horizontal sin convertir a body en scroll container. menu.js aplica fallback a fixed si :has() no existe. */
html:has(> body > .sm-menu){overflow-x:clip}
body:has(> .sm-menu){overflow-x:clip}

/* Compensación: las plantillas con nav anterior "fixed" dejaban 110-140 px de padding-top en el hero para no quedar debajo del nav.
   Con el header sticky (en flujo) ese espacio sobra; apply_menu.py marca data-sm-prev="fixed" cuando detecta ese caso. */
.sm-menu[data-sm-prev="fixed"] + [class*="hero"],
.sm-menu[data-sm-prev="fixed"] + main > [class*="hero"]:first-child{padding-top:44px!important}
@media (max-width:1023px){
  .sm-menu[data-sm-prev="fixed"] + [class*="hero"],
  .sm-menu[data-sm-prev="fixed"] + main > [class*="hero"]:first-child{padding-top:28px!important}
}

/* Migas de pan que van justo después del nav: llevaban 96-128 px de padding-top para librar el nav fixed anterior. */
.sm-menu[data-sm-prev="fixed"] + nav.crumb,
.sm-menu[data-sm-prev="fixed"] + nav[class*="breadcrumbs"]{padding-top:36px!important}
/* y el hero que sigue a esas migas (140 px de padding-top pensados para estar bajo el nav) */
.sm-menu[data-sm-prev="fixed"] + nav[class*="breadcrumbs"] + [class*="hero"]{padding-top:48px!important}
@media (max-width:1023px){
  .sm-menu[data-sm-prev="fixed"] + nav[class*="breadcrumbs"] + [class*="hero"]{padding-top:32px!important}
  .sm-menu[data-sm-prev="fixed"] + nav.crumb,
  .sm-menu[data-sm-prev="fixed"] + nav[class*="breadcrumbs"]{padding-top:24px!important}
}

@media (prefers-reduced-motion:reduce){
  .sm-menu *,.sm-menu *::before,.sm-menu *::after{transition:none!important}
}