/* Memoria del Agua — Menú general ("Otra forma de recorrer")
 * Se carga DESPUÉS de territorio.css (fuentes, encabezado, cortina y pie).
 * Escritorio: medidas del diseño Menu-General (1920 px). --u = 1 px del diseño.
 */
:root{--m-cel:#00B7D7;--m-cyan:#7FF0FF}
body.menu-general{color:var(--m-cel)}
#menu{background:#fff}

/* Encabezado celeste y barra */
.m-header{background:var(--m-cel);color:var(--m-cyan)}
.m-logo{display:block;width:calc(542 * var(--u));aspect-ratio:542/56;background:var(--m-cyan);
  -webkit-mask:url('./logo-memoria-del-agua.svg') no-repeat center/contain;mask:url('./logo-memoria-del-agua.svg') no-repeat center/contain}
.m-tabs{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;height:calc(70 * var(--u));min-height:40px;padding:0 calc(100 * var(--u)) 0 calc(98 * var(--u));background:var(--m-cyan);color:var(--m-cel);font-size:max(calc(24 * var(--u)),12px);transition:box-shadow .25s ease}
.m-tabs.is-stuck{box-shadow:0 6px 18px rgba(0,94,130,.16)}
.m-tabs-right{display:inline-flex;align-items:center;gap:calc(30 * var(--u))}
.m-sound{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:2px solid var(--m-cel);border-radius:999px;background:transparent;color:var(--m-cel);font:inherit;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.m-sound svg{width:18px;height:18px}
.m-sound[aria-pressed="true"]{background:var(--m-cel);color:var(--m-cyan)}
.m-sound:focus{outline:none}.m-sound:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.m-scroll,.m-map{display:inline-flex;align-items:center;gap:calc(18 * var(--u));text-decoration:none;color:inherit}
.m-scroll svg{width:calc(40 * var(--u));min-width:16px;height:auto}
.m-map{gap:8px;padding:6px 12px;border-radius:999px;background:var(--m-cel);color:var(--m-cyan)}
.m-map svg{width:18px;height:auto}
.m-tabs a:focus{outline:none}
.m-tabs a:focus-visible{outline:2px solid currentColor;outline-offset:-5px}

/* Título */
.m-intro{padding:calc(100 * var(--u)) calc(100 * var(--u)) calc(120 * var(--u))}
.m-kicker{margin:0 0 calc(30 * var(--u));font-size:max(calc(45 * var(--u)),15px);line-height:1}
.m-intro h1{margin:0;font-weight:900;font-size:calc(250 * var(--u));line-height:.84;letter-spacing:-.01em;color:var(--m-cel)}
.m-lead{margin:calc(50 * var(--u)) 0 0;max-width:calc(900 * var(--u));font-size:max(calc(32 * var(--u)),15px);line-height:1.3}

/* Grupos: Territorios / Repositorio / Exposición */
.m-group{display:grid;grid-template-columns:calc(660 * var(--u)) 1fr;margin:0 calc(100 * var(--u));padding:calc(110 * var(--u)) 0 calc(120 * var(--u));border-top:2px solid var(--c);color:var(--c);scroll-margin-top:var(--bar-h,0px)}
.m-group h2{margin:0;font-weight:900;font-size:calc(90 * var(--u));line-height:1;letter-spacing:-.01em}
.m-group ul{list-style:none;margin:calc(-6 * var(--u)) 0 0;padding:0;display:flex;flex-direction:column;gap:calc(48 * var(--u))}
.m-group a{position:relative;display:grid;grid-template-columns:calc(100 * var(--u)) 1fr;row-gap:calc(6 * var(--u));text-decoration:none;color:inherit;max-width:calc(820 * var(--u))}
.m-group a::before{content:"";grid-row:1 / span 3;width:calc(52 * var(--u));min-width:22px;aspect-ratio:1;margin-top:calc(-2 * var(--u));background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='m23 8 12 12-12 12M34 20H5' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='m23 8 12 12-12 12M34 20H5' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform .25s var(--ease)}
.m-group a>*{grid-column:2}
.m-group a span{font-size:max(calc(35 * var(--u)),14px);line-height:1}
.m-group a strong{font-weight:900;font-size:max(calc(35 * var(--u)),15px);line-height:1.2;text-transform:uppercase}
.m-group a em{font-style:normal;font-weight:300;font-size:max(calc(35 * var(--u)),15px);line-height:1.2}
.m-group a:hover strong,.m-group a:focus-visible strong{text-decoration:underline;text-underline-offset:.15em}
.m-group a:hover::before,.m-group a:focus-visible::before{transform:translateX(6px)}
.m-group a:focus{outline:none}
.m-group a:focus-visible{outline:2px solid currentColor;outline-offset:6px;border-radius:4px}
.m-group+.t-footer{margin-top:calc(80 * var(--u))}

/* Celular */
@media (max-width:820px){
  .m-logo{width:calc(210 * var(--m))}
  .m-tabs{height:auto;padding:10px 16px;font-size:12px}
  .m-scroll{gap:6px}.m-scroll svg{width:16px}
  .m-tabs-right{gap:8px}.m-sound{padding:5px 9px}.m-sound-label{display:none}
  .m-map{padding:6px 9px}.m-map span{display:none}.m-map svg{width:20px}
  .m-intro{padding:34px 16px 40px}
  .m-kicker{font-size:15px;margin-bottom:12px}
  .m-intro h1{font-size:calc(62 * var(--m));line-height:.88}
  .m-lead{margin-top:18px;max-width:none;font-size:17px;line-height:1.4}
  .m-group{grid-template-columns:1fr;row-gap:24px;margin:0 16px;padding:32px 0 40px}
  .m-group h2{font-size:34px}
  .m-group ul{gap:22px;margin:0}
  .m-group a{grid-template-columns:36px 1fr;row-gap:3px;max-width:none;padding:2px 0}
  .m-group a::before{width:24px;margin-top:-3px}
  .m-group a span{font-size:13px}
  .m-group a strong,.m-group a em{font-size:16px;line-height:1.25}
}
@media print{.m-tabs{position:static;box-shadow:none}.m-map,.m-sound{display:none}}

/* ---------- Entrada: el celeste que dejó el círculo del mapa se levanta y el índice entra en cascada ---------- */
body.menu-general .t-curtain{background:var(--m-cel);transition:opacity .55s cubic-bezier(.4,0,.2,1) .05s}
.m-reveal{transition:opacity .55s ease var(--d,0ms),transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
body.is-entering .m-reveal{opacity:0;transform:translate3d(0,26px,0);transition:none}
.m-intro h1.m-reveal{transition-duration:.6s,1s}
body.is-entering .m-intro h1.m-reveal{transform:translate3d(0,40px,0) scale(.98)}
.m-group.m-line{background:linear-gradient(var(--c),var(--c)) top left/0% 2px no-repeat;border-top-color:transparent;transition:background-size .9s cubic-bezier(.65,0,.35,1) var(--d,0ms)}
body:not(.is-entering) .m-group.m-line{background-size:100% 2px}
@media (prefers-reduced-motion:reduce){.m-reveal,.m-group.m-line{transition:none!important;opacity:1!important;transform:none!important;background-size:100% 2px!important}}