/* ═══════════════════════════════════════════════════════════════
   Menú superior (v2) — css/menu.css
   Barra fija de marfil casi opaco con filete inferior tenue. Versalitas
   Cormorant espaciadas, monograma pequeño a la izquierda y el botón
   R.S.V.P. con marco a la derecha (referencia 6-IMG_7691.jpg).

   Estructura (21-oct-2026): Nuestra historia · La boda ▾ · Recomendaciones ▾ ·
   ¿Qué visitar? ▾ · R.S.V.P. Cada grupo (.menu__grupo) tiene una cabeza
   (.menu__cabeza: el enlace a la sección + el botón con la flecha) y su
   lista .menu__sub. js/menu.js pone .es-abierto en el grupo abierto.

   Dos maquetaciones:
   · Celular (< 960 px): monograma · «Menú» · R.S.V.P. El panel cae
     debajo de la barra con las cuatro entradas; los tres grupos son un
     acordeón (abierto el de la sección activa).
   · Escritorio (≥ 960 px): todo en una fila; cada grupo es un
     desplegable de papel que se abre al pasar el ratón, con clic o teclado.
     «¿Qué visitar?» añade ancho: a 860 la fila ya no cabe, por eso el
     corte sube a 960 y hasta ahí se queda el botón «Menú».

   Todo lo que oculta algo lleva la clase «js»: sin JavaScript (o en modo
   básico) la barra es estática, con las anclas y los apartados a la vista.
   Solo se animan transform y opacity.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --menu-alto: 58px;
  --menu-corte: 960px;   /* js/menu.js lo lee para su matchMedia: debe coincidir con las @media de abajo */
  --menu-fondo: rgba(246, 242, 234, .96);
  --menu-filete: rgba(205, 191, 158, .62);
}
@media (min-width: 960px) {
  :root { --menu-alto: 66px; }
}

/* ═══════════ La barra ═══════════ */
.menu {
  position: relative;
  z-index: 1150;   /* fuera de main: por encima de las hojitas delanteras (1100); el sobre (1000) ya se retiró cuando la barra aparece */
  width: 100%;
  background: var(--menu-fondo);
  color: var(--tinta);
  font-family: var(--f-serif);
  border-bottom: 1px solid var(--menu-filete);
  box-shadow: 0 14px 30px -26px rgba(43, 43, 40, .35);
}
/* Con la experiencia completa la barra queda fija arriba, respetando la muesca */
.js .menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding-top: env(safe-area-inset-top, 0px);
}
/* Oculta hasta que el sobre se abre; entra deslizándose desde arriba */
.js .menu {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -100%, 0);
  transition:
    transform .9s var(--entrada),
    opacity .55s var(--suave),
    visibility 0s linear .9s;
}
.js .menu.menu--visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    transform .9s var(--entrada),
    opacity .55s var(--suave) .1s,
    visibility 0s;
}
/* Con ?abierta, al recargar o en la demo: se ve de inmediato, sin deslizarse */
.js .menu.menu--inmediata,
.js .menu.menu--inmediata.menu--visible { transition: none; }

.menu__barra {
  display: flex;
  flex-wrap: wrap;   /* sin JavaScript la lista pasa a una segunda fila */
  align-items: center;
  gap: 8px;
  min-height: var(--menu-alto);
  max-width: var(--ancho);
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@supports not (inset: 0) {
  .menu__barra { gap: 0; }
  .menu__barra > * + * { margin-left: 8px; }
}
.js .menu__barra { flex-wrap: nowrap; }

/* ── Monograma: lleva al inicio ── */
.menu__inicio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-left: -6px;
  padding: 0 4px;
  color: var(--olivo-hondo);
  border-radius: 3px;
  transition: color .4s var(--suave), transform .5s var(--suave);
}
.menu__inicio .monograma {
  width: 54px;
  height: 37px;
  --monograma-fondo: #F6F2EA;   /* el fondo de la barra, para el contorno del «&» */
}
@media (hover: hover) {
  .menu__inicio:hover { color: var(--olivo); }
}

/* ── Botón «Menú» (solo celular, solo con JavaScript) ── */
.menu__abrir {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 10px;
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  border-radius: 3px;
}
.menu__abrir[hidden] { display: none; }
.menu__abrir-texto { padding-left: .26em; }   /* compensa el espaciado final */
.menu__abrir-icono {
  display: grid;
  gap: 5px;
  width: 20px;
}
.menu__abrir-icono i {
  display: block;
  height: 1px;
  background: currentColor;
  transform-origin: center;
  transition: transform .45s var(--suave);
}
.menu--abierto .menu__abrir-icono i:first-child { transform: translate3d(0, 3px, 0) rotate(45deg); }
.menu--abierto .menu__abrir-icono i:last-child { transform: translate3d(0, -3px, 0) rotate(-45deg); }

/* ── R.S.V.P.: con marco, siempre a la vista ── */
.menu__rsvp {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 44px;
  margin-left: auto;   /* a la derecha; con el botón «Menú» a la vista, junto a él */
  padding: 0 13px 0 calc(13px + .3em);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--olivo-hondo);
  border: 1px solid var(--olivo);
  border-radius: 2px;
  transition: color .4s var(--suave), background-color .4s var(--suave);
}
.menu__rsvp::after {
  content: '';
  position: absolute;
  top: 3px; right: 3px; bottom: 3px; left: 3px;
  border: 1px solid rgba(107, 112, 66, .35);
  border-radius: 1px;
  pointer-events: none;
  transition: border-color .4s var(--suave);
}
@media (hover: hover) {
  .menu__rsvp:hover { background: var(--olivo); color: var(--marfil-luz); }
  .menu__rsvp:hover::after { border-color: rgba(246, 242, 234, .55); }
}
.menu__rsvp:active { background: var(--olivo-hondo); color: var(--marfil-luz); }
/* Cuando la confirmación es la sección a la vista, el marco se llena */
.menu__rsvp.es-activo,
.menu__rsvp[aria-current] { background: var(--olivo-hondo); color: var(--marfil-luz); }
.menu__rsvp.es-activo::after,
.menu__rsvp[aria-current]::after { border-color: rgba(246, 242, 234, .5); }
.menu__abrir:not([hidden]) ~ .menu__rsvp { margin-left: 4px; }

/* ═══════════ Panel y lista (celular) ═══════════ */
/* Sin JavaScript: segunda fila de la barra, a la vista */
.menu__panel {
  flex: 1 1 100%;
  order: 5;
  padding: 2px 0 10px;
}
/* Con JavaScript: cae por debajo de la barra y se abre con el botón «Menú» */
.js .menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex: none;
  order: 0;
  /* Si la pantalla es baja (teléfono apaisado), el panel se desplaza por dentro */
  max-height: calc(100vh - var(--menu-alto) - env(safe-area-inset-top, 0px));
  max-height: calc(100svh - var(--menu-alto) - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px var(--margen) 18px;
  background: var(--menu-fondo);
  border-bottom: 1px solid var(--menu-filete);
  box-shadow: 0 30px 44px -30px rgba(43, 43, 40, .42);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -12px, 0);
  transition:
    transform .55s var(--entrada),
    opacity .4s var(--suave),
    visibility 0s linear .55s;
}
.js .menu--abierto .menu__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    transform .55s var(--entrada),
    opacity .4s var(--suave),
    visibility 0s;
}
/* Velo tenue sobre la página mientras el panel está abierto (tocarlo cierra) */
.js .menu::before {
  content: '';
  position: fixed;
  top: calc(var(--menu-alto) + env(safe-area-inset-top, 0px)); right: 0; bottom: 0; left: 0;   /* empieza bajo la barra: el velo no la oscurece */
  z-index: -1;
  background: rgba(38, 38, 31, .22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--suave);
}
.js .menu--abierto::before { opacity: 1; pointer-events: auto; }

.menu__lista,
.menu__sub { list-style: none; margin: 0; padding: 0; }

.menu__item + .menu__item { border-top: 1px solid rgba(205, 191, 158, .45); }

.menu__enlace,
.menu__subenlace {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--tinta-suave);
  text-decoration: none;
  cursor: pointer;
  transition: color .35s var(--suave);
}
.menu__enlace {
  flex: 1 1 auto;
  padding: 4px 0 4px 20px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .26em;
  text-transform: uppercase;
}
/* Marca de la sección activa: un rombo pequeño en olivo */
.menu__enlace::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: var(--olivo);
  transform: rotate(45deg) scale(0);
  transition: transform .5s var(--elastica);
}
.menu__enlace.es-activo,
.menu__enlace[aria-current] { color: var(--olivo-hondo); }
.menu__enlace.es-activo::before,
.menu__enlace[aria-current]::before { transform: rotate(45deg) scale(1); }

/* ── Grupos: cabeza (enlace + flecha) y lista de apartados ── */
.menu__grupo { display: block; }
.menu__cabeza {
  display: flex;
  align-items: center;
}
/* Botón de la flecha: solo con JavaScript (el script le quita «hidden»).
   En celular ocupa el borde derecho de la fila, con área táctil de 56 × 48. */
.menu__desplegar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 48px;
  margin-right: -12px;
  padding: 0;
  color: var(--olivo);
  border-radius: 3px;
}
.menu__desplegar[hidden] { display: none; }
.menu__flecha {
  flex: none;
  width: 12px;
  height: 8px;
  color: var(--olivo);
  transition: transform .5s var(--entrada);
}
.menu__grupo.es-abierto .menu__flecha { transform: rotate(180deg); }

/* Con JavaScript los apartados se pliegan; abiertos, entran escalonados.
   La altura no se anima (cambia de golpe): solo transform y opacity. */
.js .menu__sub { display: none; }
.js .menu__grupo.es-abierto .menu__sub { display: block; }
.menu__sub { padding: 0 0 10px; }
.menu__sub li:nth-child(1) { --i: 0; }
.menu__sub li:nth-child(2) { --i: 1; }
.menu__sub li:nth-child(3) { --i: 2; }
.menu__sub li:nth-child(4) { --i: 3; }
.menu__sub li:nth-child(5) { --i: 4; }
.js .menu__grupo.es-abierto .menu__subenlace {
  animation: menu-sub-entrar .5s var(--entrada) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes menu-sub-entrar {
  from { opacity: 0; transform: translate3d(-10px, 0, 0); }
  to { opacity: 1; transform: none; }
}

.menu__subenlace {
  min-height: 44px;
  padding: 2px 0 2px 42px;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .05em;
  color: var(--gris);
}
.menu__subenlace::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--dorado-tenue);
  transition: background-color .35s var(--suave), transform .5s var(--suave);
}
.menu__subenlace.es-activo,
.menu__subenlace[aria-current] { color: var(--olivo-hondo); }
.menu__subenlace.es-activo::before,
.menu__subenlace[aria-current]::before { background: var(--olivo); transform: scaleX(1.5); transform-origin: left; }
@media (hover: hover) {
  .menu__enlace:hover,
  .menu__subenlace:hover { color: var(--olivo); }
  .menu__desplegar:hover { color: var(--olivo-hondo); }
}

/* ═══════════ Escritorio: una sola fila ═══════════ */
@media (min-width: 960px) {
  .menu__barra { gap: 18px; }
  .menu__abrir { display: none !important; }
  .menu__inicio .monograma { width: 62px; height: 42px; }

  .menu__panel,
  .js .menu__panel {
    position: static;
    flex: 1 1 auto;
    order: 0;
    display: flex;
    justify-content: center;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .js .menu::before { display: none; }

  .menu__lista {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.4vw, 40px);
  }
  .menu__item { position: relative; border: 0 !important; }
  /* Filete vertical entre entradas, como en el boceto */
  .menu__item + .menu__item::before {
    content: '';
    position: absolute;
    left: calc(clamp(18px, 2.4vw, 40px) / -2);
    top: 50%;
    width: 1px;
    height: 14px;
    margin-top: -7px;
    background: var(--dorado-tenue);
  }
  @supports not (inset: 0) {
    .menu__lista { gap: 0; }
    .menu__item + .menu__item { margin-left: 30px; }
    .menu__item + .menu__item::before { left: -15px; }
  }

  .menu__enlace {
    flex: none;
    min-height: 44px;
    padding: 0 2px;
    font-size: 13px;
    letter-spacing: .24em;
    white-space: nowrap;
  }
  .menu__enlace::before { display: none; }
  /* Subrayado corto que crece bajo la entrada activa */
  .menu__enlace::after {
    content: '';
    position: absolute;
    left: 2px;
    right: calc(2px + .24em);
    bottom: 7px;
    height: 1px;
    background: var(--olivo);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .55s var(--entrada), opacity .35s var(--suave);
  }
  .menu__enlace.es-activo::after,
  .menu__enlace[aria-current]::after { transform: scaleX(1); }
  @media (hover: hover) {
    .menu__enlace:hover::after { transform: scaleX(1); opacity: .5; }
    .menu__enlace.es-activo:hover::after,
    .menu__enlace[aria-current]:hover::after { opacity: 1; }
  }

  /* La flecha va pegada a la entrada: botón angosto, alto completo */
  .menu__grupo { position: relative; }
  .menu__desplegar {
    min-width: 44px;   /* área táctil completa (tabletas apaisadas abren con la flecha) */
    min-height: 44px;
    margin: 0 -13px 0 -9px;
  }
  .menu__flecha { width: 10px; height: 7px; }

  /* Desplegable de papel bajo la entrada */
  .js .menu__sub,
  .js .menu__grupo.es-abierto .menu__sub {
    position: absolute;
    /* Cuelga por debajo del filete de la barra: la entrada mide 44 px en una barra de 66 */
    top: calc(100% + 18px);
    left: 50%;
    min-width: 196px;
    padding: 10px 0 12px;
    background: var(--marfil-luz);
    border: 1px solid var(--menu-filete);
    border-radius: 2px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .9) inset,
      0 26px 44px -26px rgba(43, 43, 40, .4);
    transform: translate3d(-50%, 0, 0);
    animation: menu-caer .5s var(--entrada) both;
  }
  .js .menu__sub { display: none; }
  .js .menu__grupo.es-abierto .menu__sub { display: block; }
  .js .menu__sub::before {
    content: '';
    position: absolute;
    top: 5px; right: 5px; bottom: 5px; left: 5px;
    border: 1px solid rgba(205, 191, 158, .4);
    border-radius: 1px;
    pointer-events: none;
  }
  /* Puente invisible entre la entrada y el papel, para que el ratón no lo cierre */
  .js .menu__sub::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: -20px;
    height: 20px;
  }
  @keyframes menu-caer {
    from { opacity: 0; transform: translate3d(-50%, -8px, 0); }
    to { opacity: 1; transform: translate3d(-50%, 0, 0); }
  }
  /* En el papel los apartados ya llegan con él: sin entrada escalonada */
  .js .menu__grupo.es-abierto .menu__subenlace { animation: none; }
  .menu__subenlace {
    justify-content: center;
    min-height: 42px;
    padding: 0 26px;
    font-size: 17px;
    white-space: nowrap;
  }
  .menu__subenlace::before { display: none; }
  .menu__subenlace.es-activo,
  .menu__subenlace[aria-current] { color: var(--olivo-hondo); font-weight: 600; }

  /* Sin JavaScript los grupos no se pueden abrir y cerrar con soltura: cada
     entrada muestra sus apartados en línea, debajo de ella */
  html:not(.js) .menu__panel { flex: 1 1 100%; order: 5; padding: 0 0 8px; }
  html:not(.js) .menu__lista { flex-wrap: wrap; align-items: flex-start; justify-content: center; }
  html:not(.js) .menu__item + .menu__item::before { display: none; }
  html:not(.js) .menu__cabeza { justify-content: center; }
  html:not(.js) .menu__sub { display: flex; justify-content: center; padding: 0 0 6px; }
  html:not(.js) .menu__subenlace { min-height: 34px; padding: 0 12px; }
}

/* ═══════════ Espacio para la barra al saltar a una sección ═══════════
   Los apartados con pestañas (#hospedaje, #maquillaje, #donde-comer, #donde-ir,
   #patzcuaro) fijan el suyo en css/recomendaciones.css (menú + barra de pestañas). */
.js #portada,
.js #historia,
.js #boda,
.js #itinerario,
.js #vestimenta,
.js #regalos,
.js #rsvp,
.js #recomendaciones,
.js #que-visitar,
.js #cierre {
  scroll-margin-top: calc(var(--menu-alto) + env(safe-area-inset-top, 0px));
}
/* Tarjetas dentro de #vestimenta: un poco de aire sobre el papel */
.js #dress-code,
.js #valet {
  scroll-margin-top: calc(var(--menu-alto) + env(safe-area-inset-top, 0px) + 24px);
}

/* ═══════════ Modo básico (clase «basico» en html): barra estática ═══════════
   Escrito solo con CSS viejo, como pide css/basico.css. */
.basico .menu {
  position: static;
  background: #F6F2EA;
  color: #2B2B28;
  border-bottom: 1px solid #CDBF9E;
  box-shadow: none;
  padding: 8px 16px 12px;
  text-align: center;
}
.basico .menu__barra { display: block; min-height: 0; max-width: 640px; margin: 0 auto; padding: 0; }
.basico .menu__inicio { display: block; width: 56px; height: 44px; margin: 0 auto; padding: 0; }
.basico .menu__inicio .monograma { width: 56px; height: 38px; margin: 0 auto; }
.basico .menu__abrir, .basico .menu__desplegar { display: none; }
.basico .menu__panel { position: static; display: block; max-height: none; overflow: visible; padding: 0; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; }
/* (también sin JavaScript: misma maqueta compacta) */
.basico .menu__lista, .basico .menu__sub, html:not(.js) .menu__lista, html:not(.js) .menu__sub { display: block; list-style: none; margin: 0; padding: 0; }
.basico .menu__item, html:not(.js) .menu__item { display: block; margin: 0; border: 0; }
.basico .menu__item::before, html:not(.js) .menu__item::before { display: none; }
.basico .menu__grupo, html:not(.js) .menu__grupo { display: block; position: static; }
.basico .menu__cabeza, html:not(.js) .menu__cabeza { display: block; }
.basico .menu__sub li, html:not(.js) .menu__sub li { display: inline-block; margin: 0 6px; }
.basico .menu__enlace, .basico .menu__subenlace, html:not(.js) .menu__enlace, html:not(.js) .menu__subenlace {
  display: inline-block;
  min-height: 44px;
  padding: 12px 6px;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #2B2B28;
  animation: none;
}
.basico .menu__enlace::before, .basico .menu__enlace::after, .basico .menu__subenlace::before, html:not(.js) .menu__enlace::before, html:not(.js) .menu__enlace::after, html:not(.js) .menu__subenlace::before { display: none; }
.basico .menu__flecha, html:not(.js) .menu__flecha { display: none; }
.basico .menu__subenlace, html:not(.js) .menu__subenlace { min-height: 44px; padding: 10px 6px; font-style: italic; font-size: 16px; letter-spacing: .05em; text-transform: none; color: #6E6B63; }
.basico .menu__rsvp, html:not(.js) .menu__rsvp { display: inline-block; min-height: 0; margin-top: 8px; padding: 11px 18px; font-size: 12px; color: #4E5330; border: 1px solid #6B7042; }
.basico .menu__rsvp::after { display: none; }

/* ═══════════ Temas de contraste ═══════════ */
@media (forced-colors: active) {
  .menu { border-bottom: 1px solid CanvasText; }
  .menu__rsvp,
  .menu__desplegar { border: 1px solid ButtonText; }
  .menu__enlace[aria-current],
  .menu__subenlace[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
}