/* ============================================================================
   Munay · Capa de experiencia
   ----------------------------------------------------------------------------
   Coreografía de scroll, cromática por capítulo y textura para la landing.
   Se carga después de landing-reference.css y solo actúa dentro de
   #landingView.munay-redesign. No modifica textos ni imágenes.
   ============================================================================ */

@property --fx-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #2a4538;
}

@property --fx-wash {
    syntax: "<color>";
    inherits: true;
    initial-value: #eef3f0;
}

@property --fx-deep {
    syntax: "<color>";
    inherits: true;
    initial-value: #2a4538;
}

@property --fx-flare {
    syntax: "<color>";
    inherits: true;
    initial-value: #8fc4d9;
}

/* ----------------------------------------------------------------------------
   1. Raíz: tokens de movimiento y clima por capítulo
   ---------------------------------------------------------------------------- */

#landingView.munay-redesign {
    --fx-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --fx-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
    --fx-ease-scroll: cubic-bezier(0.22, 1, 0.36, 1);
    --fx-progress: 0;
    --fx-chapter-mix: 0;
    --fx-accent: #2a4538;
    --fx-wash: #faf8f4;
    --fx-deep: #2a4538;
    --fx-flare: #f3f0e9;

    overflow-x: clip;
    overflow-y: visible;
    background: var(--fx-wash) !important;
}

body.munay-fx-on {
    overflow-x: clip;
}

/* Cada sección deja de ser un panel opaco: el clima de página se ve a través. */
#landingView.munay-redesign .munay-reference-exact {
    background: transparent !important;
}

#landingView.munay-redesign .munay-reference-exact > section:not(#munay-hero):not(#munay-interfaz) {
    border-top-color: rgba(15, 23, 42, 0.06) !important;
    background: transparent !important;
}

/* ----------------------------------------------------------------------------
   2. Atmósfera: clima completo por capítulo (no un tinte débil)
   Antes el acento solo teñía un 20–30% sobre el mismo papel frío: todos los
   capítulos se veían iguales. Ahora hay un lavado sólido + dos focos de
   contraste (deep / flare) que cambian de temperatura al cruzar sección.
   ---------------------------------------------------------------------------- */

#landingView.munay-redesign > .munay-fx-atmosphere {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    contain: layout paint style;
    background:
        radial-gradient(ellipse 80% 60% at 8% 0%, rgba(42, 69, 56, 0.04), transparent 55%),
        radial-gradient(ellipse 60% 50% at 92% 8%, rgba(184, 140, 96, 0.03), transparent 50%),
        #faf8f4;
}

#landingView.munay-redesign .munay-fx-atmosphere span {
    display: none;
}

@keyframes munayFxDrift1 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(6vw, 8vh, 0) scale(1.12); }
}

@keyframes munayFxDrift2 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
    50% { transform: translate3d(-7vw, -6vh, 0) scale(1); }
}

/* Grano: sube un poco la opacidad para que el cambio de clima se note en textura. */
#landingView.munay-redesign > .munay-fx-grain {
    display: none;
}

/* ----------------------------------------------------------------------------
   2b. Climas locales por sección
   Aunque el lavado fijo ya cambia al cruzar el umbral, cada sección aporta
   un velo propio al entrar en viewport: refuerza el salto cromático.
   ---------------------------------------------------------------------------- */

#landingView.munay-redesign #munay-reto,
#landingView.munay-redesign #munay-producto,
#landingView.munay-redesign #munay-interfaz,
#landingView.munay-redesign #munay-como-funciona,
#landingView.munay-redesign #munay-para-quien,
#landingView.munay-redesign #munay-seguridad,
#landingView.munay-redesign #munay-equipo,
#landingView.munay-redesign #munay-demo,
#landingView.munay-redesign #munay-hero {
    --climate-wash: #faf8f4;
    --climate-deep: #2a4538;
    --climate-flare: #f3f0e9;
    --climate-accent: #2a4538;
}

/* Velo local + trazo superior: sustituye el hairline de 1px para que el
   clima de la sección se note al entrar, no solo el acento global. */
#landingView.munay-redesign .munay-reference-exact > section:not(#munay-hero)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    height: auto;
    left: 0;
    right: 0;
    top: 0;
    background: transparent;
}

/* Tarjetas: superficie ligeramente teñida del clima activo, no blanco puro. */
#landingView.munay-redesign .munay-challenge-card,
#landingView.munay-redesign .munay-product-feature,
#landingView.munay-redesign .munay-interface-card,
#landingView.munay-redesign .munay-process-step,
#landingView.munay-redesign .munay-audience-card,
#landingView.munay-redesign .munay-demo-card,
#landingView.munay-redesign .munay-process-summary,
#landingView.munay-redesign #munay-seguridad .rounded-2xl {
    background: #fffcf7 !important;
    border-color: rgba(38, 34, 28, 0.09) !important;
    box-shadow: 0 2px 8px rgba(38, 32, 24, 0.05), 0 12px 32px rgba(38, 32, 24, 0.07) !important;
}

/* ----------------------------------------------------------------------------
   3. HUD: barra de progreso y raíl de capítulos
   ---------------------------------------------------------------------------- */

#landingView.munay-redesign > .munay-fx-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    height: 2px;
    pointer-events: none;
    background: rgba(38, 34, 28, 0.05);
}

#landingView.munay-redesign .munay-fx-progress i {
    display: block;
    height: 100%;
    transform-origin: left center;
    transform: scaleX(var(--fx-progress));
    background: var(--fx-accent);
    box-shadow: none;
}

#landingView.munay-redesign > .munay-fx-rail {
    position: fixed;
    top: 50%;
    right: 18px;
    z-index: 45;
    display: none;
    flex-direction: column;
    gap: 2px;
    transform: translateY(-50%);
}

@media (min-width: 1180px) {
    #landingView.munay-redesign > .munay-fx-rail {
        display: flex;
    }
}

#landingView.munay-redesign .munay-fx-rail__item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 7px 4px;
    color: var(--muted-foreground);
    font-family: "DM Mono", monospace;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;
    opacity: 0.42;
    transition: opacity 320ms ease, color 320ms ease;
}

#landingView.munay-redesign .munay-fx-rail__name {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width 420ms var(--fx-ease), opacity 260ms ease;
}

#landingView.munay-redesign .munay-fx-rail__tick {
    width: 14px;
    height: 1px;
    flex: 0 0 auto;
    background: currentColor;
    transition: width 420ms var(--fx-ease), background 320ms ease, box-shadow 320ms ease;
}

#landingView.munay-redesign .munay-fx-rail__item:hover,
#landingView.munay-redesign .munay-fx-rail__item:focus-visible {
    opacity: 1;
    color: var(--foreground);
}

#landingView.munay-redesign .munay-fx-rail__item:hover .munay-fx-rail__name,
#landingView.munay-redesign .munay-fx-rail__item:focus-visible .munay-fx-rail__name,
#landingView.munay-redesign .munay-fx-rail__item[aria-current="true"] .munay-fx-rail__name {
    max-width: 11rem;
    opacity: 1;
}

#landingView.munay-redesign .munay-fx-rail__item[aria-current="true"] {
    opacity: 1;
    color: var(--fx-accent);
}

#landingView.munay-redesign .munay-fx-rail__item[aria-current="true"] .munay-fx-rail__tick {
    width: 30px;
    background: var(--fx-accent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--fx-accent) 70%, transparent);
}

/* ----------------------------------------------------------------------------
   4. Navegación: estado al hacer scroll + enlace activo
   ---------------------------------------------------------------------------- */

#landingView.munay-redesign #navbar {
    transition: background 420ms ease, box-shadow 420ms ease, border-color 420ms ease;
}

#landingView.munay-redesign #navbar.ref-scrolled {
    background: rgba(250, 248, 244, 0.94) !important;
    border-bottom: 1px solid rgba(38, 34, 28, 0.09) !important;
    box-shadow: 0 1px 3px rgba(38, 32, 24, 0.05), 0 8px 24px rgba(38, 32, 24, 0.06) !important;
    backdrop-filter: blur(16px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.1) !important;
}

#landingView.munay-redesign #navbar .landing-nav-bar {
    transition: height 420ms var(--fx-ease);
}

#landingView.munay-redesign #navbar.ref-scrolled .landing-nav-bar {
    height: 58px;
}

#landingView.munay-redesign #navbar .landing-nav-link {
    position: relative;
}

#landingView.munay-redesign #navbar .landing-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1.5px;
    border-radius: 999px;
    background: var(--fx-accent);
    opacity: 0;
    transform: scaleX(0.2);
    transform-origin: left center;
    transition: opacity 280ms ease, transform 420ms var(--fx-ease);
}

#landingView.munay-redesign #navbar .landing-nav-link[aria-current="true"] {
    color: var(--foreground) !important;
}

#landingView.munay-redesign #navbar .landing-nav-link[aria-current="true"]::after {
    opacity: 0.9;
    transform: scaleX(1);
}

/* ----------------------------------------------------------------------------
   5. Vocabulario de entrada
   Palabras que suben desde una máscara (no hay fade+blur genérico).
   ---------------------------------------------------------------------------- */

/* Sin relleno horizontal: cualquier ancho extra por palabra alteraría los
   saltos de línea del titular. El relleno vertical solo abre espacio para
   ascendentes y descendentes, y se descuenta con el margen negativo. */
#landingView.munay-redesign .munay-fx-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding: 0.22em 0 0.28em;
    margin: -0.22em 0 -0.28em;
}

/* Los envoltorios son <span>, así que quedan al alcance de reglas del tipo
   `.munay-hero-title span { display: block }`. Se aíslan de toda herencia
   tipográfica ajena para no alterar los saltos de línea ni el color. */
#landingView.munay-redesign .munay-reference-exact span.munay-fx-w,
#landingView.munay-redesign .munay-reference-exact span.munay-fx-c {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

#landingView.munay-redesign .munay-reference-exact span.munay-fx-w {
    display: inline-block;
}

#landingView.munay-redesign .munay-reference-exact span.munay-fx-c {
    display: inline-block;
}

#landingView.munay-redesign .munay-fx-w > i {
    display: inline-block;
    font-style: inherit;
    font-weight: inherit;
    transform: translate3d(0, 108%, 0) rotate(2deg);
    transition: transform 820ms var(--fx-ease-scroll);
    transition-delay: calc(var(--fx-wi, 0) * 34ms + var(--fx-base, 0ms));
}

/* Si las fuentes aún no están listas, no ocultar titulares bajo máscaras. */
html.munay-fonts-pending #landingView.munay-redesign [data-fx="text"] .munay-fx-w > i,
html.munay-fonts-pending #landingView.munay-redesign [data-fx="text"] .munay-fx-c {
    transform: none;
    opacity: 1;
}

#landingView.munay-redesign [data-fx-in] .munay-fx-w > i {
    transform: none;
}

#landingView.munay-redesign .munay-fx-c {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 0.3em, 0);
    transition: opacity 320ms linear, transform 480ms var(--fx-ease-scroll);
    transition-delay: calc(var(--fx-ci, 0) * 20ms + var(--fx-base, 0ms));
}

#landingView.munay-redesign [data-fx-in] .munay-fx-c {
    opacity: 1;
    transform: none;
}

/* `--fx-shift` deja que el hero superponga su parallax sin pisar la entrada. */
#landingView.munay-redesign [data-fx="rise"] {
    opacity: 0;
    transform: translate3d(0, calc(14px + var(--fx-shift, 0px)), 0);
    transition:
        opacity 480ms var(--fx-ease-scroll),
        transform 620ms var(--fx-ease-scroll);
    transition-delay: var(--fx-base, 0ms);
}

#landingView.munay-redesign [data-fx="rise"][data-fx-in] {
    opacity: 1;
    transform: translate3d(0, var(--fx-shift, 0px), 0);
}

/* Las tarjetas entran desde su propio lado, no todas hacia arriba. */
#landingView.munay-redesign [data-fx="card"] {
    opacity: 0;
    transform: translate3d(var(--fx-dx, 0px), 26px, 0) rotate(var(--fx-rot, 0deg));
    transition:
        opacity 520ms var(--fx-ease-scroll),
        transform 680ms var(--fx-ease-scroll);
    transition-delay: calc(var(--fx-i, 0) * 36ms);
}

#landingView.munay-redesign [data-fx="card"][data-fx-in] {
    opacity: 1;
    transform: none;
}

/* Las imágenes se descubren con una cortina y un asentamiento de escala. */
#landingView.munay-redesign [data-fx="media"] {
    clip-path: inset(0 0 100% 0);
    transform: scale(1.05);
    transition:
        clip-path 760ms var(--fx-ease-scroll),
        transform 900ms var(--fx-ease-scroll);
    transition-delay: calc(var(--fx-i, 0) * 36ms + 60ms);
}

#landingView.munay-redesign [data-fx="media"][data-fx-in] {
    clip-path: inset(0 0 0 0);
    transform: none;
}

/* Los números fantasma toman el clima profundo, no un tinte al 15%. */
#landingView.munay-redesign .munay-reference-exact > section:not(#munay-hero)::after {
    transform: translate3d(0, calc(var(--fx-section-p, 0) * -32px), 0);
    color: rgba(15, 23, 42, 0.04);
}

/* ----------------------------------------------------------------------------
   6. Hero cinematográfico
   ---------------------------------------------------------------------------- */

#landingView.munay-redesign .munay-visual-hero--cinematic {
    --section-accent: #d6e8dc;
    background: transparent;
}

#landingView.munay-redesign .munay-visual-hero--cinematic::before {
    display: none;
}

@media (max-width: 640px) {
    #landingView.munay-redesign .munay-visual-hero__scroll {
        display: none;
    }
}

/* Hero: entrada suave por bloques, sin cortinilla tipográfica */
#landingView.munay-redesign #munay-hero [data-fx="rise"]:not([data-fx-in]) {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
}

#landingView.munay-redesign #munay-hero [data-fx-in][data-fx="rise"] {
    opacity: 1;
    transform: translate3d(0, var(--fx-shift, 0px), 0);
}

/* Dos líneas limpias — "Bienestar emocional" / "visible y accionable" — en
   lugar de cinco palabras apiladas. Solo desde tablet: por debajo manda el
   escalado móvil de landing-reference.css. */
@media (min-width: 641px) and (max-width: 1023px) {
    #landingView.munay-redesign .munay-visual-hero__content {
        max-width: 860px;
    }

    #landingView.munay-redesign .munay-visual-hero .munay-hero-title {
        max-width: none;
        font-size: clamp(2.6rem, 5.5vw, 4.4rem);
    }
}

@media (min-width: 1024px) {
    #landingView.munay-redesign .munay-visual-hero .munay-hero-title {
        max-width: 12ch;
    }
}

/* El contenido del hero se hunde a distintas velocidades: da profundidad. */
#landingView.munay-redesign .munay-visual-hero__content > * {
    --fx-shift: calc(var(--fx-hero-p, 0) * var(--fx-depth, 40px) * -1);
}

#landingView.munay-redesign .munay-visual-hero__kicker,
#landingView.munay-redesign .munay-visual-hero .munay-hero-title {
    transform: translate3d(0, var(--fx-shift), 0);
}

#landingView.munay-redesign .munay-visual-hero__kicker { --fx-depth: 22px; }
#landingView.munay-redesign .munay-visual-hero .munay-hero-title { --fx-depth: 62px; }
#landingView.munay-redesign .munay-visual-hero__content > p { --fx-depth: 96px; }
#landingView.munay-redesign .munay-visual-hero__actions { --fx-depth: 124px; }
#landingView.munay-redesign .munay-visual-hero__trust { --fx-depth: 150px; }

#landingView.munay-redesign .munay-visual-hero__content > p,
#landingView.munay-redesign .munay-visual-hero__actions,
#landingView.munay-redesign .munay-visual-hero__trust {
    opacity: calc(1 - var(--fx-hero-p, 0) * 1.5);
}

/* Línea de señal: dibuja el pulso socioemocional que Munay lee. */
#landingView.munay-redesign .munay-fx-signal {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8%;
    z-index: 1;
    height: 130px;
    pointer-events: none;
    opacity: calc(0.75 - var(--fx-hero-p, 0) * 0.75);
}

#landingView.munay-redesign .munay-fx-signal svg {
    display: block;
    width: 100%;
    height: 100%;
}

#landingView.munay-redesign .munay-fx-signal path {
    fill: none;
    stroke: rgba(42, 69, 56, 0.25);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    filter: none;
}

#landingView.munay-redesign .munay-fx-signal.is-drawn path {
    animation: munayFxDraw 2600ms var(--fx-ease) 620ms forwards;
}

@keyframes munayFxDraw {
    to { stroke-dashoffset: 0; }
}

/* ----------------------------------------------------------------------------
   7. Recorrido guiado: "Cómo funciona"
   El contexto se ancla a la izquierda y los tres movimientos pasan a su lado.
   ---------------------------------------------------------------------------- */

#landingView.munay-redesign .munay-process-section {
    overflow: visible;
}

/* El contexto (titular, entradilla e índice) permanece anclado mientras los
   tres movimientos pasan por delante: nada se recorta ni se queda huérfano. */
#landingView.munay-redesign .munay-process-aside {
    position: sticky;
    top: clamp(88px, 11vh, 128px);
    padding-bottom: clamp(24px, 4vw, 48px);
}

#landingView.munay-redesign .munay-process-track {
    padding-bottom: clamp(8px, 3vw, 32px);
}

/* Relleno progresivo del raíl del índice. */
#landingView.munay-redesign .munay-process-index ol::after {
    bottom: auto;
    height: calc((100% - 12px) * var(--fx-scene, 0));
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--fx-accent) 78%, transparent),
        color-mix(in srgb, var(--fx-accent) 34%, transparent));
    box-shadow: 0 0 10px color-mix(in srgb, var(--fx-accent) 40%, transparent);
    transition: height 520ms var(--fx-ease-soft);
}

#landingView.munay-redesign .munay-process-index a[data-fx-state="active"] {
    color: var(--foreground);
}

#landingView.munay-redesign .munay-process-index a[data-fx-state="active"] .munay-process-index__num {
    color: var(--fx-accent);
    opacity: 1;
}

#landingView.munay-redesign .munay-process-step {
    scroll-margin-top: clamp(96px, 12vh, 140px);
    transition:
        opacity 620ms var(--fx-ease-soft),
        transform 700ms var(--fx-ease),
        box-shadow 520ms ease,
        border-color 520ms ease;
}

/* Los pasos inactivos nunca pierden legibilidad: sólo bajan de relieve. */
#landingView.munay-redesign .munay-process-step[data-fx-state="future"],
#landingView.munay-redesign .munay-process-step[data-fx-state="past"] {
    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

#landingView.munay-redesign .munay-process-step[data-fx-in][data-fx-state="active"] {
    transform: translate3d(0, -4px, 0);
}

#landingView.munay-redesign .munay-process-step[data-fx-state="active"] {
    border-color: color-mix(in srgb, var(--fx-accent) 40%, transparent);
    box-shadow:
        0 28px 64px rgba(15, 23, 42, 0.12),
        0 0 0 1px color-mix(in srgb, var(--fx-accent) 22%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

#landingView.munay-redesign .munay-process-step[data-fx-state="active"]::after {
    opacity: 0.9;
    transform: scaleY(1);
}

#landingView.munay-redesign .munay-process-step__marker {
    transition: background 520ms ease, color 520ms ease, border-color 520ms ease, transform 620ms var(--fx-ease);
}

#landingView.munay-redesign .munay-process-step[data-fx-state="active"] .munay-process-step__marker {
    border-color: transparent;
    background: var(--fx-accent);
    color: #ffffff;
    transform: scale(1.06);
}

#landingView.munay-redesign .munay-process-step:focus-visible {
    outline: 2px solid var(--fx-accent);
    outline-offset: 6px;
}

/* ----------------------------------------------------------------------------
   8. Galería horizontal: "Producto en uso"
   El scroll vertical recorre lateralmente las pantallas reales.
   ---------------------------------------------------------------------------- */

#landingView.munay-redesign .munay-fx-deck {
    position: relative;
}

#landingView.munay-redesign .munay-fx-deck__stage {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    width: 100vw;
    height: 100svh;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
}

#landingView.munay-redesign .munay-fx-deck__stage::after {
    content: "";
    position: absolute;
    left: max(24px, calc((100vw - 1152px) / 2));
    bottom: 46px;
    width: 92px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        var(--fx-accent) calc(var(--fx-scene, 0) * 100%),
        color-mix(in srgb, var(--fx-accent) 16%, transparent) calc(var(--fx-scene, 0) * 100%));
}

#landingView.munay-redesign .munay-fx-deck .munay-interface-gallery {
    display: flex;
    align-items: stretch;
    gap: clamp(18px, 3vw, 30px);
    padding-inline: max(24px, calc((100vw - 1152px) / 2));
    will-change: transform;
    backface-visibility: hidden;
}

#landingView.munay-redesign .munay-fx-deck .munay-interface-card-grid {
    display: contents;
}

#landingView.munay-redesign .munay-fx-deck .munay-interface-card {
    flex: 0 0 min(66vw, 660px);
    grid-column: auto;
    grid-template-rows: auto minmax(0, 1fr);
    height: min(74svh, 640px);
}

#landingView.munay-redesign .munay-fx-deck .munay-interface-card--hero {
    flex-basis: min(86vw, 980px);
    grid-template-columns: minmax(210px, 0.36fr) minmax(0, 0.64fr);
    grid-template-rows: minmax(0, 1fr);
}

#landingView.munay-redesign .munay-fx-deck .munay-interface-card__media {
    min-height: 0;
    height: 100%;
}

#landingView.munay-redesign .munay-fx-deck .munay-interface-card__media img,
#landingView.munay-redesign .munay-fx-deck .munay-interface-card:not(.munay-interface-card--hero) .munay-interface-card__media img {
    max-height: 100%;
}

/* ----------------------------------------------------------------------------
   9. Micro-interacción: foco de luz que sigue al puntero
   ---------------------------------------------------------------------------- */

#landingView.munay-redesign .munay-fx-lit {
    position: relative;
}

#landingView.munay-redesign .munay-fx-lit > .munay-fx-lit__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(240px circle at var(--fx-mx, 50%) var(--fx-my, 50%),
        color-mix(in srgb, var(--fx-accent) 16%, transparent), transparent 72%);
    transition: opacity 380ms ease;
}

#landingView.munay-redesign .munay-fx-lit:hover > .munay-fx-lit__glow {
    opacity: 1;
}

#landingView.munay-redesign .munay-fx-magnetic {
    transform: translate3d(var(--fx-magnet-x, 0px), var(--fx-magnet-y, 0px), 0);
    transition: transform 520ms var(--fx-ease);
}

#landingView.munay-redesign .munay-fx-magnetic:active {
    transition: transform 120ms ease;
}

/* ----------------------------------------------------------------------------
   10. Relato fotográfico
   La fotografía no decora: conecta la señal, la voz y el acompañamiento.
   ---------------------------------------------------------------------------- */

#landingView.munay-redesign .munay-story-frame,
#landingView.munay-redesign .munay-process-story {
    position: relative;
    margin: 0;
    overflow: hidden;
    isolation: isolate;
    background: color-mix(in srgb, var(--fx-accent) 12%, #f2f1ec);
}

#landingView.munay-redesign .munay-story-frame__media,
#landingView.munay-redesign .munay-process-story__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: inset(0 0 100% 0 round 30px);
    transition: clip-path 820ms var(--fx-ease-scroll);
}

#landingView.munay-redesign .munay-story-frame img,
#landingView.munay-redesign .munay-process-story img {
    width: 100%;
    height: 112%;
    object-fit: cover;
    object-position: center;
    transform: translate3d(0, calc(var(--fx-section-p, 0.35) * -5%), 0) scale(1.04);
    filter: saturate(0.84) contrast(1.02);
    will-change: transform;
}

#landingView.munay-redesign .munay-story-frame::after,
#landingView.munay-redesign .munay-process-story::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 42%, rgba(11, 18, 16, 0.74) 100%),
        linear-gradient(110deg, color-mix(in srgb, var(--fx-accent) 20%, transparent), transparent 54%);
}

#landingView.munay-redesign .munay-story-frame figcaption,
#landingView.munay-redesign .munay-process-story figcaption {
    position: absolute;
    z-index: 2;
    left: clamp(20px, 3vw, 38px);
    right: clamp(20px, 3vw, 38px);
    bottom: clamp(20px, 3vw, 34px);
    color: #ffffff;
}

#landingView.munay-redesign .munay-story-frame figcaption {
    display: grid;
    gap: 7px;
    max-width: 34rem;
}

#landingView.munay-redesign .munay-story-frame figcaption span,
#landingView.munay-redesign .munay-process-story figcaption {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.67rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#landingView.munay-redesign .munay-story-frame figcaption strong {
    color: #ffffff;
    font-family: "Lora", serif;
    font-size: clamp(1.3rem, 2.2vw, 2rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

#landingView.munay-redesign [data-fx="story"] {
    opacity: 0;
    transform: translate3d(0, 42px, 0) scale(0.985);
    transition:
        opacity 700ms ease,
        transform 1300ms var(--fx-ease);
}

#landingView.munay-redesign [data-fx="story"][data-fx-in] {
    opacity: 1;
    transform: none;
}

#landingView.munay-redesign [data-fx="story"][data-fx-in] .munay-story-frame__media,
#landingView.munay-redesign [data-fx="story"][data-fx-in] .munay-process-story__media {
    clip-path: inset(0 0 0 0 round 30px);
}

#landingView.munay-redesign .munay-story-frame:hover img,
#landingView.munay-redesign .munay-process-story:hover img {
    transform: translate3d(0, calc(var(--fx-section-p, 0.35) * -7%), 0) scale(1.1);
    filter: saturate(1) contrast(1.04);
}

#landingView.munay-redesign .munay-story-frame--challenge {
    min-height: clamp(340px, 48vw, 560px);
    margin: clamp(38px, 6vw, 72px) 0 clamp(44px, 7vw, 82px);
    border-radius: 30px;
}

#landingView.munay-redesign .munay-story-frame--challenge img {
    object-position: center 48%;
}

#landingView.munay-redesign .munay-story-diptych {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
    gap: clamp(16px, 2.4vw, 28px);
    align-items: end;
    margin: clamp(34px, 5vw, 60px) 0 clamp(48px, 7vw, 86px);
}

#landingView.munay-redesign .munay-story-diptych .munay-story-frame {
    border-radius: 28px;
}

#landingView.munay-redesign .munay-story-frame--voice {
    min-height: clamp(430px, 56vw, 660px);
}

#landingView.munay-redesign .munay-story-frame--voice img {
    object-position: center 38%;
}

#landingView.munay-redesign .munay-story-frame--team {
    min-height: clamp(310px, 38vw, 460px);
    transition-delay: 130ms;
}

#landingView.munay-redesign .munay-story-frame--team img {
    object-position: center 46%;
}

#landingView.munay-redesign .munay-process-summary {
    overflow: hidden;
}

#landingView.munay-redesign .munay-process-story {
    min-height: clamp(240px, 24vw, 320px);
    margin: clamp(14px, 1.6vw, 20px) calc(clamp(20px, 2.4vw, 28px) * -1) calc(clamp(20px, 2.4vw, 28px) * -1);
    border-radius: 0 0 25px 25px;
}

#landingView.munay-redesign .munay-process-story figcaption {
    bottom: 18px;
}

#landingView.munay-redesign .munay-process-story img {
    object-position: center 42%;
}

/* ----------------------------------------------------------------------------
   11. Adaptaciones y accesibilidad
   ---------------------------------------------------------------------------- */

@media (max-width: 899px) {
    #landingView.munay-redesign .munay-story-diptych {
        grid-template-columns: 1fr;
    }

    #landingView.munay-redesign .munay-story-frame--voice,
    #landingView.munay-redesign .munay-story-frame--team {
        min-height: min(112vw, 560px);
    }

    #landingView.munay-redesign .munay-fx-deck {
        height: auto !important;
    }

    #landingView.munay-redesign .munay-fx-deck__stage {
        position: static;
        width: auto;
        height: auto;
        margin-left: 0;
        overflow: visible;
    }

    #landingView.munay-redesign .munay-fx-deck__stage::after {
        display: none;
    }

    #landingView.munay-redesign .munay-fx-deck .munay-interface-gallery {
        display: grid;
        padding-inline: 0;
        transform: none !important;
    }

    #landingView.munay-redesign .munay-fx-deck .munay-interface-card-grid {
        display: grid;
    }

    #landingView.munay-redesign .munay-fx-deck .munay-interface-card {
        height: auto;
        grid-template-rows: auto;
    }

    #landingView.munay-redesign .munay-process-shell {
        grid-template-columns: 1fr;
    }

    #landingView.munay-redesign .munay-process-aside {
        position: static;
        padding-bottom: 0;
    }

    /* En móvil el índice sobra: los pasos ya se leen seguidos. */
    #landingView.munay-redesign .munay-process-index {
        display: none;
    }

    #landingView.munay-redesign .munay-process-step[data-fx-in][data-fx-state="active"] {
        transform: none;
    }

    #landingView.munay-redesign .munay-fx-signal {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #landingView.munay-redesign .munay-fx-atmosphere span,
    #landingView.munay-redesign .munay-fx-signal.is-drawn path {
        animation: none !important;
    }

    #landingView.munay-redesign [data-fx="story"],
    #landingView.munay-redesign .munay-story-frame__media,
    #landingView.munay-redesign .munay-process-story__media,
    #landingView.munay-redesign .munay-fx-w > i,
    #landingView.munay-redesign .munay-fx-c,
    #landingView.munay-redesign [data-fx="rise"],
    #landingView.munay-redesign [data-fx="card"],
    #landingView.munay-redesign [data-fx="media"] {
        opacity: 1 !important;
        clip-path: none !important;
        transform: none !important;
        transition: none !important;
    }

    #landingView.munay-redesign .munay-story-frame img,
    #landingView.munay-redesign .munay-process-story img,
    #landingView.munay-redesign .munay-visual-hero__content > * {
        transform: none !important;
        filter: none !important;
    }

    #landingView.munay-redesign .munay-fx-deck__stage {
        position: static;
        width: auto;
        height: auto;
        min-height: 0;
        margin-left: 0;
        overflow: visible;
    }

    #landingView.munay-redesign .munay-fx-deck {
        height: auto !important;
    }

    #landingView.munay-redesign .munay-fx-deck .munay-interface-gallery {
        display: grid;
        padding-inline: 0;
        transform: none !important;
    }

    #landingView.munay-redesign .munay-fx-deck .munay-interface-card-grid {
        display: grid;
    }

    #landingView.munay-redesign .munay-fx-deck .munay-interface-card {
        height: auto;
        grid-template-rows: auto;
    }

    #landingView.munay-redesign .munay-process-step[data-fx-state] {
        opacity: 1;
        transform: none;
        filter: none;
    }

    #landingView.munay-redesign .munay-process-index ol::after {
        transition: none;
    }

    #landingView.munay-redesign .munay-fx-signal path {
        stroke-dashoffset: 0;
    }
}