/* ============================================================================
   MENÚ MÓVIL DE AUTBERRY
   ----------------------------------------------------------------------------
   Este archivo sustituye visualmente al menú móvil antiguo, que vivía duplicado
   en el CSS en línea de la portada y en pricing-brand-shell.css.

   Cómo convive con ellos, a propósito:

   · Los elementos internos usan el prefijo `.mm-*`, que no existe en el CSS
     antiguo. Ninguna regla vieja los alcanza.
   · El panel, la cortina y el botón hamburguesa conservan sus id y clases
     porque el JS existente los necesita, así que aquí se seleccionan por id
     (`#mobile-menu-panel.mm`). Eso gana en especificidad tanto a la portada
     (`.mobile-menu-panel`) como al shell (`.pricing-page .mobile-menu-panel`)
     sin depender del orden de carga de las hojas.
   · El `display` respeta los dos puntos de ruptura que ya existían: la portada
     muestra el menú a 720px y las páginas del shell a 1020px. Unificarlos
     habría cambiado el comportamiento del menú de escritorio.

   Sin dependencias nuevas: la secuencia de apertura son transiciones CSS con
   retardo escalonado, disparadas por la clase `mobile-menu-open` que el JS ya
   pone en el body.
   ========================================================================== */

:root {
  --mm-void: #08070b;
  --mm-void-2: #0b080e;
  --mm-berry: #160c1b;
  --mm-berry-2: #211027;
  --mm-ivory: #f5f2ed;
  --mm-muted: rgba(245, 242, 237, .5);
  --mm-hairline: rgba(245, 242, 237, .1);
  --mm-gold: #d6a94d;
  --mm-ease: cubic-bezier(.16, 1, .3, 1);
  --mm-in: 760ms;
  --mm-out: 460ms;
}

/* ---------- Cortina ---------- */
/* Por encima del topnav fijo, que en el shell premium va a z-index 1001: el
   menú es a pantalla completa y no debe quedar ninguna barra flotando encima. */
#mobile-menu-backdrop.mm {
  position: fixed;
  inset: 0;
  z-index: 1190;
  display: none;
  background: rgba(4, 3, 6, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mm-out) ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* ---------- Panel ---------- */
#mobile-menu-panel.mm {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--mm-void);
  color: var(--mm-ivory);
  transform: none;
  box-shadow: none;
  /* El panel se revela recortándose desde la esquina superior derecha. Solo se
     anima clip-path y opacidad: ninguna de las dos provoca reflow. */
  clip-path: circle(0% at 100% 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    clip-path var(--mm-out) var(--mm-ease),
    opacity 240ms ease,
    visibility 0s linear var(--mm-out);
}

/* La portada colapsa a 720px; el shell premium, a 1020px. */
@media (max-width: 720px) {
  #mobile-menu-backdrop.mm { display: block; }
  #mobile-menu-panel.mm { display: block; }
}

@media (max-width: 1020px) {
  .pricing-page #mobile-menu-backdrop.mm { display: block; }
  .pricing-page #mobile-menu-panel.mm { display: block; }
}

.mobile-menu-open #mobile-menu-panel.mm {
  clip-path: circle(150% at 100% 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    clip-path var(--mm-in) var(--mm-ease),
    opacity 260ms ease,
    visibility 0s;
}

.mobile-menu-open #mobile-menu-backdrop.mm {
  opacity: 1;
  transition: opacity 320ms ease;
}

/* ---------- Atmósfera ----------
   Dos degradados blackberry que respiran muy despacio y la baya como marca de
   agua. Todo detrás del contenido y sin capturar el puntero. */
#mobile-menu-panel.mm::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  background-image:
    radial-gradient(closest-side circle at 78% 12%, var(--mm-berry-2), transparent 100%),
    radial-gradient(closest-side circle at 18% 82%, var(--mm-berry), transparent 100%);
  background-repeat: no-repeat;
  background-size: 62% 52%, 74% 46%;
  opacity: .9;
  pointer-events: none;
  animation: mm-drift 24s ease-in-out infinite alternate;
}

/* Con el id por delante a propósito: el shell antiguo declara
   `.pricing-page .mobile-menu-panel > * { position: relative }`, que ganaba a un
   `.mm-berry` suelto, devolvía la baya al flujo y empujaba todo el menú 343px
   hacia abajo dejando la llamada a la acción fuera de pantalla. */
#mobile-menu-panel.mm .mm-berry {
  position: absolute;
  right: -18%;
  bottom: -14%;
  z-index: 0;
  width: min(88vw, 460px);
  aspect-ratio: 1;
  background: url("/assets/autberry-mark.png") no-repeat center / contain;
  filter: grayscale(1);
  opacity: .05;
  pointer-events: none;
  animation: mm-berry-float 22s ease-in-out infinite alternate;
}

@keyframes mm-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

@keyframes mm-berry-float {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to   { transform: translate3d(-3%, -2.5%, 0) rotate(-5deg) scale(1.06); }
}

/* ---------- Estructura interna ---------- */
#mobile-menu-panel.mm .mm-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding:
    calc(env(safe-area-inset-top, 0px) + 20px)
    clamp(20px, 6vw, 34px)
    calc(env(safe-area-inset-bottom, 0px) + 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Cada fase entra con su propio retardo. Al cerrar, todos los retardos se
   anulan para que la salida sea de una pieza y más rápida que la entrada. */
.mm-head,
.mm-eyebrow,
.mm-link,
.mm-cta,
.mm-foot {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 420ms ease,
    transform 560ms var(--mm-ease);
}

.mobile-menu-open .mm-head,
.mobile-menu-open .mm-eyebrow,
.mobile-menu-open .mm-link,
.mobile-menu-open .mm-cta,
.mobile-menu-open .mm-foot {
  opacity: 1;
  transform: translateY(0);
}

/* Fase 2: cabecera. Fase 3: antetítulo. Fase 4: enlaces escalonados. */
.mobile-menu-open .mm-head { transition-delay: 180ms; }
.mobile-menu-open .mm-eyebrow { transition-delay: 250ms; }
.mobile-menu-open .mm-link:nth-child(1) { transition-delay: 310ms; }
.mobile-menu-open .mm-link:nth-child(2) { transition-delay: 365ms; }
.mobile-menu-open .mm-link:nth-child(3) { transition-delay: 420ms; }
.mobile-menu-open .mm-link:nth-child(4) { transition-delay: 475ms; }
.mobile-menu-open .mm-link:nth-child(5) { transition-delay: 530ms; }
.mobile-menu-open .mm-link:nth-child(6) { transition-delay: 585ms; }
.mobile-menu-open .mm-cta { transition-delay: 650ms; }
.mobile-menu-open .mm-foot { transition-delay: 700ms; }

/* ---------- Cabecera ---------- */
.mm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: clamp(18px, 4vw, 26px);
  border-bottom: 1px solid var(--mm-hairline);
}

.mm-logo {
  width: auto;
  height: clamp(30px, 8vw, 36px);
}

.mm-close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(214, 169, 77, .38);
  border-radius: 50%;
  background: transparent;
  color: var(--mm-ivory);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: scale(.85);
  opacity: 0;
  transition:
    transform 520ms var(--mm-ease),
    opacity 380ms ease,
    border-color 260ms ease,
    background-color 260ms ease;
}

.mobile-menu-open .mm-close {
  transform: scale(1);
  opacity: 1;
  transition-delay: 260ms;
}

.mm-close svg {
  width: 15px;
  height: 15px;
  transition: transform 420ms var(--mm-ease);
}

.mm-close:hover,
.mm-close:focus-visible {
  border-color: rgba(214, 169, 77, .8);
  background: rgba(214, 169, 77, .08);
}

.mm-close:focus-visible {
  outline: 1px solid rgba(214, 169, 77, .55);
  outline-offset: 4px;
}

/* El giro se queda en hover y pulsación, NO en foco: al abrir el menú el foco
   entra aquí por accesibilidad, y con 45º la X se lee como un signo de más. */
.mm-close:hover svg,
.mm-close:active svg { transform: rotate(45deg); }
.mm-close:active { transform: scale(.94); }

/* ---------- Antetítulo ---------- */
.mm-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(24px, 6vw, 34px) 0 clamp(18px, 4.6vw, 26px);
  /* Mismo ámbar que la rayita que lo precede: leído como una sola pieza. */
  color: var(--mm-gold);
  font: 600 9.5px/1 var(--display, Sora, Arial, sans-serif);
  letter-spacing: .3em;
  text-transform: uppercase;
}

.mm-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  flex-shrink: 0;
  background: var(--mm-gold);
}

/* ---------- Enlaces ---------- */
.mm-links {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* `flex: 1 1 auto` es lo que hace que la lista llene la pantalla.
   Sin esto los enlaces se quedaban a su altura natural y todo el espacio
   sobrante se acumulaba en un hueco muerto entre el último enlace y la llamada
   a la acción. Ahora los seis se reparten la holgura a partes iguales, que es
   lo que da el ritmo amplio de la referencia. `min-height` protege la zona
   táctil y deja que se compriman en pantallas bajas. */
.mm-link {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr 22px;
  align-items: center;
  flex: 1 1 auto;
  min-height: 62px;
  column-gap: clamp(10px, 3vw, 16px);
  padding: clamp(12px, 3vw, 18px) 0;
  border-bottom: 1px solid var(--mm-hairline);
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.mm-link:first-child { border-top: 1px solid var(--mm-hairline); }

/* Al crecer los enlaces, `align-self: start` habría despegado el número del
   titular. Se centra con el bloque y se sube lo que ocupa el subtítulo, para
   que quede a la altura del título como en la referencia. */
.mm-index {
  align-self: center;
  transform: translateY(-11px);
  color: var(--mm-gold);
  font: 600 11px/1 var(--display, Sora, Arial, sans-serif);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

.mm-copy {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.mm-copy strong {
  font-family: var(--display, Sora, Arial, sans-serif);
  font-size: clamp(34px, 10.2vw, 48px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
  /* El título se desplaza en la interacción; el origen a la izquierda evita
     que el movimiento se lea como un salto. */
  transform: translateX(0);
  transition: transform 480ms var(--mm-ease);
}

.mm-copy small {
  color: var(--mm-muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .17em;
  line-height: 1.4;
  text-transform: uppercase;
  transition: color 320ms ease;
}

.mm-arrow {
  align-self: center;
  transform: translateY(-11px);
  width: 20px;
  height: 20px;
  color: var(--mm-gold);
  opacity: .55;
  transition: transform 480ms var(--mm-ease), opacity 320ms ease;
}

/* La línea dorada que se abre desde la izquierda. Es el detalle que da carácter
   al menú, así que se anima con scaleX (compositor) y no con width. */
.mm-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--mm-gold), rgba(214, 169, 77, 0));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms var(--mm-ease);
}

.mm-link.is-current::after,
.mm-link:focus-visible::after { transform: scaleX(.82); }

@media (hover: hover) and (pointer: fine) {
  .mm-link:hover::after { transform: scaleX(.82); }
  .mm-link:hover .mm-copy strong { transform: translateX(5px); }
  .mm-link:hover .mm-copy small { color: rgba(245, 242, 237, .78); }
  /* Se conserva el -11px vertical: si solo se pusiera translateX, la flecha
     bajaría de golpe al centro del bloque en cada hover. */
  .mm-link:hover .mm-arrow { opacity: 1; transform: translate(8px, -11px); }
}

/* En táctil el feedback tiene que existir sin depender de :hover. */
.mm-link:active::after { transform: scaleX(.9); }
.mm-link:active .mm-copy strong { transform: translateX(5px); }
.mm-link:active .mm-arrow { opacity: 1; transform: translate(8px, -11px); }
.mm-link:focus-visible {
  outline: 1px solid rgba(214, 169, 77, .55);
  outline-offset: 6px;
}

/* Sección actual: número e ivory a plena luz más la línea dorada. Sin cajas. */
.mm-link.is-current .mm-copy strong { color: var(--mm-ivory); }
.mm-link.is-current .mm-index { color: var(--mm-gold); }
.mm-link.is-current .mm-arrow { opacity: 1; }

/* ---------- Llamada a la acción ---------- */
.mm-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: clamp(20px, 5vw, 30px);
  padding: clamp(16px, 4.2vw, 21px) clamp(18px, 5vw, 26px);
  border: 1px solid rgba(214, 169, 77, .7);
  border-radius: 20px;
  overflow: hidden;
  color: var(--mm-ivory);
  font: 600 11.5px/1 var(--display, Sora, Arial, sans-serif);
  letter-spacing: .19em;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}

/* El relleno dorado barre desde la izquierda. scaleX en lugar de width. */
.mm-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--mm-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 540ms var(--mm-ease);
}

.mm-cta > * { position: relative; z-index: 1; }

.mm-cta svg {
  width: 17px;
  height: 17px;
  color: var(--mm-gold);
  transition: transform 480ms var(--mm-ease), color 300ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .mm-cta:hover::before { transform: scaleX(1); }
  .mm-cta:hover { color: var(--mm-void); }
  .mm-cta:hover svg { color: var(--mm-void); transform: translate(4px, -4px); }
}

.mm-cta:focus-visible::before,
.mm-cta:active::before { transform: scaleX(1); }
.mm-cta:focus-visible,
.mm-cta:active { color: var(--mm-void); }
.mm-cta:focus-visible svg,
.mm-cta:active svg { color: var(--mm-void); transform: translate(4px, -4px); }
.mm-cta:focus-visible { outline: 1px solid rgba(214, 169, 77, .6); outline-offset: 4px; }

/* ---------- Pie ---------- */
.mm-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(16px, 4vw, 24px);
  color: rgba(245, 242, 237, .38);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
}

.mm-foot::before,
.mm-foot::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--mm-hairline);
}

/* ---------- Entrega al cambio de página ----------
   Al pulsar un enlace, el panel deja de ser un menú y pasa a ser la superficie
   que cubre la pantalla durante el salto. El enlace elegido se queda encendido
   un instante —su línea dorada se completa— y el resto del contenido se retira.
   Así el usuario ve confirmado lo que ha tocado antes de que cambie la página. */
#mobile-menu-panel.mm.is-leaving .mm-head,
#mobile-menu-panel.mm.is-leaving .mm-eyebrow,
#mobile-menu-panel.mm.is-leaving .mm-cta,
#mobile-menu-panel.mm.is-leaving .mm-foot,
#mobile-menu-panel.mm.is-leaving .mm-link:not(.is-going) {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 200ms ease, transform 260ms var(--mm-ease);
  transition-delay: 0s;
}

#mobile-menu-panel.mm.is-leaving .mm-link.is-going::after { transform: scaleX(1); }
#mobile-menu-panel.mm.is-leaving .mm-link.is-going .mm-copy strong { transform: translateX(5px); }
#mobile-menu-panel.mm.is-leaving .mm-link.is-going .mm-arrow { opacity: 1; transform: translate(10px, -11px); }
#mobile-menu-panel.mm.is-leaving .mm-link.is-going {
  opacity: 1;
  transition: opacity 260ms ease 180ms;
}

@media (max-height: 640px) {
  #mobile-menu-panel.mm.is-leaving .mm-link.is-going .mm-arrow { transform: translateX(10px); }
}

@media (prefers-reduced-motion: reduce) {
  #mobile-menu-panel.mm.is-leaving .mm-head,
  #mobile-menu-panel.mm.is-leaving .mm-eyebrow,
  #mobile-menu-panel.mm.is-leaving .mm-cta,
  #mobile-menu-panel.mm.is-leaving .mm-foot,
  #mobile-menu-panel.mm.is-leaving .mm-link:not(.is-going) {
    transform: none;
    transition: opacity 100ms ease;
  }
}

/* ---------- Pantallas muy bajas o muy estrechas ----------
   El objetivo es que la llamada a la acción no quede nunca fuera de la vista.
   Primero se recortan holguras; el scroll interno queda como último recurso. */
@media (max-height: 720px) {
  .mm-link { padding-block: clamp(10px, 2.4vw, 14px); }
  .mm-copy strong { font-size: clamp(26px, 7.2vw, 34px); }
  .mm-copy { gap: 5px; }
  .mm-eyebrow { margin-block: 16px 12px; }
}

/* Sin subtítulo no hay nada que compensar: número y flecha vuelven al centro. */
@media (max-height: 640px) {
  .mm-copy small { display: none; }
  .mm-link { padding-block: 10px; min-height: 50px; }
  .mm-copy strong { font-size: 26px; }
  .mm-index,
  .mm-arrow { transform: none; }
  .mm-link:hover .mm-arrow,
  .mm-link:active .mm-arrow { transform: translateX(8px); }
}

@media (max-width: 340px) {
  .mm-link { grid-template-columns: 24px 1fr 18px; }
  .mm-copy strong { font-size: 27px; }
  .mm-cta { letter-spacing: .14em; font-size: 10.5px; }
}

/* ---------- Movimiento reducido ----------
   Se conserva el color y la jerarquía; se retiran recorridos, escalonado y
   animaciones ambientales de ciclo largo. */
@media (prefers-reduced-motion: reduce) {
  #mobile-menu-panel.mm,
  .mobile-menu-open #mobile-menu-panel.mm {
    clip-path: none;
    transition: opacity 160ms ease, visibility 0s;
  }

  #mobile-menu-panel.mm::before,
  #mobile-menu-panel.mm .mm-berry { animation: none; }

  .mm-head,
  .mm-eyebrow,
  .mm-link,
  .mm-cta,
  .mm-foot,
  .mm-close {
    opacity: 1;
    transform: none;
    transition: opacity 160ms ease;
    transition-delay: 0s !important;
  }

  .mobile-menu-open .mm-close { transform: none; }
  .mm-copy strong,
  .mm-arrow,
  .mm-link::after,
  .mm-cta::before,
  .mm-cta svg,
  .mm-close svg { transition: none; }
}