/* ==========================================================================
   MAISON MADRID — SISTEMA DE DISEÑO
   Oxblood es la marca. Fondo casi negro, texto hueso, oxblood como senal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   Cambia un token aqui y cambia toda la web. No escribas hex sueltos.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Neutrales. El negro lleva sesgo rojo para acompanar al oxblood. */
  --mm-ink:        #0A0708;  /* fondo base */
  --mm-ink-2:      #120C0E;  /* superficie elevada */
  --mm-void:       #000000;  /* pozos de profundidad */
  --mm-bone:       #E8E3DB;  /* texto principal: papel, no blanco de pantalla */
  --mm-bone-dim:   #B4AFA7;  /* texto secundario */
  --mm-ash:        #6F6863;  /* metadatos, deshabilitado */
  --mm-line:       rgba(232, 227, 219, .13);
  --mm-line-2:     rgba(232, 227, 219, .28);

  /* Acento de marca.
     --mm-accent para rellenos, bordes y display grande.
     --mm-accent-lift para texto pequeno: #A50F19 sobre casi negro da 2.6:1,
     insuficiente. El tono elevado llega a 4.6:1 y se puede leer. */
  --mm-accent:      #A50F19;
  --mm-accent-lift: #D9484F;
  --mm-accent-deep: #3A0A0E;

  /* Colores del logotipo. El oro esta reservado al logo y a los filetes mas
     finos: la senal de la interfaz sigue siendo el oxblood. El carmesi es el
     de "PRIVATE SOCIETY" y las estrellas, y solo se usa en marcas de marca —
     a 3.4:1 no sirve para texto funcional pequeno, para eso esta el lift. */
  --mm-gold:      #C9A46A;
  /* El dorado EXACTO del logotipo, muestreado del archivo: los trazos de
     MAISON MADRID son un plano #E8BF84, no un degradado (lo que parecia
     degradado en los bordes era el antialias del trazo). Es mas claro que
     --mm-gold, asi que se guarda aparte en lugar de cambiar el dorado de toda
     la interfaz. */
  --mm-gold-logo: #E8BF84;
  --mm-gold-dim:  #8E7342;
  --mm-gold-hi:   #F0DDB2;   /* alta luz del metal */
  --mm-gold-lo:   #5E4A28;   /* sombra del metal */
  --mm-chip:      #120D0E;   /* cuerpo de la ficha */
  --mm-chip-hi:   #221A1B;
  --mm-inlay:     #0C0809;   /* disco central */
  /* 8 puntos de canto. Mismo angulo en cara y canto para que se alineen. */
  --mm-spots: repeating-conic-gradient(from 22.5deg,
    var(--mm-gold) 0deg 19deg, transparent 19deg 45deg);
  --mm-crimson:   #C4213A;

  /* Semanticos. Separados del acento de marca a proposito: un error no es
     un acento, y con oxblood de marca el rojo de error necesita otro tono. */
  --mm-ok:         #4E7C59;
  --mm-warn:       #C08A3E;
  --mm-error:      #D9484F;

  /* Tipografia */
  --mm-serif: "Instrument Serif", 'Iowan Old Style', Georgia, serif;
  /* Solo para el lockup. Ver el comentario del encolado en inc/assets.php:
     esta familia viene subsetada a las letras de MAISON MADRID. */
  --mm-serif-logo: "Bodoni Moda", Didot, 'Times New Roman', serif;
  --mm-sans:  "Archivo", 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mm-mono:  "JetBrains Mono", ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Escala de tipo */
  --mm-d1: clamp(3.4rem, 12.5vw, 10.5rem);
  --mm-d2: clamp(2.5rem, 7.5vw, 6rem);
  --mm-d3: clamp(1.9rem, 4vw, 3.2rem);
  --mm-d4: clamp(1.5rem, 2.6vw, 2.1rem);
  --mm-body: clamp(1rem, .95rem + .25vw, 1.1rem);

  /* Ritmo */
  --mm-gutter: clamp(20px, 5vw, 96px);
  --mm-sec-y:  clamp(5rem, 12vw, 11rem);
  --mm-max:    1560px;

  /* Movimiento */
  --mm-ease: cubic-bezier(.2, .7, .2, 1);
  --mm-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   2. BASE — reescribe lo que Astra pinta por defecto
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body,
body.ast-plain-container,
body .site,
body #page {
  background-color: var(--mm-ink);
  color: var(--mm-bone);
  font-family: var(--mm-sans);
  font-size: var(--mm-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body #content,
body .site-content,
body .ast-container {
  background-color: transparent;
}

/* Titulares: serif editorial, interlineado cerrado */
body h1, body h2, body h3,
body .entry-title,
body .woocommerce-products-header__title,
body .product_title {
  font-family: var(--mm-serif);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.02em;
  color: var(--mm-bone);
  text-wrap: balance;
}

body h1, body .entry-title, body .product_title { font-size: var(--mm-d2); }
body h2 { font-size: var(--mm-d3); }
body h3 { font-size: var(--mm-d4); }

body h4, body h5, body h6 {
  font-family: var(--mm-sans);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.3;
  color: var(--mm-bone);
}

body p { color: var(--mm-bone-dim); max-width: 68ch; }

body a { color: var(--mm-bone); text-decoration-color: var(--mm-line-2); }
body a:hover { color: var(--mm-accent-lift); }

body :focus-visible { outline: 2px solid var(--mm-accent-lift); outline-offset: 3px; }

body hr { border: 0; height: 1px; background: var(--mm-line); }

body img, body video { max-width: 100%; height: auto; display: block; }

/* Numeros siempre tabulares: precios, fechas, cuenta atras */
body .price, body .amount, body time, body .mm-mono {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. UTILIDADES DE MARCA
   -------------------------------------------------------------------------- */

.mm-wrap { max-width: var(--mm-max); margin-inline: auto; padding-inline: var(--mm-gutter); }

.mm-label {
  font-family: var(--mm-sans);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mm-ash);
}
/* Etiqueta en acento. Usa el tono elevado: a .66rem el oxblood puro no se lee. */
.mm-label--accent { color: var(--mm-accent-lift); }

.mm-mono {
  font-family: var(--mm-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--mm-bone-dim);
}

.mm-d1 { font-family: var(--mm-serif); font-weight: 400; font-size: var(--mm-d1); line-height: .86; letter-spacing: -.025em; margin: 0; }
.mm-d2 { font-family: var(--mm-serif); font-weight: 400; font-size: var(--mm-d2); line-height: .9;  letter-spacing: -.02em;  margin: 0; }
.mm-d3 { font-family: var(--mm-serif); font-weight: 400; font-size: var(--mm-d3); line-height: 1;   letter-spacing: -.015em; margin: 0; }
.mm-it { font-style: italic; }

.mm-lede {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
  line-height: 1.5;
  color: var(--mm-bone-dim);
  max-width: 34ch;
  margin: 0;
}

.mm-rule { height: 1px; background: var(--mm-line); border: 0; margin: 0; }

.mm-sec { padding-block: var(--mm-sec-y); }

.mm-sec-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

/* Las siete estrellas de la Comunidad de Madrid: cuatro arriba, tres abajo.
   La disposicion es lo que las hace reconocibles; una fila de siete no lo es. */
.mm-stars {
  display: block;
  height: 1.7em;
  width: auto;
  color: var(--mm-crimson);
  flex: none;
}
.mm-stars--sm { height: 1.3em; }

/* Grano de pelicula sobre toda la pagina */
/* inset:0 y no -50%. El patron es un SVG de 160x160 que se repite, asi que
   cubrir el doble de ancho y el doble de alto solo servia para que el
   compositor moviese cuatro veces el area necesaria en cada scroll. */
.mm-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   4. BOTONES — un solo lenguaje para marca y para WooCommerce
   El selector cubre los botones de Astra y los de Woo a la vez.
   -------------------------------------------------------------------------- */

.mm-btn,
body .ast-button,
body .wp-block-button__link,
body button[type="submit"],
body input[type="submit"],
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  font-family: var(--mm-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
  padding: 1.05rem 1.9rem;
  border: 1px solid var(--mm-accent);
  border-radius: 0;
  background: transparent;
  color: var(--mm-bone);
  text-decoration: none;
  transition: background .3s var(--mm-ease), color .3s var(--mm-ease), border-color .3s;
}

.mm-btn:hover,
body .ast-button:hover,
body .wp-block-button__link:hover,
body button[type="submit"]:hover,
body input[type="submit"]:hover,
body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover,
body .woocommerce .button:hover {
  background: var(--mm-accent);
  color: var(--mm-bone);
  border-color: var(--mm-accent);
}

/* El CTA principal va relleno: comprar es la accion primaria */
.mm-btn--fill,
body .woocommerce button.button.alt,
body .woocommerce a.button.alt,
body .woocommerce input.button.alt,
body .woocommerce .single_add_to_cart_button,
body .woocommerce #place_order {
  background: var(--mm-accent);
  color: var(--mm-bone);
  border-color: var(--mm-accent);
}

.mm-btn--fill:hover,
body .woocommerce button.button.alt:hover,
body .woocommerce a.button.alt:hover,
body .woocommerce input.button.alt:hover,
body .woocommerce .single_add_to_cart_button:hover,
body .woocommerce #place_order:hover {
  background: transparent;
  color: var(--mm-accent-lift);
  border-color: var(--mm-accent-lift);
}

.mm-btn--ghost {
  border-color: var(--mm-line-2);
  color: var(--mm-bone-dim);
}
.mm-btn--ghost:hover {
  background: transparent;
  border-color: var(--mm-bone);
  color: var(--mm-bone);
}

.mm-btn__arrow { font-family: var(--mm-mono); font-size: .8em; }

/* --------------------------------------------------------------------------
   5. CABECERA — logotipo tipo maison, no menu de plantilla
   -------------------------------------------------------------------------- */

body .site-header,
body .ast-primary-header-bar,
body .main-header-bar {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .4s ease, border-color .4s ease, backdrop-filter .4s;
}

body.mm-scrolled .ast-primary-header-bar,
body.mm-scrolled .main-header-bar,
body.mm-scrolled .site-header {
  background-color: rgba(11, 11, 12, .82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--mm-line);
}

body .site-title,
body .site-title a {
  font-family: var(--mm-sans);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--mm-bone);
  line-height: 1.2;
}

body .site-description {
  font-family: var(--mm-mono);
  font-size: .5rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--mm-ash);
}

body .main-header-menu > .menu-item > a,
body .ast-nav-menu > .menu-item > a {
  font-family: var(--mm-sans);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mm-bone-dim);
  transition: color .25s;
}
body .main-header-menu > .menu-item > a:hover,
body .ast-nav-menu > .menu-item > a:hover {
  color: var(--mm-bone);
}

/* Icono de carrito con el mismo lenguaje que el resto */
body .ast-site-header-cart .ast-cart-menu-wrap,
body .ast-header-woo-cart .ast-addon-cart-wrap {
  font-family: var(--mm-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  border: 1px solid var(--mm-accent);
  padding: .55rem .85rem;
  color: var(--mm-bone);
  transition: background .25s, color .25s;
}
body .ast-site-header-cart .ast-cart-menu-wrap:hover,
body .ast-header-woo-cart .ast-addon-cart-wrap:hover {
  background: var(--mm-accent);
  color: var(--mm-bone);
}

/* Menu movil sobre fondo de la casa, no blanco */
body .ast-mobile-popup-drawer .ast-mobile-popup-inner,
body .main-header-bar-navigation .ast-submenu-expanded,
body .ast-desktop .main-header-menu .sub-menu {
  background-color: var(--mm-ink-2);
  border: 1px solid var(--mm-line);
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */

.mm-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: 8rem 0;
  overflow: hidden;
}

/* El lienzo cubre el hero entero, no un cuadrado en el centro.
   Dos razones medidas. Una: era 78vw cuadrado, asi que en el movil median
   292 px dentro de una ventana de 812 y la bola se salia de cuadro antes de
   que el giro llegase a ninguna parte. Dos: los haces nacen del borde de
   ARRIBA del lienzo, asi que confinados a un cuadrado central nacian a media
   pantalla; a pantalla completa entran desde el techo de la sala. */
.mm-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Lo que se ve si no hay WebGL, si el dispositivo es debil, o si el usuario
   pidio menos movimiento. Degradado elegante, no hueco vacio. */
.mm-hero__fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  width: min(92vw, 820px);
  aspect-ratio: 1;
  max-width: 100%;
  z-index: 0;
  border-radius: 50%;
  filter: blur(18px);
  background:
    radial-gradient(circle at 42% 36%, rgba(232,227,219,.16), transparent 48%),
    radial-gradient(circle at 62% 66%, rgba(232,227,219,.06), transparent 58%);
}

.mm-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.mm-hero__coords {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  align-items: center;
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}

.mm-hero__title .mm-line { display: block; overflow: hidden; }

.mm-hero__foot {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: end;
}
@media (min-width: 900px) {
  .mm-hero__foot { grid-template-columns: minmax(0, 1fr) auto; }
}

.mm-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Proxima apertura */
.mm-upnext {
  border-top: 1px solid var(--mm-line-2);
  padding-top: 1rem;
  display: grid;
  gap: .5rem;
  max-width: 46ch;
}
.mm-upnext__row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  align-items: baseline;
}
.mm-upnext__name { font-family: var(--mm-serif); font-size: 1.35rem; line-height: 1.1; }
.mm-countdown { color: var(--mm-accent-lift); letter-spacing: .14em; }
.mm-upnext__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mm-accent-lift);
  animation: mm-pulse 2.6s infinite;
}
@keyframes mm-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(217,72,79,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(217,72,79,0); }
  100% { box-shadow: 0 0 0 0 rgba(217,72,79,0); }
}

/* --------------------------------------------------------------------------
   7. MARQUESINA
   -------------------------------------------------------------------------- */

.mm-marquee {
  border-block: 1px solid var(--mm-line);
  overflow: hidden;
  padding-block: 1.1rem;
  background: var(--mm-ink-2);
}
.mm-marquee__track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  will-change: transform;
}
.mm-marquee__track span {
  font-family: var(--mm-sans);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mm-bone-dim);
  white-space: nowrap;
}
.mm-marquee__track .mm-s { color: var(--mm-accent-lift); }

/* --------------------------------------------------------------------------
   8. MANIFIESTO
   -------------------------------------------------------------------------- */

.mm-manifesto {
  font-family: var(--mm-serif);
  font-size: clamp(1.9rem, 5.6vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  max-width: 24ch;
  margin: 0;
  color: var(--mm-bone);
}
.mm-manifesto .mm-w { display: inline-block; }
.mm-manifesto em { font-style: italic; color: var(--mm-bone-dim); }

.mm-manifesto__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 1000px) {
  .mm-manifesto__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; }
}
.mm-manifesto__side { display: grid; gap: 1.6rem; align-content: end; }
.mm-manifesto__side p { margin: 0; max-width: 38ch; }

/* --------------------------------------------------------------------------
   9. EVENTO DESTACADO
   -------------------------------------------------------------------------- */

.mm-feature {
  background: var(--mm-void);
  border-block: 1px solid var(--mm-line);
  padding-block: clamp(4.5rem, 10vw, 9rem);
  position: relative;
  overflow: hidden;
}
.mm-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(100% 80% at 78% 18%, rgba(165,15,25,.30), transparent 62%);
}
.mm-feature__in { position: relative; z-index: 1; }
.mm-feature__title .mm-it {
  color: var(--mm-accent-lift);
  font-size: .52em;
  display: block;
  margin-top: .2em;
}
.mm-feature__top {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.mm-feature__body {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 1000px) {
  .mm-feature__body { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
}
.mm-feature__copy { display: grid; gap: 1.8rem; align-content: start; }
.mm-feature__copy p { margin: 0; max-width: 44ch; }

/* Ficha de puerta: los datos operativos que de verdad importan al asistente */
.mm-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--mm-line);
  margin: 0;
}
@media (min-width: 620px) {
  .mm-specs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mm-spec {
  padding: 1.2rem 1.2rem 1.4rem 0;
  border-bottom: 1px solid var(--mm-line);
  display: grid;
  gap: .45rem;
  align-content: start;
}
.mm-spec dt {
  font-family: var(--mm-sans);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mm-ash);
}
.mm-spec dd {
  margin: 0;
  font-family: var(--mm-mono);
  font-size: 1rem;
  color: var(--mm-bone);
  font-variant-numeric: tabular-nums;
}

/* Tramos de entrada */
.mm-tiers { display: grid; border: 1px solid var(--mm-line-2); }
.mm-tier {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .3rem 1rem;
  align-items: start;
  padding: 1.15rem 1.3rem;
}
.mm-tier + .mm-tier { border-top: 1px solid var(--mm-line); }
.mm-tier__name { font-size: .94rem; font-weight: 500; color: var(--mm-bone); grid-column: 1; }
.mm-tier__meta {
  grid-column: 1;
  font-family: var(--mm-mono);
  font-size: .64rem;
  letter-spacing: .06em;
  color: var(--mm-ash);
}
/* Escasez real: ultimas unidades del tramo. */
.mm-tier__meta.is-last { color: var(--mm-accent-lift); }

/* Lo que incluye la entrada. Es el argumento que justifica el precio del
   tramo, asi que va con vineta propia y no enterrado en los metadatos. */
.mm-tier__incl {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .15rem;
  font-size: .82rem;
  color: var(--mm-bone-dim);
}
.mm-tier__incl::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mm-accent-lift);
  flex: none;
}

.mm-tier__price {
  grid-row: 1 / span 3;
  grid-column: 2;
  text-align: right;
  font-family: var(--mm-mono);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--mm-bone);
}
.mm-tier__price s { color: var(--mm-ash); font-size: .72em; margin-right: .45em; }
.mm-tier__price { font-size: 1.3rem; }
.mm-tier.is-out { opacity: .42; }
.mm-tier.is-out .mm-tier__price { text-decoration: line-through; }

.mm-tiers__foot {
  padding: 1.3rem;
  border-top: 1px solid var(--mm-line-2);
  display: grid;
  gap: .9rem;
}
.mm-paynote {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .8rem;
  align-items: center;
  margin: 0;
  font-family: var(--mm-mono);
  font-size: .58rem;
  letter-spacing: .08em;
  color: var(--mm-ash);
}

/* Precio de barra y logica de tramos. Va dentro del bloque de entradas,
   porque es parte de lo que el usuario esta decidiendo. */
.mm-barnote {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  margin: 0;
  padding: 1.1rem 1.3rem;
  border-top: 1px solid var(--mm-line);
  font-size: .86rem;
  color: var(--mm-bone-dim);
}
.mm-barnote strong { color: var(--mm-bone); font-weight: 600; }

/* --------------------------------------------------------------------------
   10. INDICE DE EVENTOS — filas editoriales, no tarjetas
   -------------------------------------------------------------------------- */

.mm-ev {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .4rem clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(1.5rem, 3vw, 2.2rem);
  border-top: 1px solid var(--mm-line);
  text-decoration: none;
  transition: padding-left .45s var(--mm-ease);
}
.mm-ev:last-of-type { border-bottom: 1px solid var(--mm-line); }
.mm-ev:hover { padding-left: clamp(.5rem, 1.5vw, 1.4rem); }
.mm-ev__idx { font-family: var(--mm-mono); font-size: .62rem; color: var(--mm-ash); }
.mm-ev__name {
  font-family: var(--mm-serif);
  font-size: clamp(1.7rem, 4.2vw, 3.1rem);
  line-height: 1;
  margin: 0;
  transition: color .35s;
}
.mm-ev:hover .mm-ev__name { color: var(--mm-accent-lift); }
.mm-ev__sub {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.1rem;
  font-family: var(--mm-mono);
  font-size: .64rem;
  letter-spacing: .06em;
  color: var(--mm-ash);
}
.mm-ev__status {
  grid-column: 3;
  grid-row: 1;
  font-family: var(--mm-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--mm-line-2);
  padding: .4rem .6rem;
  white-space: nowrap;
  color: var(--mm-bone-dim);
}
.mm-ev__status.is-hot { border-color: var(--mm-accent); color: var(--mm-accent-lift); }
@media (max-width: 700px) {
  .mm-ev { grid-template-columns: auto 1fr; }
  .mm-ev__status { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: .5rem; }
  .mm-ev__sub { grid-column: 1 / -1; }
}

/* Precio de barra y logica de tramos. Va dentro del bloque de entradas,
   porque es parte de lo que el usuario esta decidiendo. */
.mm-barnote {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  margin: 0;
  padding: 1.1rem 1.3rem;
  border-top: 1px solid var(--mm-line);
  font-size: .86rem;
  color: var(--mm-bone-dim);
}
.mm-barnote strong { color: var(--mm-bone); font-weight: 600; }

/* --------------------------------------------------------------------------
   10. INDICE DE EVENTOS — filas editoriales, no tarjetas
   -------------------------------------------------------------------------- */

.mm-ev {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .4rem clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(1.5rem, 3vw, 2.2rem);
  border-top: 1px solid var(--mm-line);
  text-decoration: none;
  transition: padding-left .45s var(--mm-ease);
}
.mm-ev:last-of-type { border-bottom: 1px solid var(--mm-line); }
.mm-ev:hover { padding-left: clamp(.5rem, 1.5vw, 1.4rem); }
.mm-ev__idx { font-family: var(--mm-mono); font-size: .62rem; color: var(--mm-ash); }
.mm-ev__name {
  font-family: var(--mm-serif);
  font-size: clamp(1.7rem, 4.2vw, 3.1rem);
  line-height: 1;
  margin: 0;
  transition: color .35s;
}
.mm-ev:hover .mm-ev__name { color: var(--mm-accent-lift); }
.mm-ev__sub {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.1rem;
  font-family: var(--mm-mono);
  font-size: .64rem;
  letter-spacing: .06em;
  color: var(--mm-ash);
}
.mm-ev__status {
  grid-column: 3;
  grid-row: 1;
  font-family: var(--mm-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--mm-line-2);
  padding: .4rem .6rem;
  white-space: nowrap;
  color: var(--mm-bone-dim);
}
.mm-ev__status.is-hot { border-color: var(--mm-accent); color: var(--mm-accent-lift); }
@media (max-width: 700px) {
  .mm-ev { grid-template-columns: auto 1fr; }
  .mm-ev__status { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: .5rem; }
  .mm-ev__sub { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   11. FILA DE CONFIANZA — bajo la rejilla de productos
   -------------------------------------------------------------------------- */

.mm-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-top: clamp(2.5rem, 6vw, 4rem);
}
.mm-trust__it { display: grid; gap: .6rem; align-content: start; }
.mm-trust__it h4 { margin: 0; font-size: .95rem; font-weight: 600; }
.mm-trust__it p { margin: 0; font-size: .85rem; color: var(--mm-ash); max-width: 32ch; }

/* --------------------------------------------------------------------------
   12. CIERRE
   -------------------------------------------------------------------------- */

.mm-close {
  text-align: center;
  padding-block: clamp(6rem, 15vw, 12rem);
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  justify-items: center;
  border-top: 1px solid var(--mm-line);
}
.mm-close .mm-d1 { max-width: 16ch; }

/* --------------------------------------------------------------------------
   13. PIE
   -------------------------------------------------------------------------- */

body .site-footer,
body .ast-small-footer,
body .site-below-footer-wrap,
body .site-primary-footer-wrap {
  background-color: var(--mm-ink);
  border-top: 1px solid var(--mm-line);
  color: var(--mm-bone-dim);
}
body .site-footer a { color: var(--mm-bone-dim); }
body .site-footer a:hover { color: var(--mm-bone); }

.mm-foot { border-top: 1px solid var(--mm-line); padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem); }
.mm-foot__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 760px) {
  .mm-foot__grid { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
}
.mm-foot__brand { display: grid; gap: 1.2rem; align-content: start; justify-items: start; }
.mm-foot__wordmark { font-family: var(--mm-serif); font-size: clamp(2.4rem, 7vw, 4.5rem); line-height: .9; margin: 0; }
.mm-foot__col { display: grid; gap: .75rem; align-content: start; }
.mm-foot__col a { font-size: .85rem; color: var(--mm-bone-dim); }
.mm-foot__bar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--mm-line);
  padding-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   14. BARRA DE COMPRA MOVIL
   La mayor parte del trafico llega de Instagram y TikTok. El CTA no se
   pierde nunca de vista, y la conversion no depende de llegar al final.
   -------------------------------------------------------------------------- */

.mm-buybar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 85;
  background: rgba(11, 11, 12, .93);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--mm-line-2);
  padding: .7rem var(--mm-gutter);
  display: none;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.mm-buybar__l { display: grid; gap: .15rem; }
.mm-buybar__n { font-family: var(--mm-serif); font-size: 1rem; line-height: 1; color: var(--mm-bone); }
.mm-buybar .mm-btn { padding: .8rem 1.2rem; font-size: .6rem; }

@media (max-width: 700px) {
  .mm-buybar { display: flex; }
  body.mm-has-buybar { padding-bottom: 4.6rem; }
}

/* --------------------------------------------------------------------------
   15. CURSOR
   -------------------------------------------------------------------------- */

.mm-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9995;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mm-bone);
  pointer-events: none;
  display: none;
  mix-blend-mode: difference;
}

/* --------------------------------------------------------------------------
   16. CORTINA DE ENTRADA
   Solo se muestra si JS la activa. Sin JS la pagina se ve entera.
   -------------------------------------------------------------------------- */

.mm-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--mm-void);
  display: none;
  place-items: center;
}
.mm-curtain__mark {
  font-family: var(--mm-sans);
  font-weight: 500;
  font-size: clamp(.8rem, 2.4vw, 1.05rem);
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--mm-bone);
  padding-left: .5em;
  text-align: center;
}
.mm-curtain__count {
  margin-top: 1.2rem;
  font-family: var(--mm-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--mm-ash);
  text-align: center;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   16b. EL LOGOTIPO
   Archivos reales del pack de marca, en assets/img/, convertidos a WebP con
   canal alfa: 81 KB el lockup completo frente a 354 KB del PNG original.

   Al tener alfa de verdad NO hace falta mix-blend-mode. Se usaba para que el
   negro de la variante de fondo negro desapareciera sobre el fondo del
   sitio; con transparencia real sobra, y es mas robusto (los blend modes
   crean contexto de apilamiento y se pelean con el 3D de alrededor).

   Dos lockups, cada uno en su sitio:
     logo-h  -> tipografico, sin toro. Cabecera: a 34 px de alto el toro
                seria una mancha ilegible.
     logo    -> completo con el toro. Pie, donde hay sitio para que respire.
   ========================================================================== */

.mm-logo-h { display: block; height: 2.6rem; width: auto; }
.mm-logo-full { display: block; width: clamp(11rem, 20vw, 16rem); height: auto; }

/* Astra pinta el logotipo del sitio dentro de .custom-logo-link */
body .site-header .custom-logo-link img,
body .ast-site-identity .custom-logo-link img { max-height: 2.9rem; width: auto; }

/* ==========================================================================
   16c. LA FICHA
   Ficha de poker con los rasgos que la hacen reconocible: cuerpo grueso,
   PUNTOS DE CANTO alternos, anillo de bloques radiales, surcos concentricos
   e inlay central. Cara: el toro del logo en relieve acuñado. Reverso: las
   siete estrellas y el nombre.

   Los puntos de la cara y los del canto usan el MISMO angulo de partida
   (--spots), asi que al girar quedan alineados y la ficha se lee como una
   pieza solida en vez de dos caras sueltas.

   El grosor, el apilado en Z y los tres detalles que lo hacen posible
   estan documentados en assets/js/chip.js.
   ========================================================================== */
.mm-chip{--size:clamp(190px,50vw,340px);width:var(--size);aspect-ratio:1;perspective:1250px;
  perspective-origin:50% 44%;cursor:grab;outline:none}
.mm-chip.is-grabbed{cursor:grabbing}
.mm-chip:focus-visible{outline:2px solid var(--mm-gold);outline-offset:16px;border-radius:50%}
.mm-chip__spin{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.mm-chip__face,.mm-chip__body,.mm-chip__ply{position:absolute;inset:0;border-radius:50%}
.mm-chip__body{transform-style:preserve-3d}

/* --- CANTO: los mismos puntos que la cara, para que se alineen al girar --- */
.mm-chip__ply{
  opacity:calc(var(--o,1) * var(--plies,1));
  background-color:var(--mm-chip);
  background-image:var(--mm-spots);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
}

/* La pared del cilindro: rellena el perfil, donde la pila de discos no
   llega. Ancho = el grosor; alto = el diametro. Al girar 90 grados sobre Y
   queda perpendicular a las caras, asi que se ve entera justo cuando la
   ficha esta de canto. Las dos lineas doradas de los lados son los bordes
   de las dos caras vistos desde el perfil. */
.mm-chip__rim{
  position:absolute;top:0;left:50%;height:100%;
  width:var(--thick,34px);margin-left:calc(var(--thick,34px) / -2);
  border-radius:0;
  transform:rotateY(90deg);
  background-image:
  /* El sombreado del cilindro va ARRIBA, no debajo: si los puntos se
     pintan encima salen planos y tapan la curvatura, y el canto lee
     como una cinta a rayas en vez de como un canto. */
  linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.25) 18%,
    rgba(240,221,178,.13) 38%, rgba(0,0,0,.3) 66%, rgba(0,0,0,.92) 100%),
  /* Los 4 puntos del lado cercano, en su posicion proyectada: el centro de
     cada uno es el coseno de su angulo (22.5, 67.5, 112.5 y 157.5 grados) y
     su alto se achata con el seno. Por eso los de los extremos son finos y
     los centrales anchos, como en un canto real visto de perfil. */
  linear-gradient(to bottom,
    transparent 0 0.6%, var(--mm-gold-lo) 0.6% 7%, transparent 7% 23.2%,
    var(--mm-gold-lo) 23.2% 38.5%, transparent 38.5% 61.5%,
    var(--mm-gold-lo) 61.5% 76.8%, transparent 76.8% 93%,
    var(--mm-gold-lo) 93% 99.4%, transparent 99.4% 100%),
  linear-gradient(90deg,
    #060405 0%, var(--mm-chip-hi) 38%, var(--mm-chip) 62%, #060405 100%);
  box-shadow:inset 2px 0 0 var(--mm-gold-lo), inset -2px 0 0 var(--mm-gold-lo);
  opacity:var(--rim,0);
  pointer-events:none;
}

/* --- CARAS --- */
.mm-chip__face{
  display:grid;place-items:center;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:radial-gradient(circle at 38% 30%,var(--mm-chip-hi),var(--mm-chip) 58%,#0A0708 100%);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(240,221,178,.10),
    inset 0 0 26px rgba(0,0,0,.6);
}
.mm-chip__face--a{transform:translateZ(17px)}
.mm-chip__face--b{transform:rotateY(180deg) translateZ(17px)}

/* Bloques radiales: son los puntos del canto asomando en la cara. */
.mm-chip__spots{
  position:absolute;inset:2.5%;border-radius:50%;
  background-image:var(--mm-spots);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55);
}
/* Surcos concentricos: la textura fina de una ficha real. */
.mm-chip__grooves{
  position:absolute;inset:13.5%;border-radius:50%;
  background-color:var(--mm-chip);
  background-image:repeating-radial-gradient(circle at 50% 50%,
    rgba(201,164,106,.26) 0 1px, transparent 1px 3px);
  box-shadow:inset 0 0 0 1px rgba(201,164,106,.35), 0 0 0 1px rgba(0,0,0,.6);
}
/* Inlay: el disco central liso donde va el motivo. */
.mm-chip__inlay{
  position:absolute;inset:23%;border-radius:50%;
  background:radial-gradient(circle at 40% 32%,#17100F,var(--mm-inlay) 70%,#070506 100%);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9), 0 0 0 1px rgba(201,164,106,.45);
  display:grid;place-items:center;overflow:hidden;
}

/* --- Relieve --- */
.mm-relief{filter:drop-shadow(-0.6px -0.8px 0.4px rgba(240,221,178,.8))
              drop-shadow(1px 1.4px 1.2px rgba(0,0,0,.85))}
.mm-chip__bull{width:80%}
.mm-chip__bull img{width:100%;display:block;
  filter:sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(1.06) contrast(1.22)}

.mm-chip__back{display:grid;gap:calc(var(--size)*.03);justify-items:center;text-align:center;line-height:1}
/* Las estrellas mandan en el reverso. En rojo claro y no en el carmin de
   marca: a este tamano una estrella mide pocos pixeles y necesita el
   contraste, que es justo para lo que existe --mm-accent-lift. */
.mm-chip__stars{width:72%;height:auto;color:var(--mm-accent-lift)}
/* El nombre en el reverso de la ficha, igual que el logotipo: mayusculas,
   Didone y el dorado muestreado del archivo. En caja de titulo y con
   Instrument Serif no se parecia a la marca. El text-indent compensa el
   tracking que arrastra el ultimo caracter, para que quede centrado de
   verdad; surte efecto porque el padre es un grid y el span se convierte en
   bloque. Medido en la pagina: ocupa el 66 % del disco central. */
.mm-chip__word{
  font-family:var(--mm-serif-logo);
  font-weight:500;
  text-transform:uppercase;
  color:var(--mm-gold-logo);
  font-size:calc(var(--size)*.076);
  letter-spacing:.1em;
  text-indent:.1em;
  line-height:1.18}

/* --- Sombra y brillo --- */
.mm-chip__shade{position:absolute;inset:0;border-radius:50%;background:#000;z-index:6;pointer-events:none}
.mm-chip__face--a .mm-chip__shade{opacity:var(--shade-front,0)}
.mm-chip__face--b .mm-chip__shade{opacity:var(--shade-back,0)}
.mm-chip__gloss{position:absolute;inset:0;border-radius:50%;z-index:7;pointer-events:none;
  background-image:linear-gradient(100deg,transparent 30%,
    rgba(255,248,225,.05) 44%, rgba(255,248,225,.16) 50%, rgba(255,248,225,.05) 56%, transparent 70%);
  background-size:250% 100%;background-position:var(--sheen,50%) 0}

/* ==========================================================================
   17. CAPA DE IDENTIDAD
   Lo que separa "tipografia bonita" de una marca son dispositivos propios
   que se repiten. Aqui son cuatro, y todos salen de lo que Maison hace de
   verdad (vender entradas y moverse por la ciudad), no de adorno.
   ========================================================================== */


/* --- Marco de pagina con marcas de esquina y railes verticales.
   Lee como cartel o passe-partout: dice "esto esta disenado" al instante.
   Solo en pantallas anchas: por debajo no hay margen donde vivir. --- */
.mm-frame {
  position: fixed;
  inset: 14px;
  z-index: 88;
  pointer-events: none;
  border: 1px solid var(--mm-line);
  display: none;
}
.mm-frame__c { position: absolute; width: 11px; height: 11px; color: var(--mm-gold-dim); }
.mm-frame__c::before,
.mm-frame__c::after { content: ""; position: absolute; background: currentColor; }
.mm-frame__c::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.mm-frame__c::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }
.mm-frame__c--tl { left: -6px; top: -6px; }
.mm-frame__c--tr { right: -6px; top: -6px; }
.mm-frame__c--bl { left: -6px; bottom: -6px; }
.mm-frame__c--br { right: -6px; bottom: -6px; }

.mm-frame__code {
  position: absolute;
  top: 50%;
  writing-mode: vertical-rl;
  font-family: var(--mm-mono);
  font-size: .54rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--mm-ash);
  white-space: nowrap;
}
.mm-frame__code--l { left: 7px; transform: translateY(-50%) rotate(180deg); }
.mm-frame__code--r { right: 7px; transform: translateY(-50%); }

@media (min-width: 1180px) {
  .mm-frame { display: block; }
  body { padding-inline: 22px; }
}

/* --- Troquelado. El bloque de entradas se lee como una entrada de verdad:
   linea de corte y dos muescas. --- */
.mm-tiers { position: relative; }
.mm-tiers__foot { position: relative; border-top: 1px dashed var(--mm-line-2); }
.mm-tiers__foot::before,
.mm-tiers__foot::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--mm-void);
}
.mm-tiers__foot::before { left: -9px; }
.mm-tiers__foot::after { right: -9px; }

/* --- Regla de marca: divisor con el sello en el centro --- */
.mm-brandrule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}
.mm-brandrule::before,
.mm-brandrule::after { content: ""; height: 1px; background: var(--mm-gold-dim); opacity: .55; }

/* El sello del logotipo, junto al nombre en la cabecera de Astra */
body .site-title a { display: flex; align-items: center; gap: .8rem; }

/* --- Codigo de catalogo por evento. La marca como archivo numerado. --- */
.mm-ev__idx { white-space: nowrap; }

/* ==========================================================================
   FONDO DE FIESTA DEL CIERRE
   Luces de club desenfocadas, generadas con degradados. Es un marcador de
   posicion honesto hasta que haya fotografia propia: cuando la tengas,
   pon la imagen en .mm-close__bg con background-image y borra los degradados.
   El tinte de .mm-close__tint es lo que mantiene el texto legible encima.
   ========================================================================== */

.mm-close__bg{
  position:absolute;inset:-8%;z-index:0;pointer-events:none;
  filter:blur(22px) saturate(1.15);
  opacity:.8;
  background-color:var(--mm-void);
  background-repeat:no-repeat;
  background-image:
    radial-gradient(circle at 11% 26%, rgba(217,72,79,.75) 0, transparent 9%),
    radial-gradient(circle at 24% 62%, rgba(165,15,25,.70) 0, transparent 7%),
    radial-gradient(circle at 38% 18%, rgba(232,227,219,.30) 0, transparent 5%),
    radial-gradient(circle at 47% 74%, rgba(217,72,79,.55) 0, transparent 8%),
    radial-gradient(circle at 58% 34%, rgba(165,15,25,.80) 0, transparent 10%),
    radial-gradient(circle at 69% 66%, rgba(232,227,219,.22) 0, transparent 6%),
    radial-gradient(circle at 78% 22%, rgba(217,72,79,.62) 0, transparent 8%),
    radial-gradient(circle at 88% 58%, rgba(165,15,25,.66) 0, transparent 9%),
    radial-gradient(circle at 17% 84%, rgba(165,15,25,.50) 0, transparent 7%),
    radial-gradient(circle at 63% 90%, rgba(217,72,79,.44) 0, transparent 6%),
    radial-gradient(circle at 93% 84%, rgba(232,227,219,.18) 0, transparent 5%),
    radial-gradient(circle at 5% 52%, rgba(217,72,79,.40) 0, transparent 6%),
    radial-gradient(ellipse 120% 70% at 50% 100%, rgba(165,15,25,.45) 0, transparent 70%);
  animation:lights 26s ease-in-out infinite alternate;
}
@keyframes lights{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.10) translate3d(-1.5%,-1.5%,0)}
}

/* Tinte: sin el, el titular no se lee sobre las luces. */
.mm-close__tint{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 78% 58% at 50% 52%, rgba(10,7,8,.62) 0, rgba(10,7,8,.80) 58%, rgba(10,7,8,.95) 100%),
    linear-gradient(var(--mm-ink), transparent 22%, transparent 78%, var(--mm-ink));
}
.mm-close--lit > *:not(.mm-close__bg):not(.mm-close__tint){position:relative;z-index:2}

/* ==========================================================================
   INTERACCIONES
   Cuatro gestos, todos con degradacion limpia: sin JS o con movimiento
   reducido la web queda exactamente igual de usable.
   ========================================================================== */

/* --- Boton magnetico: se inclina hacia el cursor. El desplazamiento lo
   pone el JS en --mx/--my; el CSS solo lo aplica. --- */
.mm-btn{
  transform:translate3d(var(--mx,0),var(--my,0),0);
  transition:background .3s cubic-bezier(.2,.7,.2,1),color .3s,border-color .3s,
             transform .45s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.mm-btn.is-near{transition-duration:.3s,.3s,.3s,.12s}

/* --- Foco de proximidad: una luz sigue al cursor dentro del bloque. Es lo
   que hace que la superficie se sienta fisica. --- */
.mm-card,.mm-tier,.mm-ev,body .woocommerce ul.products li.product{position:relative;isolation:isolate}
.mm-card::before,.mm-tier::before,body .woocommerce ul.products li.product::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .4s ease;
  background:radial-gradient(18rem circle at var(--px,50%) var(--py,50%),
             rgba(217,72,79,.13), transparent 62%);
}
.mm-card.is-near::before,.mm-tier.is-near::before,body .woocommerce ul.products li.product.is-near::before{opacity:1}

/* --- Revelado con mascara: la linea se descubre de abajo arriba en vez de
   aparecer con un fundido. Es mas caro de escribir y mucho mas premium. --- */
.mm-reveal-line{display:block;overflow:hidden}

/* --- Progreso de scroll en el rail izquierdo del marco --- */
.mm-frame__prog{
  position:absolute;left:-1px;top:0;width:1px;
  height:var(--prog,0%);
  background:linear-gradient(var(--mm-accent),var(--mm-accent-lift));
  transition:height .1s linear;
}

/* ==========================================================================
   MOMENTOS 3D
   Cuatro, y cada uno esta anclado a un objeto real: la entrada, el sello,
   el producto. Nada de efecto suelto.

   Todos con transformaciones CSS 3D y no con un segundo contexto WebGL:
   van compositadas por GPU, no anaden libreria, funcionan en movil y si el
   navegador las ignora la web queda identica. Un shader mas habria costado
   memoria de video para conseguir menos.
   ========================================================================== */

/* --- Escenario compartido. La perspectiva vive en el padre; el hijo gira. --- */
.mm-scene3d{perspective:1150px;perspective-origin:50% 50%}
.mm-tilt{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
/* Mientras el cursor esta dentro la respuesta es inmediata; al salir vuelve
   con la curva larga. Esa asimetria es la que se siente "fisica". */
.mm-tilt.is-live{transition-duration:.1s}

/* --- 1. LA ENTRADA. El bloque de tramos se inclina como si lo tuvieras en
   la mano, y un brillo barre la superficie siguiendo al cursor. --- */
.mm-tiers::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:0;transition:opacity .45s ease;
  background-image:linear-gradient(104deg,
    transparent 36%,
    rgba(232,227,219,.05) 46%,
    rgba(232,227,219,.14) 50%,
    rgba(232,227,219,.05) 54%,
    transparent 64%);
  background-size:280% 100%;
  background-position:var(--sheen,50%) 0;
}
.mm-tiers.is-live::after{opacity:1}
/* Los tramos flotan por delante del papel: da grosor a la entrada. */
.mm-tiers.is-live .mm-tier__price{transform:translateZ(26px)}
.mm-tiers.is-live .mm-tier__name{transform:translateZ(14px)}
.mm-tier__price,.mm-tier__name{transition:transform .5s cubic-bezier(.16,1,.3,1)}


/* --- 3. PRODUCTO. La tarjeta se inclina y el nombre y el precio se separan
   del fondo: profundidad real, no una sombra. --- */
.mm-card{transform-style:preserve-3d}
.mm-card.is-live .mm-card__name{transform:translateZ(30px)}
.mm-card.is-live .mm-card__price{transform:translateZ(20px)}
.mm-card.is-live .mm-card__tag{transform:translateZ(38px)}
.mm-card__name,.mm-card__price,.mm-card__tag{transition:transform .55s cubic-bezier(.16,1,.3,1)}

/* --- 4. FICHA DE PUERTA. Los cuatro datos entran girando sobre su borde
   inferior, como fichas que caen en su sitio. El estado inicial lo pone
   GSAP, no el CSS: sin JS se ven desde el principio. --- */
.mm-spec{transform-origin:50% 100%}

@media(max-width:760px){
  /* En tactil no hay cursor que seguir: el 3D del cursor se apaga.
     OJO: la ficha (.mm-chip__spin) NO debe entrar aqui. Su giro lo manda el
     scroll, y el scroll existe en tactil; apagarla dejaria la ficha plana
     justo en el movil, que es por donde llega casi todo el trafico. */
  .mm-scene3d{perspective:none}
  .mm-tilt{transform:none !important}
}

/* La rejilla de WooCommerce hereda el mismo gesto: la rejilla es el
   escenario y cada producto la pieza que se inclina. */
body .woocommerce ul.products{perspective:1150px;perspective-origin:50% 50%}
body .woocommerce ul.products li.product{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:background .35s var(--mm-ease),
             transform .75s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
body .woocommerce ul.products li.product.is-live{transition-duration:.35s,.1s}
body .woocommerce ul.products li.product.is-live .woocommerce-loop-product__title{transform:translateZ(30px)}
body .woocommerce ul.products li.product.is-live .price{transform:translateZ(20px)}
body .woocommerce ul.products li.product.is-live span.onsale{transform:translateZ(38px)}
body .woocommerce ul.products li.product .woocommerce-loop-product__title,
body .woocommerce ul.products li.product .price,
body .woocommerce ul.products li.product span.onsale{
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
@media(max-width:760px){
  body .woocommerce ul.products{perspective:none}
  body .woocommerce ul.products li.product{transform:none !important}
}

/* --------------------------------------------------------------------------
   20. ACCESIBILIDAD Y MOVIMIENTO REDUCIDO
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .mm-marquee__track { transform: none !important; }
  .mm-close__bg { animation: none; }
  .mm-btn { transform: none !important; }
  .mm-tilt, .mm-chip__spin,
  body .woocommerce ul.products li.product { transform: none !important; }
}

.mm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   20. ENCAJE DENTRO DE ASTRA
   ========================================================================== */

/* main es un hijo flex de .ast-container, y un hijo flex tiene min-width:auto
   por defecto: no puede encoger por debajo del ancho minimo de su contenido.
   La marquesina lleva un carril con width:max-content, asi que inflaba main
   hasta 2583 px en una ventana de 1600 y se llevaba por delante el hero, la
   bola y el titular. Es el blowout clasico de flexbox; medido en produccion
   antes y despues. */
body .mm-front { min-width: 0; }

/* Y el contenedor de Astra deja de apretar la portada: sus 1240 px cortaban
   el hero. Las secciones de dentro ya se acotan solas con .mm-wrap, igual
   que en el prototipo. */
body.home .ast-container,
body .ast-container:has(> .mm-front) {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
   21. LA CABECERA
   Sustituye a la de Astra. Va dentro de #masthead, asi que el
   posicionamiento (y el sticky, si lo activas en el personalizador) lo
   sigue poniendo Astra: aqui solo va el aspecto.
   ========================================================================== */

body #masthead { background: transparent; border: 0; }

.mm-nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(.85rem, 2vw, 1.3rem);
}

.mm-nav__brand { display: flex; align-items: center; flex: none; }
.mm-nav__brand img { display: block; height: 2.4rem; width: auto; }

.mm-nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.2rem); }

.mm-nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mm-nav__menu li { margin: 0; }
.mm-nav__menu a {
  font-family: var(--mm-sans);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mm-bone-dim);
  transition: color .25s var(--mm-ease);
  white-space: nowrap;
}
.mm-nav__menu a:hover,
.mm-nav__menu .current-menu-item > a { color: var(--mm-accent-lift); }

/* El boton de compra de la cabecera. white-space:nowrap porque "Entradas (0)"
   partia en dos lineas a 375 px y deformaba la pastilla. */
.mm-nav__cart {
  font-family: var(--mm-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  border: 1px solid var(--mm-accent);
  padding: .55rem .85rem;
  color: var(--mm-bone);
  white-space: nowrap;
  transition: background .25s var(--mm-ease), color .25s var(--mm-ease);
}
.mm-nav__cart:hover { background: var(--mm-accent); color: var(--mm-bone); }

/* --- Movil: el menu se guarda tras un boton --- */
.mm-nav__burger {
  display: none;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 1px solid var(--mm-line);
  cursor: pointer;
}
.mm-nav__burger span {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--mm-bone);
  transition: transform .3s var(--mm-ease), opacity .3s var(--mm-ease);
}
.mm-nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.mm-nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 860px) {
  .mm-nav__burger { display: flex; }

  .mm-nav__links {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
    padding: 1.6rem var(--mm-gutter) 2rem;
    background: rgba(10, 7, 8, .97);
    border-bottom: 1px solid var(--mm-line);
    /* Oculto de verdad para lectores de pantalla y para el tabulador, no
       solo invisible: un menu cerrado no debe ser enfocable. */
    display: none;
  }
  .mm-nav__links.is-open { display: flex; }

  .mm-nav__menu { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .mm-nav__menu a { font-size: .8rem; }
  .mm-nav__in { position: relative; }
}

/* ==========================================================================
   22. EL PIE
   Los estilos base ya estaban; esto es solo lo que faltaba del marcado real.
   ========================================================================== */

.mm-foot__col .mm-nav__menu,
.mm-foot__col .mm-foot__legal {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mm-foot__col .mm-nav__menu a,
.mm-foot__col .mm-foot__legal a {
  font-size: .85rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mm-bone-dim);
}
.mm-foot__col .mm-nav__menu a:hover,
.mm-foot__col .mm-foot__legal a:hover { color: var(--mm-accent-lift); }

.mm-foot__mail {
  font-family: var(--mm-mono);
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--mm-accent-lift);
}
.mm-foot__bar p { margin: 0; }

/* ==========================================================================
   23. ICONOGRAFIA
   Trazo de 1.25 y color de interfaz, no oro: el oro sigue reservado al
   logotipo y a los filetes. Tamano contenido a proposito — son apoyo de
   lectura, no ilustracion.
   ========================================================================== */

.mm-ico { width: 1.6rem; height: 1.6rem; display: block; flex: none; }

.mm-trust__it .mm-ico {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--mm-accent-lift);
  margin-bottom: .2rem;
}

/* ==========================================================================
   24. PIE: NAVEGACION, INSTAGRAM Y AVISO DE EDAD
   ========================================================================== */

.mm-foot__list {
  display: grid;
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mm-foot__list li { margin: 0; }
.mm-foot__list a {
  font-size: .85rem;
  color: var(--mm-bone-dim);
  transition: color .25s var(--mm-ease);
}
.mm-foot__list a:hover { color: var(--mm-accent-lift); }

/* Instagram: el icono acompana al texto, no lo sustituye. Un icono suelto
   obliga a adivinar; con la palabra al lado no hay nada que adivinar. */
.mm-foot__social {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  color: var(--mm-bone-dim);
  transition: color .25s var(--mm-ease);
}
.mm-foot__social:hover { color: var(--mm-accent-lift); }
.mm-foot__social .mm-ico { width: 1.15rem; height: 1.15rem; }

.mm-foot__age {
  font-family: var(--mm-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mm-ash);
  margin-top: .3rem;
}

/* ==========================================================================
   25. REJILLAS CENTRADAS
   Con tres elementos y sitio para cuatro, las pistas 1fr los estiraban o
   los dejaban pegados a la izquierda con un hueco muerto a la derecha. Se
   les da un ancho maximo y se centra el conjunto: tres tarjetas centradas
   leen como una decision, tres pegadas a un lado leen como un error.
   ========================================================================== */

body .woocommerce ul.products,
body .woocommerce-page ul.products,
body .mm-front ul.products {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 21rem));
  justify-content: center;
}

/* WooCommerce y Astra reparten anchos en porcentaje pensando en floats.
   Dentro de una rejilla eso pelea con las pistas, asi que se anula. */
body .woocommerce ul.products li.product,
body .woocommerce-page ul.products li.product,
body .mm-front ul.products li.product {
  width: auto;
  margin: 0;
  float: none;
}

.mm-trust {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 19rem));
  justify-content: center;
}
.mm-trust__it { justify-items: center; text-align: center; }
.mm-trust__it p { max-width: 30ch; }
.mm-trust__it .mm-ico { margin-inline: auto; }

/* --------------------------------------------------------------------------
   LA FICHA EN IOS

   En el iPhone la ficha salia a ratos como una rueda de gajos dorados: eran
   los 22 discos del canto vistos sin las caras encima. Safari flatten a el
   contexto 3D cuando hay muchas capas anidadas con preserve-3d y
   backface-visibility, y entonces las caras desaparecen y queda el
   degradado conico de los puntos al desnudo.

   Tres medidas, de menos a mas drastica:

   1. El prefijo -webkit-. Safari lo sigue necesitando en algunas versiones
      y sin el NO hay escena 3D, solo capas planas.
   2. La visibilidad de cada cara la decide el JS con el coseno del angulo
      (--vis-a / --vis-b), no backface-visibility. Deja de depender de que
      el navegador acierte.
   3. En pantallas pequenas se retira la PILA de discos. El grosor lo
      sostiene la pared del cilindro, que es UNA capa en vez de 22, asi que
      el motivo del fallo desaparece en vez de mitigarse. De perfil se ve
      igual; lo unico que se pierde son los puntos del canto en los angulos
      intermedios, y eso en un movil a 195 px no se distingue.
   -------------------------------------------------------------------------- */

.mm-chip__spin,
.mm-chip__body {
  -webkit-transform-style: preserve-3d;
}

.mm-chip__face--a { visibility: var(--vis-a, visible); }
.mm-chip__face--b { visibility: var(--vis-b, visible); }

@media (max-width: 860px) {
  .mm-chip__ply { display: none; }
  /* Sin la pila, la pared carga con todo el grosor: se deja siempre puesta
     en vez de aparecer solo en el perfil. */
  .mm-chip__rim { opacity: 1; }
}