/* CLUB76 en la barra de arriba.

   No es un rotulo que abre un menu: es el enlace al inicio, y las secciones de
   la home cuelgan de el al pasarle el mouse. Por eso adentro no hay un "Inicio":
   tocar CLUB76 ya es eso.

   Va DESPUES de cabecera.css: reusa el mismo negro que el menu del socio
   (.upan), para que se lea como si la barra se estirara hacia abajo y no como
   una tarjeta pegada encima.

   En celular el panel deja de ser flotante: el menu del burger ya es una lista
   vertical, asi que CLUB76 queda como un enlace mas y sus secciones debajo, con
   sangria. Un desplegable adentro de otro desplegable es dos toques para llegar
   a lo mismo, y ademas dejaria a CLUB76 sin poder tocarse. */

.nav .drop{position:relative}

.dtrig{display:inline-flex;align-items:center;gap:7px;
font-size:14px;color:#B4B4BA;padding:6px 0;border-bottom:2px solid transparent}
.dtrig:hover{color:#fff}
.dtrig.on{color:#fff;border-bottom-color:var(--red)}
.dch{font-size:10px;color:#8A8A92;line-height:1;transition:transform .18s}
.drop:hover .dch{transform:rotate(180deg)}

.dpan{position:absolute;left:-13px;top:calc(100% + 13px);min-width:224px;
background:#26262B;border:1px solid #35353C;border-radius:14px;padding:7px;
box-shadow:0 18px 44px rgba(0,0,0,.45);z-index:70;
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .16s,transform .16s,visibility .16s}

/* Puente invisible entre el disparador y el panel: sin esto, el hueco de 13px
   corta el hover y el panel se cierra al bajar el mouse hacia el. */
.dpan:before{content:"";position:absolute;left:0;right:0;top:-15px;height:15px}
.drop:hover .dpan,.drop:focus-within .dpan{opacity:1;visibility:visible;transform:none}

/* Adentro del panel los enlaces son filas, no pestanas: sin la raya de abajo
   y con el fondo entero como marca de seleccion. */
.nav ul .dpan a{display:block;padding:9px 13px;border-radius:8px;border-bottom:0;
color:#E6E6EA;font-size:14px;white-space:nowrap}
.nav ul .dpan a:hover{background:#33333A;color:#fff;border-bottom:0}
.nav ul .dpan a.on{background:#33333A;color:#fff;border-bottom:0;
box-shadow:inset 2px 0 0 var(--red)}

@media(max-width:1000px){
.nav .drop{width:100%}
/* Sigue siendo un enlace: es la unica forma de volver arriba de todo. */
.dtrig{display:block;padding:6px 0;border-bottom:0}
.dtrig.on{color:#fff;border-bottom:0}
.dch{display:none}
.dpan{position:static;opacity:1;visibility:visible;transform:none;
background:transparent;border:0;border-radius:0;box-shadow:none;
padding:0;min-width:0;margin:2px 0 4px}
.dpan:before{display:none}
.nav ul .dpan a{padding:7px 0 7px 13px;border-radius:0;
box-shadow:inset 2px 0 0 #35353C}
.nav ul .dpan a:hover{background:transparent;color:#fff}
.nav ul .dpan a.on{background:transparent;box-shadow:inset 2px 0 0 var(--red)}
}