/* ==========================================================================
   MINCH · Landing "El diseño es el producto"
   Encapsulado bajo .mnl y prefijado mnl- para convivir con el tema Amazonas.
   Los resets van dentro de :where() (especificidad 0) para que NUNCA pisen
   los colores de los componentes.
   ========================================================================== */

@font-face {
  font-family: "Memories"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/memories.woff2") format("woff2");
}

.mnl {
  --mn-wine: #640000;
  --mn-wine-2: #7d0a0a;
  --mn-wine-deep: #2a0000;
  --mn-red: #a3121f;
  --mn-ink: #161617;
  --mn-ink-2: #4a4646;
  --mn-cream: #ffff73;   /* amarillo pastel de marca */
  --mn-yellow: #ffff73;
  --mn-paper: #fffff0;
  --mn-line: rgba(100, 0, 0, .14);
  --mn-sakura: #f2b8c6;
  --mn-sakura-ink: #9c3552;
  --mn-night: #120f22;
  --mn-lilac: #c9b8f0;
  --mn-violet: #5b3fb0;
  --mn-thread: #ffff73;   /* el hilo que recorre toda la landing */
  --mn-ok: #1f6b45;
  --mn-radius: 22px;
  --mn-radius-sm: 14px;
  --mn-gutter: 16px;
  --mn-max: 1200px;
  --mn-ease: cubic-bezier(.2, .7, .2, 1);
  --mn-spring: cubic-bezier(.2, .7, .2, 1); /* sin rebote */
  --mn-font: "Exo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mn-sign: "Mr Dafoe", "Brush Script MT", cursive;
  --mn-display: "Memories", "Exo", system-ui, sans-serif;
  --mnl-sticky-top: 0px;
  --mn-grain: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  font-family: var(--mn-font);
  color: var(--mn-ink);
  background: var(--mn-paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* ---------- Resets sin especificidad ---------- */
:where(.mnl) *, :where(.mnl) *::before, :where(.mnl) *::after { box-sizing: border-box; }
:where(.mnl) :where(img) { display: block; max-width: 100%; height: auto; }
:where(.mnl) :where(a) { color: inherit; text-decoration: none; }
:where(.mnl) :where(h1, h2, h3, h4, p, figure, ol, ul) { margin: 0; }
:where(.mnl) :where(ol, ul) { padding: 0; list-style: none; }
:where(.mnl) :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* El tema pinta TODOS los svg con "svg { fill: ... !important }" y eso rellena los íconos de línea:
   acá sí hacen falta especificidad e !important para respetar el fill que trae cada ícono. */
.mnl svg { color: inherit !important; } /* el tema también fuerza el color: cada ícono toma el de su botón */
.mnl svg[fill="none"] { fill: none !important; }
.mnl svg[fill="currentColor"] { fill: currentColor !important; }
.mnl :focus-visible { outline: 3px solid var(--mn-sakura); outline-offset: 3px; border-radius: 8px; }

.mnl-wrap { width: 100%; max-width: var(--mn-max); margin: 0 auto; padding: 0 var(--mn-gutter); }
.mnl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Tipografía ---------- */
.mnl-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mn-sakura-ink); }
.mnl-h2 { font-family: var(--mn-display); font-size: clamp(32px, 8.4vw, 62px); line-height: .98; font-weight: 400; letter-spacing: 0; color: var(--mn-wine); text-wrap: balance; }
.mnl-h2--xl { font-size: clamp(40px, 11vw, 76px); }
/* Palabra destacada: mismo peso, otro color y una costura punteada que se "cose" al aparecer */
.mnl-h2 em {
  font-style: normal; color: var(--mn-red);
  background: linear-gradient(90deg, currentColor 0 58%, transparent 58% 100%) 0 100% / 16px 4px repeat-x;
  padding-bottom: .1em; animation: mnl-stitch-run 1.6s linear infinite paused;
}
.mnl-h2:hover em, .mnl-reveal.is-in .mnl-h2 em { animation-play-state: running; animation-iteration-count: 2; }
@keyframes mnl-stitch-run { to { background-position-x: 32px; } }
.mnl-head { display: grid; gap: 10px; margin-bottom: 26px; }
.mnl-head--center { text-align: center; justify-items: center; }
.mnl-split-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }

/* ---------- Chips (glass) ---------- */
.mnl-chip {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255, 255, 255, .12); color: #fff;
  border: 1px solid rgba(255, 255, 255, .24);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.mnl-live { width: 8px; height: 8px; border-radius: 50%; background: #ff5a6a; box-shadow: 0 0 0 0 rgba(255, 90, 106, .7); animation: mnl-pulse 1.8s infinite; }
@keyframes mnl-pulse { 70% { box-shadow: 0 0 0 10px rgba(255, 90, 106, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 106, 0); } }

/* ---------- Botones ---------- */
.mnl-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer; overflow: hidden;
  background: var(--mn-wine); color: var(--mn-cream);
  font-family: var(--mn-font); font-weight: 700; font-size: 16px; letter-spacing: .01em; line-height: 1;
  box-shadow: 0 12px 28px -14px rgba(100, 0, 0, .8);
  transition: transform .2s var(--mn-ease), box-shadow .2s var(--mn-ease), background-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.mnl-btn:hover { background-color: var(--mn-wine-2); box-shadow: 0 18px 34px -14px rgba(100, 0, 0, .9); }
.mnl-btn:active { transform: scale(.98); }
.mnl-btn svg { width: 18px; height: 18px; flex: none; transition: transform .3s var(--mn-ease); }
.mnl-btn:hover svg { transform: translateX(3px); }
.mnl-btn--cream { background-color: var(--mn-cream); color: var(--mn-wine); box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .65); }
.mnl-btn--cream:hover { background-color: #fff; }
.mnl-btn--light { background-color: #fff; color: var(--mn-night); box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .7); }
.mnl-btn--light:hover { background-color: var(--mn-lilac); }
.mnl-btn--sm { min-height: 46px; padding: 0 16px; font-size: 14.5px; }
.mnl-btn--block { width: 100%; }

.mnl-link { display: inline-flex; align-items: center; gap: 6px; padding: 12px 0 4px; font-weight: 700; color: var(--mn-wine); white-space: nowrap; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; transition: background-size .3s var(--mn-ease); }
.mnl-link:hover { background-size: 0 2px; background-position: 100% 100%; }
.mnl-link svg { width: 16px; height: 16px; }

/* ---------- Cinta de beneficios ---------- */
.mnl-ribbon { background: var(--mn-ink); color: var(--mn-cream); overflow: hidden; }
.mnl-ribbon__track { display: flex; width: max-content; animation: mnl-marquee 34s linear infinite; }
.mnl-ribbon__item { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--mn-cream); }
.mnl-ribbon__item svg { width: 16px; height: 16px; color: var(--mn-sakura); }
.mnl-ribbon__item::after { content: "✦"; margin-left: 20px; color: var(--mn-sakura); }
@keyframes mnl-marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   PORTADA: dos bloques (BTS y Taylor Swift)
   ========================================================================== */
.mnl-portada { display: grid; }
.mnl-block {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-content: center;
  padding: 36px var(--mn-gutter) 44px;
  color: #fff;
}
.mnl-block--bts {
  min-height: min(92svh, 860px);
  background:
    radial-gradient(90% 55% at 15% 0%, rgba(200, 16, 46, .55), transparent 65%),
    radial-gradient(70% 50% at 100% 100%, #2a0000, transparent 70%),
    var(--mn-wine);
}
.mnl-block--taylor {
  min-height: min(80svh, 760px); color: var(--mn-night);
  background:
    radial-gradient(70% 50% at 85% 5%, #ffffff, transparent 65%),
    radial-gradient(70% 55% at 0% 100%, rgba(242, 184, 198, .75), transparent 70%),
    linear-gradient(160deg, #f1ecff 0%, #d9cdf7 100%);
}
.mnl-block--taylor::before { background: radial-gradient(120% 80% at 50% 45%, transparent 0%, rgba(91, 63, 176, .16) 100%), linear-gradient(rgba(233, 225, 252, .55), rgba(233, 225, 252, .55)); }
.mnl-block--taylor .mnl-wall { opacity: .22; }
.mnl-block--taylor .mnl-bigtype span { -webkit-text-stroke-color: rgba(91, 63, 176, .2); }
.mnl-block--taylor .mnl-stars i { background: var(--mn-violet); }
.mnl-block--taylor .mnl-grain { opacity: .06; }
.mnl-block--taylor .mnl-chip { background: rgba(255, 255, 255, .6); color: var(--mn-violet); border-color: rgba(91, 63, 176, .25); }
.mnl-block--taylor .mnl-btn--light { background-color: var(--mn-night); color: #fff; }
.mnl-block--taylor .mnl-btn--light:hover { background-color: var(--mn-violet); }
.mnl-fan--taylor .mnl-fan__card { border-color: #fff; box-shadow: 0 26px 50px -20px rgba(59, 42, 122, .55); }
.mnl .is-paused, .mnl .is-paused * { animation-play-state: paused !important; }

/* Grano de película */
.mnl-grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: var(--mn-grain); opacity: .06; }

/* Muro de bordados tono sobre tono */
.mnl-wall {
  position: absolute; z-index: 0; inset: -30% -40%;
  display: flex; gap: 14px; transform: rotate(-14deg);
  opacity: .3;
  pointer-events: none;
}
.mnl-wall__col { flex: 1; min-width: 0; overflow: hidden; }
.mnl-wall__track { display: flex; flex-direction: column; gap: 14px; animation: mnl-wall-up 46s linear infinite; will-change: transform; }
.mnl-wall__col:nth-child(even) .mnl-wall__track { animation-direction: reverse; animation-duration: 58s; }
.mnl-wall__track img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; filter: grayscale(1) contrast(1.1); }
@keyframes mnl-wall-up { to { transform: translateY(-50%); } }
.mnl-block::before { /* velo del color del bloque (tono sobre tono) + viñeta para que el texto respire */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 75% at 50% 45%, transparent 0%, rgba(0, 0, 0, .45) 100%),
    linear-gradient(var(--tint, rgba(100, 0, 0, .55)), var(--tint, rgba(100, 0, 0, .55)));
}
.mnl-block--bts { --tint: rgba(100, 0, 0, .55); }
.mnl-block--pets { --tint: rgba(74, 42, 26, .6); }
.mnl-block--photo { --tint: rgba(24, 48, 42, .6); }
.mnl-block--taylor .mnl-wall { opacity: .2; }

/* Tipografía gigante de fondo */
.mnl-bigtype { position: absolute; z-index: 1; left: 0; bottom: -3%; display: flex; width: max-content; pointer-events: none; animation: mnl-marquee 40s linear infinite; }
.mnl-bigtype span {
  font-size: clamp(110px, 34vw, 340px); line-height: .85; font-weight: 700; letter-spacing: -.04em; white-space: nowrap; padding-right: .3em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 211, .16);
}

/* Contenido del bloque */
.mnl-block__inner { position: relative; z-index: 4; width: 100%; max-width: var(--mn-max); margin: 0 auto; display: grid; gap: 18px; justify-items: start; }
.mnl-block__copy { display: grid; gap: 16px; justify-items: start; width: 100%; }
.mnl-block__sub { font-size: 16px; color: rgba(255, 255, 255, .88); max-width: 30ch; }
.mnl-block__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.mnl-block__meta { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .82); }

/* ---------- Firma (título manuscrito animado) ---------- */
.mnl-sign { width: min(100%, 620px); margin: 6px 0 0; transform: rotate(-7deg); transform-origin: 10% 60%; line-height: 0; font-size: 0; }
.mnl-sign svg { display: block; width: 100%; height: auto; overflow: visible; }
.mnl-sign text { font-family: var(--mn-sign); font-weight: 400; fill: var(--sign-fill, var(--mn-cream)); stroke: var(--sign-stroke, var(--mn-cream)); stroke-width: 1.4; paint-order: stroke; }
.mnl-sign { --sign-thread: var(--mn-thread); --sign-thread-under: #d4d455; }
.mnl-sign .mnl-sign__swash { fill: none; stroke: var(--sign-thread); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.mnl-sign .mnl-sign__under { stroke: var(--sign-thread-under); }
.mnl--js .mnl-sign.is-signed text { animation: mnl-draw 2.2s var(--mn-ease) forwards, mnl-fillin .9s ease 1.3s forwards; }
.mnl--js .mnl-sign.is-signed text + text { animation-delay: .55s, 1.8s; }
.mnl--js .mnl-sign.is-signed .mnl-sign__swash { animation: mnl-draw 1s var(--mn-ease) 2.1s forwards; }
@keyframes mnl-draw { to { stroke-dashoffset: 0; } }
@keyframes mnl-fillin { to { fill-opacity: 1; } }
.mnl-block--taylor .mnl-sign { --sign-fill: url(#mnl-g-taylor); --sign-stroke: #3b2a7a; --sign-thread: var(--mn-wine); --sign-thread-under: #3d0000; }
.mnl-block--bts .mnl-sign { --sign-fill: #fffdf5; --sign-stroke: #fffdf5; }

/* ---------- Abanico de bordados (BTS) ---------- */
.mnl-fan { position: relative; display: grid; place-items: center; width: 100%; height: 250px; margin: 4px 0 6px; transition: transform .4s var(--mn-ease); }
.mnl-fan__card {
  position: relative; grid-area: 1 / 1; width: 44%; max-width: 250px; aspect-ratio: 3 / 4;
  border-radius: 18px; overflow: hidden; padding: 0;
  border: 3px solid rgba(255, 255, 211, .92);
  box-shadow: 0 26px 50px -18px rgba(0, 0, 0, .75);
  transform: translateX(var(--tx)) rotate(var(--r)) translateY(var(--ty, 0px));
  animation: mnl-float 6s ease-in-out var(--w, 0s) infinite;
  transition: transform .5s var(--mn-spring);
}
.mnl-fan__card img { width: 100%; height: 100%; object-fit: cover; }
.mnl-fan__card span {
  position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 6px 8px; border-radius: 10px;
  background: rgba(22, 22, 23, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; font-size: 11.5px; font-weight: 700; text-align: center; letter-spacing: .02em;
}
.mnl-fan__card:nth-child(1) { --tx: -58%; --r: -11deg; --w: -1s; z-index: 1; }
.mnl-fan__card:nth-child(2) { --tx: 0%; --r: 2deg; --ty: -10px; --w: -3s; z-index: 3; }
.mnl-fan__card:nth-child(3) { --tx: 58%; --r: 12deg; --w: -2s; z-index: 2; }
@keyframes mnl-float { 50% { translate: 0 -10px; } }
@media (hover: hover) {
  .mnl-fan:hover .mnl-fan__card:nth-child(1) { --tx: -78%; --r: -16deg; }
  .mnl-fan:hover .mnl-fan__card:nth-child(3) { --tx: 78%; --r: 17deg; }
  .mnl-fan .mnl-fan__card:hover { --ty: -26px; z-index: 5; }
}

/* ==========================================================================
   SECCIONES
   ========================================================================== */
.mnl-section { position: relative; padding: 64px 0; }

/* ---------- Del archivo a la puntada (bento oscuro) ---------- */
.mnl-process-sec { background: var(--mn-wine-deep); color: var(--mn-cream); overflow: hidden; isolation: isolate; }
.mnl-process-sec .mnl-wrap { position: relative; z-index: 4; }
.mnl-process-sec .mnl-h2 { color: var(--mn-cream); }
.mnl-process-sec .mnl-h2 em { color: var(--mn-sakura); }
.mnl-process-sec .mnl-eyebrow { color: var(--mn-sakura); }
.mnl-bento { display: grid; gap: 12px; }
.mnl-tile {
  position: relative; border-radius: var(--mn-radius); padding: 20px;
  background: rgba(255, 255, 211, .07); border: 1px solid rgba(255, 255, 211, .16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .4s var(--mn-spring), background-color .3s;
}
.mnl-tile:hover { transform: translateY(-4px); background-color: rgba(255, 255, 211, .11); }
.mnl-tile > svg { width: 28px; height: 28px; color: var(--mn-sakura); margin-bottom: 10px; }
.mnl-tile b { display: block; font-size: 18px; line-height: 1.2; color: var(--mn-cream); }
.mnl-tile--compare { padding: 0; overflow: hidden; border: 0; }
.mnl-tile--compare:hover { transform: none; }
.mnl-compare { --pos: 50%; position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #000; user-select: none; touch-action: pan-y; cursor: ew-resize; }
.mnl-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mnl-compare__top { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.mnl-compare__bar { position: absolute; top: 0; bottom: 0; left: var(--pos); border-left: 3px dashed var(--mn-cream); transform: translateX(-1.5px); }
.mnl-compare__knob { position: absolute; top: 50%; left: var(--pos); width: 54px; height: 54px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--mn-cream); color: var(--mn-wine); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.mnl-compare__knob svg { width: 26px; height: 26px; }
.mnl-compare__label { position: absolute; top: 12px; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(22, 22, 23, .78); color: #fff; }
.mnl-compare__label--l { left: 12px; }
.mnl-compare__label--r { right: 12px; background: var(--mn-cream); color: var(--mn-wine); }
.mnl-compare input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.mnl-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.mnl-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--mn-cream); color: var(--mn-wine); font-weight: 700; font-size: 14px; }
.mnl-steps li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mn-wine); color: var(--mn-cream); font-size: 12px; }
.mnl-steps .mnl-steps__arrow { padding: 0; background: none; color: var(--mn-sakura); }
.mnl-steps .mnl-steps__arrow svg { width: 18px; height: 18px; }

/* ---------- FAQ ---------- */
.mnl-faq { display: grid; gap: 10px; max-width: 760px; margin: 0 auto; }
.mnl-faq details { border-radius: var(--mn-radius-sm); background: #fff; border: 1px solid var(--mn-line); transition: box-shadow .3s; }
.mnl-faq details[open] { box-shadow: 0 18px 40px -28px rgba(100, 0, 0, .5); }
.mnl-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; font-weight: 700; font-size: 16px; color: var(--mn-ink); }
.mnl-faq summary::-webkit-details-marker { display: none; }
.mnl-faq summary::after { content: "+"; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--mn-cream); color: var(--mn-wine); font-size: 20px; transition: transform .35s var(--mn-spring); }
.mnl-faq details[open] summary::after { transform: rotate(135deg); }
.mnl-faq details > div { padding: 0 18px 18px; color: var(--mn-ink-2); font-size: 15px; }
.mnl-faq details > div a { color: var(--mn-wine); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- CTA final ---------- */
.mnl-final { position: relative; overflow: hidden; isolation: isolate; text-align: center; color: var(--mn-cream); background: radial-gradient(80% 70% at 50% 0%, rgba(200, 16, 46, .45), transparent 70%), var(--mn-wine); }
.mnl-final .mnl-wrap { position: relative; z-index: 4; display: grid; justify-items: center; gap: 22px; }
.mnl-final__logo { width: 190px; filter: brightness(0) invert(1); opacity: .95; }
.mnl-final__mark { position: absolute; z-index: 1; left: 50%; top: 52%; width: max(110%, 760px); max-width: none; pointer-events: none;
  filter: brightness(0) invert(1); opacity: .07; transform: translate(-50%, -50%) rotate(-8deg);
  animation: mnl-mark 18s ease-in-out infinite alternate; }
@keyframes mnl-mark { from { transform: translate(-54%, -50%) rotate(-8deg) scale(1); opacity: .05; } to { transform: translate(-46%, -52%) rotate(-5deg) scale(1.08); opacity: .12; } }
.mnl-final .mnl-h2 { color: var(--mn-cream); }
.mnl-final .mnl-h2 em { color: var(--mn-sakura); }

/* ---------- Barra fija ---------- */
.mnl-sticky {
  position: fixed; z-index: 60; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 999px;
  background: rgba(22, 22, 23, .86); color: #fff;
  backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .6);
  transform: translateY(150%); transition: transform .5s var(--mn-spring);
}
.mnl-sticky.is-visible { transform: none; }
.mnl-sticky__txt { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.25; color: rgba(255, 255, 255, .82); }
.mnl-sticky__txt b { display: block; font-size: 14px; color: #fff; }
.mnl-sticky .mnl-btn { min-height: 46px; padding: 0 18px; font-size: 14px; flex: none; }

/* ---------- Botones flotantes: volver arriba + WhatsApp ----------
   Suben cuando aparece la barra fija, así nunca se tapan. */
.mnl-fab {
  position: fixed; z-index: 61; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: transform .45s var(--mn-ease);
}
.mnl-fab.is-lifted { transform: translateY(-74px); }
.mnl-fab__wa, .mnl-fab__top {
  display: grid; place-items: center; border-radius: 50%;
  box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .45);
  transition: transform .25s var(--mn-ease), opacity .25s var(--mn-ease), visibility .25s;
}
.mnl-fab__wa { width: 54px; height: 54px; background: #25d366; color: #fff; }
.mnl-fab__wa svg { width: 28px; height: 28px; }
.mnl-fab__top { width: 44px; height: 44px; padding: 0; background: var(--mn-wine); color: var(--mn-yellow); border: 1px solid rgba(255, 255, 255, .2); cursor: pointer; }
.mnl-fab__top svg { width: 20px; height: 20px; }
.mnl-fab__top:not(.is-on) { opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; }
.mnl-fab :focus-visible { outline: 3px solid var(--mn-yellow); outline-offset: 3px; }
@media (hover: hover) { .mnl-fab__wa:hover, .mnl-fab__top.is-on:hover { transform: scale(1.08); } }
/* El WhatsApp flotante del tema queda reemplazado por el de la landing (esta hoja solo carga en la home) */
.js-btn-fixed-bottom.btn-whatsapp { display: none !important; }

/* ---------- Revelado: scroll-driven si el navegador lo soporta, si no IntersectionObserver ---------- */
.mnl--js .mnl-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--mn-ease), transform .8s var(--mn-ease); }
.mnl--js .mnl-reveal.is-in { opacity: 1; transform: none; }
@supports (animation-timeline: view()) {
  .mnl--js .mnl-reveal { opacity: 1; transform: none; transition: none; animation: mnl-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  @keyframes mnl-rise { from { opacity: 0; transform: translateY(40px) scale(.98); } }
  .mnl-design__visual > img { animation: mnl-parallax linear both; animation-timeline: view(); }
  @keyframes mnl-parallax { from { transform: scale(1.12) translateY(-4%); } to { transform: scale(1.12) translateY(4%); } }
}

/* ==========================================================================
   EL HILO: une las secciones. Grueso y plano, como en la identidad de marca. Estático.
   ========================================================================== */
.mnl-thread { position: relative; overflow: hidden; background: var(--band, var(--mn-paper)); pointer-events: none; --t: var(--mn-thread); }
.mnl-thread--wine { --t: var(--mn-wine); }
.mnl-thread svg { position: relative; left: 50%; display: block; width: max(100%, 900px); height: auto; transform: translateX(-50%); }
.mnl-thread path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mnl-thread__line { stroke: var(--t); stroke-width: 6; }
.mnl-thread__needle > path:first-child { fill: var(--t); }
.mnl-thread__eye { fill: var(--mn-wine); }
.mnl-cblocks > .mnl-thread { grid-column: 1 / -1; }
/* el último tramo vive dentro del cierre (mismo fondo, sin franja de otro color) */
.mnl-section.mnl-final { padding-top: 0; }
.mnl-final > .mnl-thread { z-index: 4; margin-bottom: 12px; }

/* ==========================================================================
   MÁS COLECCIONES: bloques de ancho completo, filas de 3 (uno grande y dos chicos)
   ========================================================================== */
.mnl-cblocks-sec { position: relative; }
.mnl-cblocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; margin-top: 8px; }
.mnl-cblock {
  position: relative; isolation: isolate; overflow: hidden; display: block; min-height: 250px;
  color: #fff; background: radial-gradient(90% 70% at 85% 10%, var(--c2), transparent 70%), var(--c1);
}
.mnl-cblock.is-big { grid-column: span 2; min-height: 340px; }
.mnl-cblock__bg {
  position: absolute; inset: -10%; z-index: 0; width: 120%; height: 120%; object-fit: cover;
  filter: grayscale(1) contrast(1.2); opacity: .18;
  transition: transform 1.4s var(--mn-ease); animation: mnl-kb 22s ease-in-out infinite alternate;
}
@keyframes mnl-kb { to { transform: scale(1.12) translate(-3%, 2%); } }
.mnl-cblock::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 55%); }
.mnl-cblock__word {
  position: absolute; z-index: 1; left: -4%; top: 4%; font-family: var(--mn-display); font-weight: 400; line-height: .8; letter-spacing: 0;
  font-size: clamp(80px, 26vw, 260px); color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .2); white-space: nowrap;
  transition: transform 1s var(--mn-ease);
}
.mnl-cblock:hover .mnl-cblock__word { transform: translateX(4%); }
.mnl-cblock__cards { position: absolute; z-index: 1; inset: 10px 0 var(--copy-h, 70px) 0; display: grid; place-items: center; }
.mnl-cblock { --copy-h: 96px; }
.mnl-cblock.is-big { --copy-h: 124px; }
.mnl-cblock__card {
  grid-area: 1 / 1; position: relative; height: 84%; width: auto; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .92); box-shadow: 0 26px 46px -20px rgba(0, 0, 0, .75);
  transform: translate(var(--tx, 0), var(--ty, 0px)) rotate(var(--r, 0deg));
  transition: transform .6s var(--mn-spring); animation: mnl-float 7s ease-in-out var(--w, 0s) infinite;
}
.mnl-cblock__card img { width: 100%; height: 100%; object-fit: cover; }
.mnl-cblock__card:nth-child(1) { --r: -6deg; --tx: -16%; z-index: 2; }
.mnl-cblock__card:nth-child(2) { --r: 8deg; --tx: 22%; --ty: 10px; --w: -3s; z-index: 1; }
.mnl-cblock.is-big .mnl-cblock__card:nth-child(1) { --tx: 0%; --r: -3deg; --ty: -6px; z-index: 3; }
.mnl-cblock.is-big .mnl-cblock__card:nth-child(2) { --tx: -70%; --r: -10deg; --ty: 8px; z-index: 2; }
.mnl-cblock.is-big .mnl-cblock__card:nth-child(3) { --tx: 70%; --r: 10deg; --ty: 10px; --w: -5s; z-index: 1; }
@media (hover: hover) {
  .mnl-cblock:hover .mnl-cblock__card:nth-child(1) { --ty: -8px; }
  .mnl-cblock:hover .mnl-cblock__card:nth-child(2) { --tx: 34%; --r: 14deg; }
  .mnl-cblock.is-big:hover .mnl-cblock__card:nth-child(2) { --tx: -84%; --r: -14deg; }
  .mnl-cblock.is-big:hover .mnl-cblock__card:nth-child(3) { --tx: 84%; --r: 14deg; }
  .mnl-cblock:hover .mnl-cblock__bg { transform: scale(1.08); }
}
.mnl-cblock__copy { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 14px; display: grid; gap: 2px; justify-items: start; }
.mnl-cblock__copy small { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.mnl-cblock__copy b { font-family: var(--mn-display); font-weight: 400; font-size: clamp(20px, 5.4vw, 46px); line-height: .95; letter-spacing: 0; text-transform: uppercase; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.mnl-cblock.is-big .mnl-cblock__copy b { font-size: clamp(30px, 8vw, 64px); }
.mnl-cblock__go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 7px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-size: 12.5px; font-weight: 700;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background-color .3s, color .3s;
}
.mnl-cblock__go svg { width: 14px; height: 14px; transition: transform .3s var(--mn-ease); }
.mnl-cblock:hover .mnl-cblock__go { background-color: #fff; color: var(--c1); }
.mnl-cblock:hover .mnl-cblock__go svg { transform: translateX(3px); }
.mnl-cblock:not(.is-big) .mnl-cblock__go { display: none; }
.mnl-cblock--script .mnl-cblock__copy b {
  font-family: var(--mn-sign); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: .9;
  font-size: clamp(26px, 6.4vw, 40px); transform: rotate(-4deg); transform-origin: 0 100%; margin-bottom: 2px;
}
.mnl-cblock--script.is-big .mnl-cblock__copy b { font-size: clamp(38px, 9vw, 66px); }
/* ==========================================================================
   PERSONALIZADOS: dos bloques al estilo de la portada (mascota + foto favorita)
   ========================================================================== */
.mnl-block--pets {
  min-height: min(88svh, 820px);
  background:
    radial-gradient(80% 55% at 15% 0%, rgba(232, 160, 96, .55), transparent 65%),
    radial-gradient(70% 55% at 100% 100%, rgba(242, 184, 198, .35), transparent 70%),
    #4a2a1a;
}
.mnl-block--photo {
  min-height: min(88svh, 820px);
  background:
    radial-gradient(80% 55% at 85% 0%, rgba(230, 201, 154, .45), transparent 65%),
    radial-gradient(70% 55% at 0% 100%, rgba(31, 107, 69, .55), transparent 70%),
    #18302a;
}
.mnl-duo__title { margin: 4px 0 0; width: min(100%, 560px); display: grid; }
.mnl-duo__kicker { font-family: var(--mn-display); font-weight: 400; font-size: clamp(34px, 9vw, 64px); line-height: .95; letter-spacing: 0; text-transform: uppercase; color: #fff; }
.mnl-sign--one { display: block; width: 100%; margin-top: -2px; }
.mnl-block--pets .mnl-sign { --sign-fill: #ffffff; --sign-stroke: #ffffff; }
.mnl-block--photo .mnl-sign { --sign-fill: #ffffff; --sign-stroke: #ffffff; }
.mnl-flow { display: flex; flex-wrap: wrap; gap: 6px; }
.mnl-flow li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: 13px; font-weight: 700; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mnl-flow li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #4a2a1a; font-family: var(--mn-display); font-weight: 400; font-size: 12px; }
.mnl-fan--duo { height: 250px; margin: 14px 0; }
.mnl-fan--duo .mnl-fan__card { width: auto; max-width: none; height: 82%; }
/* prendas: fotos reales en tarjetitas de vidrio */
.mnl-gpicks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 520px; }
.mnl-gpick {
  position: relative; display: grid; gap: 6px; padding: 5px 5px 8px; border-radius: 16px; text-align: center;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: 12px; font-weight: 700;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .45s var(--mn-spring), background-color .25s, color .25s;
}
.mnl-gpick img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 11px; transition: transform .6s var(--mn-ease); }
.mnl-gpick:hover { transform: translateY(-5px) rotate(-2deg); background-color: #fff; color: var(--mn-ink); }
.mnl-gpick:hover img { transform: scale(1.06); }

/* ==========================================================================
   RESEÑAS: carrusel 3D con todas las capturas
   ========================================================================== */
.mnl-revs {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #0f0a0c;
  min-height: min(100svh, 940px); display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 40px 0 28px;
}
.mnl-revs__bg { position: absolute; inset: 0; z-index: 0; }
.mnl-revs__bg img { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(40px) saturate(1.4) brightness(.5); opacity: 0; transition: opacity 1.1s var(--mn-ease); }
.mnl-revs__bg img.is-on { opacity: 1; }
.mnl-revs::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(100% 70% at 50% 50%, transparent, rgba(0, 0, 0, .6)); pointer-events: none; }
.mnl-revs__head, .mnl-cflow, .mnl-revs__ui { position: relative; z-index: 4; }
.mnl-revs__head { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 0 var(--mn-gutter); }
.mnl-revs__head .mnl-eyebrow { color: var(--mn-sakura); }
.mnl-revs__head .mnl-h2 { color: #fff; font-size: clamp(28px, 7vw, 54px); }
.mnl-revs__head .mnl-h2 em { color: var(--mn-sakura); }
.mnl-cflow { position: relative; min-height: min(64svh, 600px); perspective: 1200px; transform-style: preserve-3d; touch-action: pan-y; cursor: grab; outline: none; }
.mnl-cflow:active { cursor: grabbing; }
.mnl-cf {
  --o: 0; --ao: 0;
  position: absolute; left: 50%; top: 50%; margin: 0; height: min(60svh, 580px); aspect-ratio: 9 / 16;
  border-radius: 28px; overflow: hidden; border: 6px solid #111; background: #111;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .08);
  transform: translate(-50%, -50%) translateX(calc(var(--o) * 62%)) translateZ(calc(var(--ao) * -220px)) rotateY(calc(var(--o) * -34deg));
  opacity: calc(1 - var(--ao) * .3); z-index: calc(20 - var(--ao));
  filter: brightness(calc(1 - var(--ao) * .3));
  transition: transform .8s var(--mn-spring), opacity .6s var(--mn-ease), filter .6s;
  cursor: pointer;
}
.mnl-cf.is-far { opacity: 0; pointer-events: none; }
.mnl-revs:not(.is-ready) .mnl-cf, .mnl-revs:not(.is-ready) .mnl-revs__bg img { transition: none; }
.mnl-cf img, .mnl-cf video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.mnl-cf__bar { position: absolute; z-index: 3; top: 10px; left: 10px; right: 10px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; transition: opacity .3s; }
.mnl-cf__bar i { position: absolute; inset: 0; border-radius: 3px; background: #fff; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.mnl-cf:not(.is-center) .mnl-cf__bar { opacity: 0; }
.mnl-cf--video::before { /* marca de video en las laterales */
  content: ""; position: absolute; z-index: 2; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(0, 0, 0, .45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='white'/%3E%3C/svg%3E") center / 22px no-repeat;
  transition: opacity .3s;
}
.mnl-cf--video.is-center::before { opacity: 0; }
.mnl-revs.is-holding .mnl-cf.is-center { transform: translate(-50%, -50%) scale(.97); }
.mnl-revs.is-holding .mnl-cf.is-center .mnl-cf__bar { opacity: .5; }
.mnl-revs__hint { position: relative; z-index: 4; margin: 0; text-align: center; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .72); letter-spacing: .02em; }
.mnl-cflow { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.mnl-cf.is-center { cursor: default; }
.mnl-cf.is-center::after { /* brillo que barre la tarjeta al llegar al centro */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  transform: translateX(-120%); animation: mnl-sweep 1.2s var(--mn-ease) .25s forwards;
}
@keyframes mnl-sweep { to { transform: translateX(120%); } }
.mnl-cf--more { display: grid; place-items: center; background: radial-gradient(100% 70% at 50% 0%, rgba(200, 16, 46, .6), transparent 70%), var(--mn-wine); border-color: var(--mn-wine); }
.mnl-cf--more a { display: grid; justify-items: center; gap: 16px; padding: 24px; text-align: center; color: #fff; }
.mnl-cf--more b { font-family: var(--mn-display); font-weight: 400; font-size: clamp(34px, 8vw, 54px); line-height: .95; text-transform: uppercase; letter-spacing: 0; }
.mnl-cf--more span { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--mn-cream); color: var(--mn-wine); font-weight: 700; font-size: 14.5px; }
.mnl-cf--more svg { width: 18px; height: 18px; }
.mnl-revs__ui { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 460px; margin: 0 auto; padding: 0 var(--mn-gutter); }
.mnl-revs__progress { position: relative; flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.mnl-revs__progress i { position: absolute; inset: 0; background: #fff; border-radius: 4px; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.mnl-revs__count { flex: none; min-width: 44px; text-align: center; font-family: var(--mn-display); font-weight: 400; font-size: 14px; color: rgba(255, 255, 255, .85); }
.mnl-revs__btn { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background-color .25s, color .25s, transform .3s var(--mn-spring); }
.mnl-revs__btn:hover { background-color: #fff; color: var(--mn-ink); transform: scale(1.06); }
.mnl-revs__btn svg { width: 20px; height: 20px; }
.mnl-revs__btn[data-dir="-1"] svg { transform: scaleX(-1); }

/* ==========================================================================
   SPIDERMAN: bloque a todo el ancho con los dos buzos más vendidos
   ========================================================================== */
.mnl-spider { grid-column: 1 / -1; position: relative; isolation: isolate; overflow: hidden; display: grid; color: #fff; }
.mnl-spider__word {
  position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  font-family: var(--mn-display); font-weight: 400; font-size: clamp(130px, 38vw, 420px); line-height: .8; letter-spacing: 0;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .14);
}
.mnl-spider__head { position: absolute; z-index: 5; top: 18px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; text-align: center; padding: 10px 22px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.mnl-spider__head small { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.mnl-spider__head b { font-family: var(--mn-display); font-weight: 400; font-size: 22px; line-height: 1; letter-spacing: 0; text-transform: uppercase; }
.mnl-spider__side { --c1: #0d0d0f; position: relative; z-index: 2; display: grid; gap: 14px; justify-items: start; padding: 92px 18px 30px; color: #fff; }
.mnl-spider__side--black { background: radial-gradient(80% 60% at 30% 30%, rgba(200, 16, 46, .38), transparent 70%), #0d0d0f; }
.mnl-spider__side--red { --c1: #b3121f; background: radial-gradient(80% 60% at 70% 30%, rgba(0, 0, 0, .35), transparent 70%), #b3121f; padding-top: 40px; }
.mnl-spider__photos { position: relative; width: 100%; height: 330px; margin-bottom: 12px; }
.mnl-spider__main, .mnl-spider__worn { position: absolute; overflow: hidden; border: 4px solid #fff; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .85); transition: transform .6s var(--mn-spring); }
.mnl-spider__main { left: 2%; top: 0; width: 60%; aspect-ratio: 4 / 5; border-radius: 20px; transform: rotate(-4deg); animation: mnl-float 7s ease-in-out infinite; }
.mnl-spider__worn { right: 2%; bottom: 0; width: 40%; aspect-ratio: 3 / 4; border-radius: 16px; transform: rotate(6deg); animation: mnl-float 8s ease-in-out -3s infinite; }
.mnl-spider__main img, .mnl-spider__worn img { width: 100%; height: 100%; object-fit: cover; }
.mnl-spider__side:hover .mnl-spider__main { transform: rotate(-7deg) translateX(-4%) scale(1.03); }
.mnl-spider__side:hover .mnl-spider__worn { transform: rotate(10deg) translateX(4%); }
.mnl-spider__info { display: grid; gap: 6px; justify-items: start; }
.mnl-spider__info i { font-style: normal; padding: 5px 11px; border-radius: 999px; background: var(--mn-cream); color: var(--mn-wine); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mnl-spider__side--red .mnl-spider__info i { background: #0d0d0f; color: #fff; }
.mnl-spider__info b { font-family: var(--mn-display); font-weight: 400; font-size: clamp(28px, 7.5vw, 52px); line-height: .95; letter-spacing: 0; text-transform: uppercase; }
.mnl-spider .mnl-cblock__go { display: inline-flex; margin-top: 4px; }
.mnl-spider__side:hover .mnl-cblock__go { background-color: #fff; color: var(--c1); }

/* ==========================================================================
   FOTOS REALES: solo fotos, a pantalla completa, con el texto flotando
   ========================================================================== */
.mnl-real { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; height: min(100svh, 980px); min-height: 560px; background: #0f0a0c; }
.mnl-real__wall { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.mnl-real__col { overflow: hidden; }
.mnl-real__col:nth-child(n + 3) { display: none; }
.mnl-real__track { display: flex; flex-direction: column; gap: 4px; animation: mnl-wall-up 70s linear infinite; }
.mnl-real__col:nth-child(even) .mnl-real__track { animation-direction: reverse; animation-duration: 84s; }
.mnl-real__track img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.mnl-real__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(70% 42% at 50% 50%, rgba(10, 0, 0, .62), transparent 78%), linear-gradient(to bottom, rgba(0, 0, 0, .3), transparent 25%, transparent 75%, rgba(0, 0, 0, .4)); }
.mnl-real__text { position: relative; z-index: 4; display: grid; justify-items: center; gap: 14px; padding: 0 20px; text-align: center; color: #fff; }
.mnl-real__text h2 { margin: 0; font-family: var(--mn-display); font-weight: 400; font-size: clamp(60px, 17vw, 190px); line-height: .82; letter-spacing: 0; text-transform: uppercase; text-shadow: 0 10px 50px rgba(0, 0, 0, .55); }
.mnl-real__text h2 em { display: block; font-style: normal; color: var(--mn-sakura); }
.mnl-real__text p { max-width: 26ch; font-size: clamp(18px, 4.6vw, 28px); font-weight: 700; line-height: 1.2; text-shadow: 0 4px 24px rgba(0, 0, 0, .7); }
.mnl-real__ig { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-weight: 700; font-size: 14px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color .25s, color .25s; }
.mnl-real__ig:hover { background-color: #fff; color: var(--mn-ink); }
.mnl-real__ig svg { width: 18px; height: 18px; }

/* ==========================================================================
   PARA HACER MATCH: bloque a todo el ancho con combos de 2 buzos
   ========================================================================== */
.mnl-match {
  grid-column: 1 / -1; position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 22px; justify-items: center;
  padding: 44px 0 40px; color: #fff;
  background:
    radial-gradient(70% 60% at 15% 10%, rgba(240, 154, 74, .6), transparent 70%),
    radial-gradient(60% 60% at 90% 95%, rgba(242, 184, 198, .45), transparent 70%),
    #7a3416;
}
.mnl-match__word {
  position: absolute; z-index: 0; left: 50%; top: 52%; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  font-family: var(--mn-display); font-weight: 400; font-size: clamp(140px, 40vw, 440px); line-height: .8; letter-spacing: 0;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .14);
}
.mnl-match__head { position: relative; z-index: 3; display: grid; justify-items: center; gap: 10px; padding: 0 var(--mn-gutter); text-align: center; }
.mnl-match__title { font-family: var(--mn-sign); font-size: clamp(58px, 16vw, 124px); line-height: .9; color: #fff; transform: rotate(-5deg); text-shadow: 0 8px 30px rgba(0, 0, 0, .3); }
.mnl-match__head p { font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, .9); }
.mnl-match__rail {
  position: relative; z-index: 3; width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px var(--mn-gutter) 18px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.mnl-match__rail::-webkit-scrollbar { display: none; }
.mnl-match__card {
  scroll-snap-align: center; display: grid; gap: 4px; padding: 8px 8px 14px; border-radius: 10px; background: #fbf8f1; color: var(--mn-ink);
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .7); transform: rotate(var(--r, -2deg));
  transition: transform .5s var(--mn-spring), box-shadow .4s var(--mn-ease);
}
.mnl-match__card:nth-child(even) { --r: 2.5deg; }
.mnl-match__card:nth-child(3n) { --r: -1deg; }
.mnl-match__card:hover { transform: rotate(0) translateY(-10px) scale(1.03); box-shadow: 0 36px 60px -24px rgba(0, 0, 0, .8); }
.mnl-match__img { display: block; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; margin-bottom: 6px; }
.mnl-match__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--mn-ease); }
.mnl-match__card:hover .mnl-match__img img { transform: scale(1.06); }
.mnl-match__card b { font-family: var(--mn-display); font-weight: 400; font-size: 18px; line-height: 1.05; letter-spacing: 0; text-transform: uppercase; }
.mnl-match__card small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b5562a; }
.mnl-match__cta { position: relative; z-index: 3; }

/* ==========================================================================
   RENDIMIENTO: menos trabajo para el celular sin perder el estilo
   ========================================================================== */
/* 1) Las secciones lejos de la pantalla no se dibujan hasta acercarse */
.mnl-cblocks-sec, .mnl-process-sec, .mnl-duo, .mnl-real, .mnl-final { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.mnl-cblocks-sec { contain-intrinsic-size: auto 3200px; }
/* 2) Cada bloque animado queda aislado: lo que se mueve adentro no obliga a redibujar el resto */
.mnl-block, .mnl-cblock, .mnl-spider, .mnl-match, .mnl-real, .mnl-revs { contain: paint; }
/* 3) En celular, el vidrio esmerilado (backdrop-filter) solo donde importa: barra fija y selector */
@media (max-width: 1023px) {
  .mnl *:not(.mnl-sticky):not(.mnl-picker) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .mnl-chip { background: rgba(255, 255, 255, .16); }
  .mnl-flow li, .mnl-gpick, .mnl-cblock__go, .mnl-real__ig { background-color: rgba(0, 0, 0, .28); }
  .mnl-block--taylor .mnl-chip { background: rgba(255, 255, 255, .7); }
}
/* ==========================================================================
   MOVIMIENTO: nada se anima solo. Solo hay movimiento cuando pasás el mouse
   (o tocás) un producto, y en el carrusel de reseñas.
   ========================================================================== */
.mnl *, .mnl *::before, .mnl *::after { animation: none !important; }
.mnl--js .mnl-reveal { opacity: 1 !important; transform: none !important; }
.mnl--js .mnl-sign text { fill-opacity: 1; stroke-dashoffset: 0; }
.mnl-ribbon__track { width: 100%; flex-wrap: wrap; justify-content: center; }
.mnl-ribbon__item:last-child::after { display: none; }
@media (max-width: 719px) { .mnl-ribbon__item:nth-child(n + 3) { display: none; } .mnl-ribbon__item:nth-child(2)::after { display: none; } }

/* ==========================================================================
   MARCA: titulares en Memories; la palabra destacada lleva el hilo cruzándola
   (fondo claro: banda amarilla por detrás · fondo oscuro: texto amarillo tachado en bordó)
   ========================================================================== */
.mnl-h2 { text-transform: uppercase; line-height: .95; }
.mnl .mnl-h2 em {
  font-style: normal; color: inherit; padding: 0 .14em; margin: 0 -.07em;
  background: linear-gradient(transparent 44%, var(--mn-yellow) 44%, var(--mn-yellow) 64%, transparent 64%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.mnl .mnl-revs__head .mnl-h2 em, .mnl .mnl-process-sec .mnl-h2 em, .mnl .mnl-final .mnl-h2 em, .mnl .mnl-real__text h2 em {
  color: var(--mn-yellow); background: none; padding: 0; margin: 0;
  text-decoration: line-through; text-decoration-color: var(--mn-wine); text-decoration-thickness: .12em;
}
.mnl .mnl-real__text h2 em { text-decoration-thickness: .1em; }
.mnl-duo__kicker, .mnl-cblock__copy b, .mnl-spider__info b, .mnl-match__card b, .mnl-real__text h2 { text-transform: uppercase; }

/* ==========================================================================
   CANALES DE DIFUSIÓN: llamado a la acción arriba de todo
   ========================================================================== */
.mnl-news { position: relative; overflow: hidden; color: #fff; background: radial-gradient(70% 120% at 0% 0%, rgba(200, 16, 46, .5), transparent 60%), var(--mn-wine); }
.mnl-news__in { max-width: var(--mn-max); margin: 0 auto; padding: 16px var(--mn-gutter) 18px; display: grid; gap: 12px; }
.mnl-news__copy { text-align: center; }
.mnl-news__title { margin: 0; font-family: var(--mn-display); font-weight: 400; font-size: 26px; line-height: 1; text-transform: uppercase; color: var(--mn-yellow); }
.mnl-news__sub { margin: 4px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .88); }
.mnl-news__btns { display: flex; gap: 10px; }
.mnl-news__btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 16px; border-radius: 12px;
  background: #fff; color: var(--mn-wine); font-weight: 700; font-size: 15px; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: background-color .2s, transform .2s;
}
.mnl-news__btn:hover { background-color: var(--mn-yellow); transform: translateY(-1px); }
.mnl-news__btn svg { width: 20px; height: 20px; flex: none; }
.mnl-news__btn--wa svg { color: #1faa52; }
.mnl-news__btn--ig svg { color: #d62976; }
.mnl-news__pre { display: none; }

/* ==========================================================================
   TABLET / DESKTOP
   ========================================================================== */
@media (min-width: 720px) {
  .mnl { --mn-gutter: 28px; }
  .mnl-section { padding: 96px 0; }
  .mnl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 18px; }
  .mnl-mini-rail { grid-auto-columns: 30%; }
  .mnl-bento { grid-template-columns: repeat(3, 1fr); }
  .mnl-tile--compare { grid-column: 1 / -1; }
  .mnl-compare { aspect-ratio: 16 / 9; }
  .mnl-ugc a { width: 220px; }
  .mnl-sticky { left: auto; right: 20px; width: 430px; }
  .mnl-fab { right: 20px; }
  .mnl-fan { height: 340px; }
  .mnl-cblocks { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row; }
  .mnl-cblock { grid-column: span 3; min-height: 420px; }
  .mnl-cblock.is-big { grid-column: span 6; min-height: 420px; --copy-h: 152px; }
  .mnl-cblock { --copy-h: 162px; }
  .mnl-cblock__copy { left: 24px; right: 24px; bottom: 22px; }
  .mnl-cblock__copy b { font-size: clamp(24px, 2.6vw, 38px); }
  .mnl-cblock.is-big .mnl-cblock__copy b { font-size: clamp(36px, 4.4vw, 64px); }
  .mnl-cblock__word { font-size: clamp(120px, 15vw, 260px); }
  .mnl-cblock:not(.is-big) .mnl-cblock__go { display: inline-flex; }
  .mnl-real__wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mnl-news__in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 28px; padding-block: 18px; }
  .mnl-news__copy { text-align: left; }
  .mnl-news__title { font-size: 34px; }
  .mnl-news__sub { font-size: 15px; }
  .mnl-news__btns { justify-content: flex-end; gap: 12px; }
  .mnl-news__btn { flex: none; padding: 0 22px; }
  .mnl-news__pre { display: inline; }
  .mnl-real__col:nth-child(n + 3) { display: block; }
  .mnl-spider { grid-template-columns: 1fr 1fr; min-height: 560px; }
  .mnl-match { padding: 64px 0 56px; }
  .mnl-match__rail { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1320px; gap: 20px; padding: 18px 40px 24px; overflow: visible; }
  .mnl-spider__side { padding: 96px 44px 40px; align-content: end; }
  .mnl-spider__side--red { margin-left: -90px; padding-left: 134px; clip-path: polygon(90px 0, 100% 0, 100% 100%, 0 100%); padding-top: 96px; }
  .mnl-spider__photos { height: 380px; max-width: 520px; }
  .mnl-revs { padding: 64px 0 40px; }
  .mnl-thread__line { stroke-width: 10; }
}
@media (min-width: 1024px) {
  .mnl-portada { grid-template-columns: 1.7fr 1fr; }
  .mnl-block { min-height: min(88vh, 820px); padding: 56px 44px; }
  .mnl-block--bts .mnl-block__inner { grid-template-columns: 1fr .95fr; align-items: center; gap: 24px; }
  .mnl-block--bts .mnl-fan { height: 440px; }
  .mnl-block--bts .mnl-fan__card { width: 50%; }
  .mnl-block--bts .mnl-fan__card:nth-child(1) { --tx: -46%; }
  .mnl-block--bts .mnl-fan__card:nth-child(3) { --tx: 46%; }
  .mnl-fan--taylor { height: 300px; }
  .mnl-fan--taylor .mnl-fan__card { width: 40%; }
  .mnl-wall { inset: -30% -20%; }
  .mnl-design { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
  .mnl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mnl-bento { grid-template-columns: 1.6fr 1fr; }
  .mnl-tile--compare { grid-column: 1; grid-row: 1 / span 3; }
  .mnl-compare { aspect-ratio: auto; height: 100%; min-height: 460px; }
  .mnl-mini-rail { grid-auto-columns: calc((100% - 36px) / 4); margin: 0; padding: 4px 0 12px; }
  .mnl-cflow { min-height: min(72vh, 680px); }
  .mnl-cf { height: min(66vh, 620px); }
  .mnl-cf { transform: translate(-50%, -50%) translateX(calc(var(--o) * 78%)) translateZ(calc(var(--ao) * -240px)) rotateY(calc(var(--o) * -32deg)); }
  .mnl-duo { grid-template-columns: 1fr 1fr; }
  .mnl-fan--duo { height: 250px; }
  .mnl-gpicks { max-width: 390px; }
  .mnl-duo .mnl-block { padding-top: 44px; padding-bottom: 44px; }
  .mnl-picker { margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   MOVIMIENTO SIMPLE (28/10/2026): al pasar el mouse, las fotos se agrandan apenas
   y las tarjetas suben unos píxeles. Nada gira, rebota ni se abre en abanico.
   ========================================================================== */
.mnl-fan__card, .mnl-cblock__card, .mnl-spider__main, .mnl-spider__worn, .mnl-match__card, .mnl-gpick { transition: translate .25s var(--mn-ease), box-shadow .25s var(--mn-ease); }
.mnl-fan__card img, .mnl-cblock__card img, .mnl-spider__main img, .mnl-spider__worn img, .mnl-match__img img, .mnl-gpick img { transition: transform .4s var(--mn-ease); }
@media (hover: hover) {
  .mnl-fan:hover .mnl-fan__card:nth-child(1) { --tx: -58%; --r: -11deg; }
  .mnl-fan:hover .mnl-fan__card:nth-child(3) { --tx: 58%; --r: 12deg; }
  .mnl-fan .mnl-fan__card:hover { --ty: 0px; translate: 0 -6px; }
  .mnl-fan__card:nth-child(2):hover { --ty: -10px; }
  .mnl-fan__card:hover img { transform: scale(1.04); }
  .mnl-cblock:hover .mnl-cblock__card:nth-child(1) { --ty: 0px; }
  .mnl-cblock:hover .mnl-cblock__card:nth-child(2) { --tx: 22%; --r: 8deg; --ty: 10px; }
  .mnl-cblock.is-big:hover .mnl-cblock__card:nth-child(1) { --ty: -6px; }
  .mnl-cblock.is-big:hover .mnl-cblock__card:nth-child(2) { --tx: -70%; --r: -10deg; --ty: 8px; }
  .mnl-cblock.is-big:hover .mnl-cblock__card:nth-child(3) { --tx: 70%; --r: 10deg; --ty: 10px; }
  .mnl-cblock:hover .mnl-cblock__card img { transform: scale(1.04); }
  .mnl-spider__side:hover .mnl-spider__main { transform: rotate(-4deg); }
  .mnl-spider__side:hover .mnl-spider__worn { transform: rotate(6deg); }
  .mnl-spider__side:hover .mnl-spider__main img, .mnl-spider__side:hover .mnl-spider__worn img { transform: scale(1.04); }
  .mnl-match__card:hover { transform: rotate(var(--r, -2deg)); translate: 0 -4px; box-shadow: 0 30px 54px -22px rgba(0, 0, 0, .75); }
  .mnl-match__card:hover .mnl-match__img img { transform: scale(1.04); }
  .mnl-gpick:hover { transform: none; translate: 0 -3px; }
  .mnl-gpick:hover img { transform: scale(1.04); }
  .mnl-tile:hover { transform: none; }
}
.mnl-cblock__word, .mnl-spider__word, .mnl-match__word, .mnl-bigtype, .mnl-grain { display: none; }

/* El tema pinta "a:hover" y "a:focus" de gris al 50% y eso borraba los textos de los links al pasar el puntero.
   Con "a." delante empatamos su especificidad y, como esta hoja carga después, gana el color propio de cada link.
   Los :hover de la landing que cambian el color (.mnl-gpick:hover, .mnl-real__ig:hover) siguen ganando. */
a.mnl-btn { color: var(--mn-cream); }
a.mnl-btn--cream { color: var(--mn-wine); }
a.mnl-btn--light { color: var(--mn-night); }
a.mnl-news__btn { color: var(--mn-wine); }
a.mnl-spider__head, a.mnl-spider__side, a.mnl-match__title, a.mnl-real__ig, a.mnl-gpick, a.mnl-cblock { color: #fff; }
a.mnl-match__card { color: var(--mn-ink); }

@media (prefers-reduced-motion: reduce) {
  .mnl *, .mnl *::before, .mnl *::after { animation: none !important; transition: none !important; }
  .mnl--js .mnl-sign text { fill-opacity: 1; stroke-dashoffset: 0; }
  .mnl--js .mnl-reveal { opacity: 1; transform: none; }
  .mnl-petals, .mnl-stars, .mnl-paws, .mnl-hearts { display: none; }
  .mnl-real__track { animation: none; }
}