/* ============================================================
   MOODZ V2 — DEPTH SYSTEM
   Identidad Moodz (Art Deco · pergamino · oro) + arquitectura
   de profundidad: capas, parallax, revelado y dimension.
   Se carga DESPUES de moodz.css. No redefine la paleta.
   ============================================================ */

/* ── 1. SMOOTH SCROLL ─────────────────────────────────────── */
html.mz-smooth { scroll-behavior: auto; }
html.mz-smooth body { min-height: 100%; }

/* ── 2. ESCENA HERO — profundidad por capas ───────────────── */
.mz-scene {
  position: relative;
  overflow: hidden;
  background: var(--bg-deep);
  isolation: isolate;
  padding: clamp(64px, 8vh, 110px) 24px clamp(252px, 36vh, 392px);
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  /* La sombra cae sobre la seccion siguiente: lectura de continuidad */
  z-index: 1;
  box-shadow: 0 34px 74px -12px rgba(0,0,0,.78);
}
/* Los navegadores sin svh usan vh */
@supports not (height: 100svh) { .mz-scene { min-height: 100vh; } }

/* Bloom atmosferico dorado — la "aurora" en registro Moodz */
.mz-scene__bloom {
  position: absolute; inset: -10%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 55% at 50% 0%,  rgba(212,165,55,0.22), transparent 62%),
    radial-gradient(ellipse 50% 45% at 15% 22%, rgba(168,130,26,0.14), transparent 66%),
    radial-gradient(ellipse 55% 50% at 88% 30%, rgba(201,162,58,0.16), transparent 64%);
  filter: blur(30px);
  animation: mz-bloom 26s cubic-bezier(.22,.61,.36,1) infinite alternate;
}
@keyframes mz-bloom {
  0%   { transform: translate3d(0,0,0)      scale(1);    opacity: .82; }
  50%  { transform: translate3d(2%,-1.5%,0) scale(1.05); opacity: 1;   }
  100% { transform: translate3d(-1.5%,2%,0) scale(1.02); opacity: .88; }
}

/* Rayado Art Deco vertical de fondo — profundidad estructural */
.mz-scene__rays {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .10;
  background-image: repeating-linear-gradient(
    90deg, transparent 0 62px,
    var(--gold-soft) 62px 63px
  );
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 15%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 15%, #000 0%, transparent 72%);
}

/* Grano sobre la escena oscura */
.mz-scene__grain {
  position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.94 0 0 0 0 0.85 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 3. SKYLINE ART DECO — sustituye el bosque de referencia ─ */
.mz-skyline {
  position: absolute; left: -6%; right: -6%; bottom: 0;
  z-index: 2; pointer-events: none; line-height: 0;
  will-change: transform;
}
.mz-skyline svg { display: block; width: 100%; height: 100%; }
/* Cada capa con su propia altura: mantiene el escalonado que da la profundidad */
.mz-skyline--far  { z-index: 1; opacity: .34; height: clamp(96px, 14vh, 158px); }
.mz-skyline--mid  { z-index: 3; opacity: .70; height: clamp(124px, 18vh, 200px); }
.mz-skyline--near { z-index: 5; opacity: 1;   height: clamp(152px, 22vh, 244px); }
/* El skyline nunca tapa la copy: el contenido va en z-index 6 */

/* Fundido inferior: los edificios se hunden en la oscuridad y la escena
   entrega el color exacto con el que arranca la seccion siguiente. */
.mz-scene__fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(150px, 24vh, 260px);
  z-index: 7; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(28,24,20,0) 0%,
    rgba(24,20,17,.45) 46%,
    rgba(28,24,20,.92) 82%,
    var(--bg-deep) 100%);
}

/* ── 4. WORDMARK 3D ───────────────────────────────────────── */
.mz-mark3d {
  position: relative; z-index: 6;
  display: flex; justify-content: center;
  perspective: 1200px;
  margin-bottom: clamp(16px, 2.6vh, 36px);
}
.mz-mark3d__inner {
  transform-style: preserve-3d;
  transform: rotateX(var(--mz-rx, 8deg)) rotateY(var(--mz-ry, 0deg));
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.mz-mark3d__word {
  position: relative;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(2.3rem, 9vw, 7.2rem);
  line-height: .9;
  letter-spacing: .40em;
  text-indent: .40em;
  text-transform: uppercase;
  color: var(--cream);
  transform-style: preserve-3d;
  /* Extrusion: pila de sombras = volumen real, sin imagenes */
  text-shadow:
     1px  1px 0 rgba(168,130,26,.55),
     2px  2px 0 rgba(168,130,26,.44),
     3px  3px 0 rgba(140,108,20,.36),
     4px  4px 0 rgba(120,92,18,.30),
     6px  6px 0 rgba( 96,74,14,.24),
     8px  8px 0 rgba( 72,56,12,.18),
    12px 12px 0 rgba( 48,38,10,.12),
    18px 20px 34px rgba(0,0,0,.55);
}
.mz-mark3d__word em {
  font-style: italic; font-weight: 300;
  color: var(--gold-pale);
}
.mz-mark3d__word .mz-z { letter-spacing: 0; }

.mz-mark3d__sub {
  margin-top: 10px; text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: 14px; letter-spacing: .20em;
  color: var(--gold-pale); opacity: .72;
}

/* ── 5. GRID HERO — texto izquierda · telefono derecha ────── */
.mz-hero-grid {
  position: relative; z-index: 6;
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.mz-hero-copy { max-width: 560px; }
.mz-hero-copy h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300; letter-spacing: -.02em;
  font-size: clamp(1.85rem, 3.6vw, 3.2rem);
  line-height: 1.08; color: var(--cream);
  margin-bottom: 16px;
}
.mz-hero-copy h1 em { font-style: italic; color: var(--gold-pale); }
.mz-hero-copy p {
  font-family: 'Inter', sans-serif; font-weight: 300;
  font-size: 15px; line-height: 1.75;
  color: rgba(248,244,234,.66); max-width: 460px; margin-bottom: 20px;
}
.mz-hero-meta {
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: .30em; text-transform: uppercase;
  color: rgba(248,244,234,.42); margin-bottom: 20px;
}

/* Chip / eyebrow sobre oscuro */
.mz-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 16px; border-radius: 999px;
  border: 1px solid rgba(201,162,58,.30);
  background: rgba(248,244,234,.05);
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(248,244,234,.78); margin-bottom: 18px;
}
.mz-chip::before {
  content: ''; width: 5px; height: 5px; background: var(--gold-soft);
  transform: rotate(45deg); flex: none;
}

/* Boton sobre fondo oscuro */
.mz-btn {
  position: relative; overflow: hidden;
  display: inline-block; text-decoration: none;
  padding: 15px 42px; border-radius: 999px;
  background: var(--cream); color: var(--bg-deep);
  border: 1px solid var(--cream);
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .25em; text-transform: uppercase;
  transition: color .5s cubic-bezier(.22,.61,.36,1);
}
.mz-btn::before {
  content: ''; position: absolute; inset: 0; background: var(--gold-bright);
  transform: translateY(101%);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.mz-btn > span { position: relative; z-index: 1; }
.mz-btn:hover::before { transform: translateY(0); }
.mz-btn:hover { color: var(--bg-deep); }

/* ── 6. REPRODUCTOR HORIZONTAL 16:9 ───────────────────────── */
.mz-vidwrap {
  position: relative; z-index: 6;
  perspective: 1600px;
  width: 100%;
}
.mz-vidframe {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #0A0805;
  transform: rotateX(var(--mz-vrx, 2.5deg)) rotateY(var(--mz-vry, -6deg));
  transition: transform .7s cubic-bezier(.22,.61,.36,1),
              box-shadow .7s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  border: 1px solid rgba(201,162,58,.30);
  box-shadow:
    0 1px 0 rgba(232,201,117,.14) inset,
    -14px 26px 54px rgba(0,0,0,.58),
    -30px 56px 110px rgba(0,0,0,.40);
}
.mz-vidwrap:hover .mz-vidframe {
  box-shadow:
    0 1px 0 rgba(232,201,117,.20) inset,
    -14px 30px 62px rgba(0,0,0,.62),
    -30px 62px 122px rgba(0,0,0,.46);
}
.mz-vidframe__media { position: absolute; inset: 0; width: 100%; height: 100%; }
.mz-vidframe__media iframe,
video.mz-vidframe__media { width: 100%; height: 100%; display: block; object-fit: cover; border: 0; }

/* Reflejo de cristal sobre el marco */
.mz-vidframe::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: linear-gradient(118deg, rgba(248,244,234,.10) 0%, transparent 32%, transparent 70%, rgba(232,201,117,.07) 100%);
}

.mz-vidframe__overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,8,5,.34);
  border: 0; cursor: pointer; padding: 0;
  transition: opacity .35s cubic-bezier(.22,.61,.36,1);
}
.mz-vidframe__play {
  width: 70px; height: 70px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--cream);
  background: rgba(168,130,26,.88);
  border: 2px solid rgba(212,165,55,.92);
  box-shadow: 0 8px 30px rgba(0,0,0,.38);
  padding-left: 4px;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), background .35s ease;
}
.mz-vidframe__overlay:hover .mz-vidframe__play {
  transform: scale(1.07); background: rgba(168,130,26,1);
}
.mz-vidframe.is-playing .mz-vidframe__overlay { opacity: 0; pointer-events: none; }

.mz-vidframe__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 12px;
  background: linear-gradient(0deg, rgba(10,8,5,.84) 0%, rgba(10,8,5,.28) 70%, transparent 100%);
}
.mz-vidframe__btn {
  background: none; border: 0; cursor: pointer; padding: 4px 5px;
  color: var(--gold-bright); display: flex; align-items: center;
  opacity: .9; transition: opacity .25s ease;
}
.mz-vidframe__btn:hover { opacity: 1; }
.mz-vidframe__vol {
  flex: 1; max-width: 110px; height: 3px; cursor: pointer;
  accent-color: var(--gold-bright);
  background: rgba(212,165,55,.25); border-radius: 2px; outline: none;
}

/* Esquinas Art Deco del sistema Moodz */
.mz-vidwrap__c { position: absolute; width: 24px; height: 24px; pointer-events: none; z-index: 7; }
.mz-vidwrap__c--tl { top: -8px; left: -8px;  border-top: 2px solid var(--gold);    border-left: 2px solid var(--gold); }
.mz-vidwrap__c--tr { top: -8px; right: -8px; border-top: 2px solid var(--gold);    border-right: 2px solid var(--gold); }
.mz-vidwrap__c--bl { bottom: -8px; left: -8px;  border-bottom: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.mz-vidwrap__c--br { bottom: -8px; right: -8px; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); }

/* Acento dorado en la copy del hero */
.mz-hero-copy h1 .g { color: var(--gold-pale); font-weight: 400; }

/* ── 6b. TELEFONO 3D (en desuso, se conserva por compatibilidad) ── */
.mz-phone-stage {
  position: relative; z-index: 6;
  perspective: 1500px;
  display: flex; justify-content: center;
}
.mz-phone {
  --mz-prx: 4deg; --mz-pry: -13deg;
  position: relative;
  width: min(320px, 78%); aspect-ratio: 9 / 18.6;
  border-radius: 44px;
  transform-style: preserve-3d;
  transform: rotateX(var(--mz-prx)) rotateY(var(--mz-pry)) translateZ(0);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  background: linear-gradient(155deg, #2A241D 0%, #16120F 55%, #221D17 100%);
  border: 1px solid rgba(201,162,58,.34);
  box-shadow:
    0 2px 0 rgba(232,201,117,.16) inset,
    -22px 34px 60px rgba(0,0,0,.62),
    -46px 70px 120px rgba(0,0,0,.42);
  padding: 11px;
}
.mz-phone::after {
  content: ''; position: absolute; inset: 0; border-radius: 44px;
  background: linear-gradient(118deg, rgba(248,244,234,.16) 0%, transparent 34%, transparent 68%, rgba(232,201,117,.10) 100%);
  pointer-events: none;
}
.mz-phone__notch {
  position: absolute; top: 17px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 5px; border-radius: 99px;
  background: rgba(248,244,234,.16); z-index: 3;
}
.mz-phone__screen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 34px; background: var(--bg);
  display: flex; flex-direction: column;
}
.mz-scr__bar {
  padding: 30px 18px 14px; text-align: center;
  border-bottom: 1px solid var(--line-soft);
}
.mz-scr__mark {
  font-family: 'Cormorant Garamond', serif; font-size: 15px; font-weight: 400;
  letter-spacing: .40em; text-transform: uppercase; color: var(--ink);
}
.mz-scr__mark em { font-style: italic; font-weight: 300; color: var(--gold); }
.mz-scr__mark .mz-z { letter-spacing: 0; }
.mz-scr__body { flex: 1; padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.mz-scr__row {
  border: 1px solid var(--line-soft); background: var(--cream);
  padding: 11px 13px; position: relative;
}
.mz-scr__row span.k {
  display: block; font-family: 'Inter', sans-serif; font-size: 8px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px;
}
.mz-scr__row span.v {
  display: block; font-family: 'Cormorant Garamond', serif;
  font-size: 15px; color: var(--ink); line-height: 1.25;
}
.mz-scr__row i.c {
  position: absolute; top: 0; right: 0; width: 12px; height: 12px;
  border-top: 1px solid var(--gold-soft); border-right: 1px solid var(--gold-soft);
}
.mz-scr__cta {
  margin-top: auto; text-align: center; padding: 11px;
  background: var(--ink); color: var(--cream);
  font-family: 'Inter', sans-serif; font-size: 8.5px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; border-radius: 999px;
}

/* ── 7. REVELADO PALABRA POR PALABRA ──────────────────────── */
.mz-reveal { font-family: 'Cormorant Garamond', serif; }
.mz-reveal .w {
  display: inline-block;
  color: var(--mz-rev-dim, rgba(28,24,20,.16));
  transition: color .5s cubic-bezier(.22,.61,.36,1);
}
.mz-reveal .w.on { color: var(--mz-rev-on, var(--ink)); }
.mz-reveal .w.gold.on { color: var(--gold); }

/* ── 8. UTILIDADES DE PROFUNDIDAD ─────────────────────────── */
.mz-parallax { will-change: transform; }
/* Solo se oculta si el motor arranco (html.mz-js). Si el JS falla,
   el contenido se ve igual: nunca una pagina en blanco. */
.mz-js [data-mz-rise] { opacity: 0; transform: translateY(26px); }
[data-mz-rise].in {
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}

/* ── 8b. INTRO — declaraciones que toman tinta ────────────── */
.mz-intro {
  position: relative;
  background: var(--bg);
  padding: clamp(110px, 16vh, 190px) 24px clamp(90px, 13vh, 160px);
}
/* Transicion desde la escena oscura hacia el pergamino */
.mz-intro::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 160px;
  background: linear-gradient(180deg, rgba(28,24,20,.16), transparent);
  pointer-events: none;
}
.mz-intro__inner {
  position: relative; max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 40px 1fr; gap: clamp(24px, 4vw, 56px);
}
.mz-intro__rail { display: flex; flex-direction: column; align-items: center; padding-top: 12px; }
.mz-intro__line {
  flex: 1; width: 1px; margin-top: 14px;
  background: linear-gradient(180deg, var(--gold-soft), transparent 85%);
}
.mz-intro__col { max-width: 820px; }
.mz-intro__stmt {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300; letter-spacing: -.01em;
  font-size: clamp(1.5rem, 3.1vw, 2.6rem);
  line-height: 1.42;
  margin-top: clamp(28px, 4vh, 46px);
}
.mz-intro__col .eyebrow { display: block; margin-bottom: 8px; }

/* ── 8c. ARQUITECTURAS — corrientes Art Deco ──────────────── */
.mz-arq {
  position: relative; background: var(--bg-warm);
  padding: clamp(100px, 14vh, 170px) 24px clamp(100px, 14vh, 170px);
  border-top: 1px solid var(--line-soft);
}
.mz-arq__inner { max-width: 1180px; margin: 0 auto; }
.mz-arq__head { text-align: center; max-width: 720px; margin: 0 auto clamp(52px, 7vh, 84px); }
.mz-arq__title {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.05;
  letter-spacing: -.02em; color: var(--ink); margin-top: 14px;
}
.mz-arq__title em { font-style: italic; color: var(--ink-soft); display: block; }
.mz-arq__lead {
  font-family: 'Inter', sans-serif; font-weight: 300;
  font-size: 15px; line-height: 1.75; color: var(--ink-soft);
  max-width: 560px; margin: 22px auto 0;
}
.mz-arq__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
.mz-arq__card {
  position: relative; padding: 30px 28px 28px;
  background: var(--cream); border: 1px solid var(--line-soft);
  transition: transform .5s cubic-bezier(.22,.61,.36,1),
              box-shadow .5s cubic-bezier(.22,.61,.36,1),
              border-color .5s cubic-bezier(.22,.61,.36,1);
}
.mz-arq__card:hover {
  transform: translateY(-5px);
  border-color: rgba(201,162,58,.42);
  box-shadow: 0 18px 40px rgba(28,24,20,.10);
}
/* Corners deco */
.mz-arq__c { position: absolute; width: 18px; height: 18px; pointer-events: none; opacity: .55; transition: opacity .4s ease; }
.mz-arq__card:hover .mz-arq__c { opacity: 1; }
.mz-arq__c--tl { top: 0; left: 0;  border-top: 1px solid var(--gold);    border-left: 1px solid var(--gold); }
.mz-arq__c--tr { top: 0; right: 0; border-top: 1px solid var(--gold);    border-right: 1px solid var(--gold); }
.mz-arq__c--bl { bottom: 0; left: 0;  border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.mz-arq__c--br { bottom: 0; right: 0; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }

.mz-arq__motif { margin: 4px 0 20px; }
.mz-arq__motif svg { display: block; width: 100%; height: auto; }
.mz-arq__meta {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); margin-bottom: 14px;
}
.mz-arq__year {
  font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute);
}
.mz-arq__name {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 1.55rem; line-height: 1.15; color: var(--ink); margin-bottom: 10px;
}
.mz-arq__desc {
  font-family: 'Inter', sans-serif; font-weight: 300;
  font-size: 13px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 18px;
}
.mz-arq__tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--gold);
}

/* ── 9. RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 900px) {
  .mz-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .mz-hero-copy { max-width: none; }
  .mz-phone { --mz-pry: -6deg; width: min(280px, 68%); }
  .mz-scene { padding: clamp(110px,14vh,150px) 20px 90px; }
  .mz-mark3d__word { letter-spacing: .28em; text-indent: .28em; }
  .mz-arq__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mz-arq__grid { grid-template-columns: 1fr; }
  .mz-intro__inner { grid-template-columns: 1fr; }
  .mz-intro__rail { display: none; }
}

/* ── 10. REDUCCION DE MOVIMIENTO ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mz-scene__bloom { animation: none; }
  .mz-parallax, .mz-skyline { transform: none !important; }
  [data-mz-rise] { opacity: 1; transform: none; }
  .mz-reveal .w { color: var(--mz-rev-on, var(--ink)); }
}


/* ============================================================
   11. CAPA DE SECCIONES — el lenguaje del hero, en el resto
   Inyectada por moodz-v2-sections.js. No toca el marcado.
   ============================================================ */

.mz-sec { position: relative; isolation: isolate; }
/* Costura y ornamento van DEBAJO del contenido con z-index negativo:
   asi no hay que tocar el posicionamiento de nada que ya existiera.
   .mz-sec tiene isolation:isolate, de modo que el -1 no se escapa
   por detras del fondo de la seccion. */
.mz-seam, .mz-secdeco { z-index: -1; }

/* ── Costura: funde con el color de la seccion anterior ──── */
.mz-seam {
  position: absolute; top: 0; left: 0; right: 0;
  height: clamp(44px, 6vh, 82px);
  pointer-events: none;
}

/* ── Ornamento Art Deco con parallax propio ──────────────── */
.mz-secdeco {
  position: absolute; inset: -8% 0;
  z-index: 0; pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 84px, currentColor 84px 85px);
  color: var(--gold-soft);
  /* El ornamento se queda en los margenes. La columna central donde
     va el texto queda libre: nada de lineas tras la lectura. */
  --mz-deco-mask: linear-gradient(90deg,
      #000 0%, rgba(0,0,0,.5) 13%, transparent 30%,
      transparent 70%, rgba(0,0,0,.5) 87%, #000 100%);
  -webkit-mask-image: var(--mz-deco-mask);
          mask-image: var(--mz-deco-mask);
}
.mz-sec--light .mz-secdeco { opacity: .07; }
.mz-sec--dark  .mz-secdeco { opacity: .20; color: var(--gold); }

/* Un halo dorado muy tenue da el volumen que tiene el hero */
.mz-sec::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 34% at 50% 0%, rgba(212,165,55,.03), transparent 58%);
}
.mz-sec--dark::before {
  background: radial-gradient(ellipse 74% 42% at 50% 0%, rgba(212,165,55,.09), transparent 62%);
}

/* ── Entradas: viaje mas corto que en el hero ────────────── */
.mz-js .mz-srise[data-mz-rise] { transform: translateY(18px); }
.mz-srise[data-mz-rise].in     { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mz-secdeco { display: none; }
  .mz-srise[data-mz-rise] { opacity: 1 !important; transform: none !important; }
}