/* ==========================================================
   NOTA SOBRE LOS ":hover" DE ESTE ARCHIVO
   ----------------------------------------------------------
   Van envueltos en "@media (hover:hover)". En un movil no existe
   pasar por encima: el navegador finge un hover al tocar y lo
   deja PUESTO hasta que toques otra cosa. Resultado: pulsas un
   boton, te lleva a otro sitio, vuelves y el boton sigue
   iluminado como si tuvieras el dedo encima.

   La envoltura va rule a rule y en su sitio, no agrupada al
   final: una media query no cambia la especificidad ni el orden,
   asi que la cascada queda exactamente igual que antes en un
   ordenador, y en el movil esas reglas sencillamente no existen.
   ========================================================== */

/* ==========================================================
   EL MENÚ DE EFECTO MARIPOSA — UN SOLO FICHERO
   ----------------------------------------------------------
   Lo usan la portada y las siete páginas de dentro. Antes había
   DOS menús distintos: el de la portada, a pantalla completa, y
   el de las interiores, un cajón lateral. Se parecían lo justo
   para que nadie los llamara distintos y lo bastante para que
   cambiar uno no cambiara el otro.

   Ahora hay uno. Este fichero y menu-em.js son todo el menú de la
   web: si algo hay que cambiar, se cambia aquí y cambia en las
   ocho páginas a la vez. Es la única forma de que sigan siendo
   iguales dentro de seis meses.

   EL COLOR LO PONE LA PÁGINA, NO EL MENÚ.
   ----------------------------------------------------------
   Todo lo que se pinta sale de --fondo y --texto CON RESPALDO:

       background: var(--fondo, #fdfdfd)

   En la portada esas dos variables existen —las mueve la rampa
   del scroll— así que el menú sale del color que tenga la página
   en ese momento: negro arriba, y claro si lo abres al final.
   En las páginas de dentro no existen, así que entra el respaldo
   y el menú sale claro, como ellas.

   No hay ningún "si es una página oscura, entonces...". El menú
   no sabe dónde está y no tiene que saberlo: pregunta de qué
   color es el sitio y se pinta de ese color. Una condición menos
   es una condición que no se puede olvidar de actualizar.
   ========================================================== */
.pantalla-menu{
  --menu-fondo:  var(--fondo, #fdfdfd);
  --menu-texto:  var(--texto, #0e0d0b);
  --menu-suave:  var(--texto-2, #6a6a6a);
  --menu-realce: var(--fondo-2, #efece5);
  --menu-borde:  var(--borde, clamp(.85rem, 3.5vw, 1.6rem));

  position:fixed; inset:0; z-index:200;
  background:var(--menu-fondo); color:var(--menu-texto);
  font-family:var(--sans, inherit);
  display:flex; flex-direction:column;
  padding:calc(var(--menu-borde) + env(safe-area-inset-top)) var(--menu-borde)
          calc(var(--menu-borde) + env(safe-area-inset-bottom));
  /* La visibilidad va con retardo para que no corte el fundido a
     mitad. Escrita en el mismo sitio que la opacidad y sin que
     ninguna otra regla la pueda pisar por partes — que es
     exactamente como se rompió esto una vez en el botón de la
     barra. */
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease, ease), visibility 0s linear .45s;
}
.pantalla-menu.es-abierto{ opacity:1; visibility:visible; transition-delay:0s }

.pantalla-menu__cabecera{ display:flex; align-items:center; justify-content:space-between; flex:0 0 auto }
.pantalla-menu__marca img{ width:clamp(42px,12vw,64px); height:auto; display:block }

.cierra-menu{
  width:48px; height:48px; display:grid; place-items:center;
  border:0; background:none; cursor:pointer;
  border-radius:999px; color:var(--menu-texto);
  transition:background-color .3s var(--ease, ease), transform .3s var(--ease-out, ease-out);
}
@media (hover: hover) and (pointer: fine){
  @media (hover:hover){.cierra-menu:hover{ background:var(--menu-realce); transform:rotate(90deg) }}
}
/* LA X TIENE QUE VERSE, Y NO SE VEÍA.
   ----------------------------------------------------------
   El JavaScript del filo añade la clase ".esp" al botón de
   cerrar, y ".esp" trae un blanco fijo (#f5f5f5) porque está
   pensado para fondos oscuros. En la portada eso está bien; en
   las diez páginas de dentro el menú es CLARO, así que la X salía
   blanca sobre blanco: contraste 1,07, es decir, invisible.

   Y el icono medía 0 px de ancho: el <svg> no lleva atributo
   width, así que su tamaño lo tenía que poner el CSS, y la regla
   de ".esp svg" —que carga después— se lo quitaba.

   Las dos reglas de abajo llevan un componente más para ganar sin
   depender del orden de los <link>, que es lo que falló. */
.pantalla-menu .cierra-menu,
.pantalla-menu .cierra-menu.esp{ color:var(--menu-texto) }
.pantalla-menu .cierra-menu svg{ width:20px; height:20px; flex:0 0 auto }

.pantalla-menu__lista{
  flex:1 1 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(.1rem,1.2vh,.6rem);
}
.enlace-menu{
  position:relative; display:block; text-decoration:none;
  font-weight:700; letter-spacing:-.035em; line-height:1.06;
  /* EL TAMAÑO LO MANDA LA ENTRADA MÁS LARGA, NO LA MÁS CORTA.
     ----------------------------------------------------------
     Estaba en clamp(2.1rem, 9vw, 4.6rem). El problema no era el
     9vw sino el SUELO: en un móvil de 360 px, 9vw son 32 px pero
     el suelo de 2,1 rem son 33,6, así que ganaba el suelo y
     "ENTRENA CON TU GENTE" —veinte caracteres— se salía de la
     pantalla. El clamp parecía responsive y en el tramo estrecho
     era un tamaño fijo.

     Ahora el suelo y la pendiente están calculados para que quepa
     la entrada más larga del menú a 360 px, que es la pantalla más
     estrecha que se usa. Las cortas se ven algo menores que antes;
     a cambio ninguna se sale, que es lo que hace que una lista
     parezca una lista. */
  font-size:clamp(1.45rem,6.6vw,4.6rem); text-transform:uppercase;
  /* Y el cinturón, por si algún día se añade una entrada aún más
     larga: se parte en dos líneas equilibradas en vez de
     desbordar, y nunca empuja la página a lo ancho. */
  text-wrap:balance;
  overflow-wrap:anywhere;
  color:var(--menu-suave);
  padding:.1em .2em;
  /* Entran escalonados y desde abajo, como todo lo demás de la
     web: 22 px, que es el mismo recorrido que usan las secciones. */
  opacity:0; transform:translateY(22px);
  transition:color .3s var(--ease, ease),
             opacity .55s var(--ease, ease),
             transform .55s var(--ease-out, ease-out);
}
.pantalla-menu.es-abierto .enlace-menu{ opacity:1; transform:none }
.enlace-menu:focus-visible, .enlace-menu[aria-current="page"]{ color:var(--menu-texto) }
@media (hover:hover){.enlace-menu:hover{ color:var(--menu-texto) }}

/* ==========================================================
   LOS ENLACES DEL MENÚ, COMO LOS DEL PIE
   ----------------------------------------------------------
   Solo cambiaban de color al pasar por encima. Los iconos del pie
   se levantan, crecen y se ladean, y esto es lo mismo: una lista
   de sitios a los que ir. Que dos listas de enlaces de la misma
   web contesten distinto es lo que hace que un sitio se sienta
   cosido a trozos.

   SE APLICA SOLO CON EL MENÚ ABIERTO, y no es un capricho: la
   entrada de estos enlaces usa "transform" —suben 22 px al
   abrirse—, así que un transform de hover puesto a secas pelearía
   con ella y el enlace daría un tirón mientras entra. Colgándolo
   de ".es-abierto" gana en especificidad y solo actúa cuando la
   entrada ya ha terminado.

   El desplazamiento es lateral y no vertical: en una lista
   apilada, levantar un elemento lo mete en el aire del de arriba
   y parece que se solapan. Hacia la derecha hay sitio de sobra. */
@media (hover: hover) and (pointer: fine){
  .pantalla-menu.es-abierto .enlace-menu:hover,
  .pantalla-menu.es-abierto .enlace-menu:focus-visible{
    transform:translateX(10px) scale(1.02);
  }
  .pantalla-menu.es-abierto .pantalla-menu__redes a:hover{
    transform:translateY(-2px) scale(1.06);
    color:var(--menu-texto);
  }
}
.pantalla-menu.es-abierto .enlace-menu:active{ transform:translateX(6px) scale(.99) }
.pantalla-menu__redes a{
  transition:color .3s var(--ease, ease),
             transform .28s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
@media (prefers-reduced-motion: reduce){
  @media (hover:hover){.pantalla-menu.es-abierto .enlace-menu:hover, .pantalla-menu.es-abierto .pantalla-menu__redes a:hover{ transform:none }}
}

.pantalla-menu__pie{
  flex:0 0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
}
.pantalla-menu__ojo{
  margin:0; font-size:.68rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--menu-suave);
}
.pantalla-menu__redes{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(.9rem,4vw,2rem) }
.pantalla-menu__redes a{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--menu-suave);
  /* 44 px de alto mínimo: es el tamaño por debajo del cual un dedo
     falla más de lo que acierta. */
  padding:.6rem .2rem; min-height:44px; display:inline-flex; align-items:center;
  transition:color .3s var(--ease, ease);
}
@media (hover:hover){.pantalla-menu__redes a:hover{ color:var(--menu-texto) }}

@media (prefers-reduced-motion: reduce){
  .enlace-menu{ transform:none; transition:opacity .2s linear, color .2s linear }
  .cierra-menu{ transition:none }
}


/* ==========================================================
   EL BOTÓN QUE ABRE EL MENÚ
   ----------------------------------------------------------
   Era el único elemento pulsable de la web sin respuesta propia:
   la mariposa latía sola, igual estuvieras encima o no, así que el
   movimiento no decía nada — un adorno, no una señal.

   Ahora contesta con lo mismo que dicen los demás botones: al
   acercarte se levanta un poco y gira, y al pulsar se hunde. El
   giro es el mismo gesto que hace la flecha de los botones con
   rodillo, para que sea la misma web hablando.

   El latido se para mientras tienes el ratón encima. Dos
   movimientos a la vez sobre la misma figura se leen como un
   temblor; y el que importa en ese momento es el que responde a
   lo que estás haciendo tú.
   ========================================================== */
/* DOS NOMBRES PARA EL MISMO BOTÓN.
   La portada lo llama ".abre-menu" y las diez páginas de dentro
   ".menu-sticker" con id "menuOpen" — herencia de que cada una
   nació en un sitio. menu-em.js ya lo sabe (busca los dos ids),
   pero el estilo solo conocía uno, así que la interacción se
   quedaba en la portada: el mismo botón con dos comportamientos,
   que es exactamente lo que este fichero existe para evitar.
   ---------------------------------------------------------- */
.abre-menu,
#menuOpen,
.menu-sticker{
  transition:transform .28s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.abre-menu img,
#menuOpen img,
.menu-sticker img{
  transition:transform .38s var(--ease-out, cubic-bezier(.16,1,.3,1)),
             filter .28s ease;
}
@media (hover: hover) and (pointer: fine){
  /* Con el id, y pesa lo mismo que ".abre-menu:hover" — así que ganaba por ir
     después. Un id pesa más que cualquier número de clases, y aquí
     eso no es fuerza bruta: es que el botón del menú tiene que
     poder moverse aunque la barra diga que sus hijos no se mueven. */
  .abre-menu:hover, #abreMenu:hover, #menuOpen:hover, .menu-sticker:hover, no con la clase. ".barra.es-visible > *" pone
     transform:none a todo lo que cuelga de la barra de la portada{ transform:scale(1.1) }
  @media (hover:hover){.abre-menu:hover img, #menuOpen:hover img, .menu-sticker:hover img{
    animation-play-state:paused;
    transform:rotate(-8deg) scale(1.04);
    filter:drop-shadow(0 3px 8px rgba(0,0,0,.28));
  }}
}
.abre-menu:active,
#abreMenu:active,
#menuOpen:active,
.menu-sticker:active{ transform:scale(.94) }
.abre-menu:focus-visible,
#menuOpen:focus-visible,
.menu-sticker:focus-visible{
  outline:2px solid var(--menu-texto, currentColor); outline-offset:4px;
  border-radius:10px;
}
/* Mientras el menú está abierto, el botón se queda "encendido":
   dice dónde estás, no solo qué se puede pulsar. */
body.menu-abierto .abre-menu img,
body.menu-abierto #menuOpen img{
  animation-play-state:paused;
  transform:rotate(-8deg) scale(1.04);
}
@media (prefers-reduced-motion: reduce){
  .abre-menu, .abre-menu img, #menuOpen, #menuOpen img,
  .menu-sticker, .menu-sticker img{ transition:none }
  @media (hover:hover){.abre-menu:hover img, #menuOpen:hover img{ transform:none }}
}