/* ============================================================
   MENÚ ÚNICO DE siempreunidos.mx
   Lo usan todas las páginas. El contenido del menú vive en menu.js.
   ============================================================ */
.sn{
  --sn-navy:#1C2541; --sn-coral:#FF6B35; --sn-paper:#FFFDF8; --sn-line:#EEE3CF;
  --sn-wash:#FFF1D6; --sn-muted:#5C6580;
  position:sticky; top:0; z-index:100;
  background:rgba(255,253,248,.95); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--sn-line);
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:15px; line-height:1.3;
}
.sn *{box-sizing:border-box}
.sn-in{max-width:1080px; margin:0 auto; padding:0 20px; height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.sn-logo{display:block; flex:none}
.sn-logo img{height:46px; width:auto; display:block}

.sn-list{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:6px}
.sn-list li{margin:0; padding:0}

/* enlaces sueltos y chips comparten forma: píldora */
.sn-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:99px; border:1px solid transparent;
  background:none; color:var(--sn-navy); font:inherit; font-weight:700; letter-spacing:0;
  text-decoration:none; text-transform:none; cursor:pointer; white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.sn-link:hover{background:var(--sn-wash); color:var(--sn-navy)}
.sn-link:focus-visible{outline:2px solid var(--sn-coral); outline-offset:2px}
.sn-link.on{color:var(--sn-coral)}

/* chips: los dos grupos del menú */
.sn-chip{border-color:#E6D8BC; background:#fff}
.sn-chip svg{width:10px; height:10px; flex:none; transition:transform .15s}
.sn-group{position:relative}
.sn-group.open .sn-chip{background:var(--sn-wash); border-color:#E6D8BC}
.sn-group.open .sn-chip svg{transform:rotate(180deg)}

.sn-sub{
  list-style:none; margin:0; padding:8px;
  position:absolute; top:calc(100% + 8px); left:0; min-width:250px;
  background:#fff; border:1px solid var(--sn-line); border-radius:16px;
  box-shadow:0 14px 34px rgba(28,37,65,.16);
  display:none;
}
.sn-group.open .sn-sub{display:block}
/* puente invisible para que el cursor no "se caiga" entre el chip y la lista */
.sn-sub:before{content:""; position:absolute; left:0; right:0; top:-10px; height:10px}
.sn-sub a{
  display:block; padding:9px 12px; border-radius:10px;
  color:var(--sn-navy); font-weight:700; text-decoration:none;
}
.sn-sub a small{display:block; font-weight:400; font-size:13px; color:var(--sn-muted); margin-top:1px}
.sn-sub a:hover{background:var(--sn-wash)}
.sn-sub a:focus-visible{outline:2px solid var(--sn-coral); outline-offset:-2px}
.sn-sub a.on{color:var(--sn-coral)}

/* único botón lleno del menú */
.sn-cta{background:var(--sn-navy); color:#fff; padding:8px 18px; margin-left:6px}
.sn-cta:hover{background:#2B3760; color:#fff}

/* botón de menú en celular */
.sn-burger{
  display:none; width:44px; height:44px; border-radius:12px; border:1px solid #E6D8BC; background:#fff;
  cursor:pointer; padding:0; align-items:center; justify-content:center; flex:none;
}
.sn-burger span,.sn-burger span:before,.sn-burger span:after{
  content:""; display:block; width:20px; height:2px; border-radius:2px; background:var(--sn-navy); position:relative; transition:transform .2s,opacity .2s;
}
.sn-burger span:before{position:absolute; top:-6px}
.sn-burger span:after{position:absolute; top:6px}
.sn.abierto .sn-burger span{background:transparent}
.sn.abierto .sn-burger span:before{top:0; transform:rotate(45deg)}
.sn.abierto .sn-burger span:after{top:0; transform:rotate(-45deg)}

@media (max-width:820px){
  .sn-burger{display:inline-flex}
  .sn nav{position:absolute; left:0; right:0; top:100%}   /* fuera del flujo: el botón queda pegado a la derecha */
  .sn-list{
    display:none;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--sn-paper); border-bottom:1px solid var(--sn-line);
    box-shadow:0 18px 30px rgba(28,37,65,.14);
    padding:10px 16px 18px; max-height:calc(100vh - 64px); overflow:auto;
  }
  .sn.abierto .sn-list{display:flex}
  .sn-link{width:100%; padding:11px 12px; font-size:16px; border-radius:12px}
  /* en celular los grupos se muestran abiertos: el chip pasa a ser un rótulo */
  .sn-chip{border:0; background:none; pointer-events:none; padding:14px 12px 4px; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sn-muted)}
  .sn-chip.on{color:var(--sn-coral)}
  .sn-chip svg{display:none}
  .sn-sub{display:block; position:static; min-width:0; border:0; box-shadow:none; background:none; padding:0}
  .sn-sub:before{display:none}
  .sn-sub a{padding:10px 12px; font-size:16px}
  .sn-cta{margin:10px 0 0; justify-content:center; padding:12px 18px}
}
@media (prefers-reduced-motion:reduce){.sn *{transition:none!important}}

/* los enlaces a secciones (#video, #asiste…) no quedan tapados por el menú fijo */
section[id],div[id].tab-panel{scroll-margin-top:76px}