/* ===== EL MENU EN EL CELULAR (2026-08-26) =====================================================
   Por debajo de 1180px la hoja apaga .menu y no lo reemplazaba nada: el sitio se quedaba sin
   navegacion. Esto es su reemplazo. Ver scratchpad/barra-movil.js para el diagnostico. */

/* el boton solo existe donde el menu de escritorio no llega */
.mfm-abrir{display:none;width:44px;height:44px;padding:0;border:0;background:transparent;
  cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.mfm-abrir i{display:block;width:20px;height:1.5px;background:#e3c873;transition:transform .2s,opacity .2s}
.mfm-abrir:hover i{background:#fbf0cd}
@media(max-width:1079px){ .mfm-abrir{display:flex} }

.mfm-velo{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:1400;
  opacity:0;visibility:hidden;transition:opacity .24s,visibility .24s;border:0}
.mfm-velo.abierto{opacity:1;visibility:visible}

.mfm{position:fixed;left:0;top:0;bottom:0;width:min(400px,92vw);z-index:1410;
  background:#04160e;color:#f7f1e7;display:flex;flex-direction:column;
  transform:translateX(-102%);transition:transform .28s ease;
  font-family:'EB Garamond',Georgia,serif;
  border-right:1px solid rgba(227,200,115,.18)}
.mfm.abierto{transform:none}
.mfm *{box-sizing:border-box}

.mfm-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;border-bottom:1px solid rgba(227,200,115,.16);flex:0 0 auto}
.mfm-cab img{height:26px;width:auto;display:block}
.mfm-cerrar{width:40px;height:40px;padding:0;border:1px solid rgba(227,200,115,.28);border-radius:3px;
  background:transparent;color:#e3c873;cursor:pointer;
  font-family:'EB Garamond',Georgia,serif;font-size:22px;line-height:1;
  display:grid;place-items:center;transition:border-color .2s,color .2s}
.mfm-cerrar:hover{border-color:#c7a24a;color:#fbf0cd}

.mfm-cuerpo{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 0 14px}

.mfm-sec{border-bottom:1px solid rgba(227,200,115,.12)}
.mfm-sec>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;background:transparent;border:0;cursor:pointer;text-align:left;
  font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:19px;line-height:1.2;
  color:#f7f1e7;transition:color .2s}
.mfm-sec>button:hover{color:#e3c873}
.mfm-sec>button svg{width:14px;height:14px;flex:0 0 auto;stroke:#c7a24a;stroke-width:1.7;fill:none;
  transition:transform .22s}
.mfm-sec.abierta>button{color:#e3c873}
.mfm-sec.abierta>button svg{transform:rotate(180deg)}

/* el desplegable se mide en grid: max-height a ojo corta la lista larga de Empresas, que tiene
   ocho enlaces, y nadie se entera porque no falla, solo desaparece el ultimo */
.mfm-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease}
.mfm-sec.abierta .mfm-sub{grid-template-rows:1fr}
.mfm-sub>div{overflow:hidden;min-height:0}
.mfm-sub a{display:block;padding:10px 20px 10px 34px;color:rgba(247,241,231,.74);
  font-size:16px;line-height:1.35;text-decoration:none;transition:color .18s,background .18s;
  border-left:1px solid transparent}
.mfm-sub a:hover{color:#f7f1e7;background:rgba(227,200,115,.05);border-left-color:#c7a24a}
.mfm-sub a:last-child{margin-bottom:8px}

.mfm-pie{flex:0 0 auto;padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(227,200,115,.16);display:grid;gap:10px}
.mfm-pie .mfm-cta{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 18px;border-radius:999px;text-decoration:none;
  font-family:'Playfair Display',Georgia,serif;font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  background-image:linear-gradient(168deg,#fbf0cd 0%,#e3c873 22%,#c7a24a 54%,#a8801f 79%,#d8bb72 100%);
  background-color:#c7a24a;color:#17110a;border:1px solid #8a6a24;
  box-shadow:inset 0 1px 0 rgba(255,244,205,.55),inset 0 -1px 0 rgba(78,57,12,.6),0 4px 12px -5px rgba(0,0,0,.8)}
.mfm-pie .mfm-cta b{font-family:'EB Garamond',Georgia,serif;font-variant-numeric:tabular-nums;
  font-weight:600;letter-spacing:0;font-size:14px}
.mfm-pie .mfm-fila{display:flex;gap:10px}
.mfm-pie .mfm-fila a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 12px;border:1px solid rgba(227,200,115,.28);border-radius:3px;
  color:#f7f1e7;text-decoration:none;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .2s,color .2s}
.mfm-pie .mfm-fila a:hover{border-color:#c7a24a;color:#e3c873}

/* con el menu abierto la pagina de atras no se mueve */
html.mfm-quieto,body.mfm-quieto{overflow:hidden;touch-action:none}

@media(prefers-reduced-motion:reduce){
  .mfm,.mfm-velo,.mfm-sub,.mfm-sec>button svg{transition:none}
}

/* ===== LA MARCA, AL CENTRO DE LA PANTALLA (2026-08-27) ========================================
   David: "en el cel y en la web el logo no esta en el medio, deberia estar siempre centrado".
   Medido en ocho anchos antes de tocar nada: se desviaba a la derecha SIEMPRE, entre 79 y 169px.

   PRIMERA CAUSA. .nav repartia sus columnas por CONTENIDO:
   [menu 541px][marca 238px][util 242px]. Si las dos columnas de los lados no miden lo mismo, la
   del medio no cae en el centro. Centrar el texto dentro de la celda no arregla nada: centra el
   texto en una celda que ya esta descentrada. Lo que hay que igualar son los lados.

   SEGUNDA CAUSA, y es la que me tumbo el primer intento. Puse 1fr auto 1fr y a 1920 seguia
   descentrado 100px. "1fr" es en realidad "minmax(auto, 1fr)": la parte "auto" respeta el
   MIN-CONTENT del hijo, asi que el menu, que mide 541px de minimo, se llevo 541 y el otro lado se
   quedo con el resto. Dos columnas 1fr NO son iguales si una tiene contenido mas ancho que su
   reparto. Va minmax(0,1fr), que si obliga a repartir en partes iguales.

   TERCERA. Con los lados iguales, el centro solo cabe si el hueco alcanza. A 1920 el menu crecia
   hasta 541px porque su tipografia va en vw sin tope, y entonces la marca no cabia en el medio sin
   pisarlo. Se le pone techo al menu por encima de 1520px. Y en celular se recorta el grupo de
   iconos: buscar, cuenta y favoritos ya viven dentro del menu, asi que en la barra sobran, y sin
   ellos la marca por fin tiene centro donde caer. */
#hd .nav{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;align-items:center}
/* el menu de escritorio nace en 1280: entre 1181 y 1279 no cabe con la marca centrada */
@media(max-width:1079px){ #hd .menu{display:none !important} }
#hd .nav > .menu,
#hd .nav > .mfm-abrir{grid-column:1;grid-row:1;justify-self:start}
#hd .nav > .marca{grid-column:2;grid-row:1;justify-self:center;text-align:center !important;
  min-width:0;max-width:100%}
#hd .nav > .util{grid-column:3;grid-row:1;justify-self:end}

/* el menu deja de crecer donde ya no cabe: por encima de 1520px su tipografia se congela en el
   mismo tamano que a 1520, que es donde la reja todavia da para centrar la marca */
@media(min-width:1080px){
  /* POR ENCIMA DE 1520 TODO CRECIA CON EL ANCHO Y EL CENTRO SE QUEDABA SIN SITIO. Medido a 1920:
     el espaciado de letra de la marca sube de 2,55 a 3,74px (la marca pasa de 211 a 238) y el hueco
     entre items del menu de 12 a 22px (el menu pasa de 466 a 506). Los dos lados crecen contra la
     misma columna del medio y el menu acaba pisando la marca. Se congelan los tres en el valor que
     tenian a 1520. Y el techo cubre TODO el rango donde ese menu se ve, desde 1181, que es donde la hoja lo
     enciende. Perseguir el breakpoint de a poquitos (1521, luego 1281) me hizo volver tres veces:
     el techo va donde NACE el elemento, no donde se noto el sintoma. a 1520 exactos el menu ingles
     de la tienda (504px) ya pisaba la marca por 30px. Asi la barra tiene una sola geometria en
     todo el escritorio en vez de cambiar dos veces por el camino. */
  #hd .menu>li>a{font-size:11px !important;letter-spacing:.10em !important}
  #hd .menu{gap:10px !important;padding-left:0 !important}
  #hd .marca span{letter-spacing:2.55px !important}
  #hd .nav > .marca{padding-left:14px;padding-right:14px}
}

@media(max-width:1079px){
  /* la hoja de la barra pone text-align:left aqui; con la marca centrada por la reja, sobra */
  #hd .nav > .marca{padding-left:0;padding-right:0}
  /* buscar, cuenta y favoritos se van al menu: en 390px de ancho, cinco iconos a la derecha no
     dejan centro donde poner la marca. Quedan el idioma y el carrito, que es lo que se usa. */
  #hd .util > button[aria-label*="uscar"],
  #hd .util > button[aria-label*="earch"],
  #hd .util > a.iconoBtn,
  #hd .util > button[aria-label*="avorit"]{display:none}
}

/* ------------------------------------------------------------------------------------------
   LA BARRA MIDE LO MISMO EN TODAS LAS PAGINAS, Y AHORA POR SU CUENTA.

   Queja de David: "la barra en las sub paginas esta mas larga que la del home". Medido en las
   70 rutas, eran DOS causas distintas y ninguna estaba en la barra:

   1. EL RESET QUE SOLO EXISTE EN UNA PAGINA. El home trae un reset en linea (* {margin:0}) y
      las subpaginas no. Sin el, el <ul> del menu conserva los 18px de margen que le pone el
      navegador arriba y abajo, y la fila del grid pasa de 49 a 72: la barra engorda 23px sin
      que nadie la toque. Un componente compartido no puede depender del reset de su anfitrion.

   2. EL LOGO SOBRE LA LINEA BASE. .marca era un bloque con un <img> en linea, y un <img> en
      linea se apoya en la linea base: el alto de su caja lo decide el puntal de la fuente
      HEREDADA, no la imagen. /reporte-ejemplo declara su propio cuerpo de 16px y por eso su
      barra salia 8px mas alta en telefono. En columna flex la caja mide por sus hijos y la
      tipografia de la pagina deja de importar.

   El reset va acotado a #hd para no tocar el contenido de nadie. Fijar ademas el cuerpo del
   nav fue de mas y engordo la barra de 78 a 96 en escritorio: el menu visible hereda de ahi.
   ------------------------------------------------------------------------------------------ */
/* La barra tampoco hereda el ESTILO DE ENLACE ni el cuerpo de letra de la pagina. En
   /reporte-ejemplo, que es un facsimil de documento, los enlaces van subrayados y el cuerpo es
   de 16px: al hacer scroll se veia el menu con TIENDA, EL JUEGO, EMPRESAS subrayados y con otro
   interlineado que en el resto del sitio. Nadie toco el menu; el menu esta dentro de una pagina
   que decide como se ven sus enlaces. Se fija aqui, acotado a #hd. */
#hd a{text-decoration:none}
#hd,#hd .nav{font-size:18px;line-height:1.6}
#hd .menu>li>a{line-height:1.5}
#hd .util .lang{line-height:1.5}
/* LA LETRA DEL MENU DEL TELEFONO, A LA ESCALA DE LA CASA. David: "en el explorador de
   Microsoft salen las 3 lineas como en el cel y los subs se ven muy grandes al abrir la lista".
   Medido: el menu de escritorio usa 12px en el primer nivel y 14px en el desplegable; el del
   telefono heredaba 19px y 16px del cuerpo, sin fijar nada. De ahi que la misma pagina se vea
   de dos tamanos segun el ancho de la ventana.
   Y el corte pasa de 1279 a 1079: medido, el menu de escritorio cabe hasta ~1080px con hueco
   positivo a ambos lados. A 1279 estabamos mandando a la hamburguesa a cualquier portatil.
   La letra del telefono queda un punto por encima de la de escritorio, que es correcto: se toca
   con el dedo, no se apunta con un raton. */
/* DOS CORTES PARA LA MISMA DECISION, EN DOS ARCHIVOS. mf-barra.css oculta el menu por debajo de
   1180px y esta hoja mostraba la hamburguesa por debajo de 1079: entre 1080 y 1180 la pagina se
   quedaba SIN NINGUNA navegacion, ni menu ni hamburguesa. Cada piso necesita su techo, y aqui
   el piso y el techo vivian en archivos distintos. Se manda desde aqui, que carga despues. */
@media(min-width:1080px){ #hd .menu{display:flex !important} }
.mfm-sec > button{font-size:13px !important;letter-spacing:.06em !important;
  text-transform:uppercase !important;font-weight:600 !important}
.mfm-sub a{font-size:14px !important;letter-spacing:.01em !important;
  text-transform:none !important;line-height:1.5 !important}
.mfm-cab{font-size:13px}
.mfm{font-size:15px}
#hd ul,#hd ol,#hd li,#hd p,#hd h1,#hd h2,#hd h3,#hd figure{margin:0;padding:0}
#hd ul,#hd ol{list-style:none}
#hd .marca{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
#hd .marca img{display:block}