/* =====================================================================
   RELATO GUIADO · Destino La Rioja
   Ubicación sugerida: wwwroot/recursos/css/atractivo/atractivo-relato.css

   Idea visual: el guía es un holograma y todo lo que cuenta "se proyecta"
   desde él hacia el escenario con un barrido de luz (clase .rel-proy).
   Todo lo demás se mantiene quieto y legible.
   ===================================================================== */
/* Las fuentes (Albert Sans, Bricolage Grotesque, Young Serif) las carga atractivo-relato.js recién cuando se abre el relato:
   un @import acá bloqueaba el dibujado de TODA la página mientras se bajaba la hoja de Google Fonts. */

.rel-root,
.rel-root *,
.rel-root *::before,
.rel-root *::after {
    box-sizing: border-box;
}

.rel-root {
    --rc: #8B1D1D;
    --rc-rgb: 139, 29, 29;
    /* Paleta (el tema por logo de las empresas redefine estas variables) */
    --oro: #E2B857;
    --oro-rgb: 226, 184, 87;
    --oro-luz: #efc96d;
    --sobre-oro: #2a1408;
    --sobre-oro-rgb: 42, 20, 8;
    --arena: #F3E7D3;
    --arena-rgb: 243, 231, 211;
    --tinto: #150911;
    --tinto-rgb: 21, 9, 17;
    --holo: #FFD9A0;
    --holo-rgb: 255, 217, 160;
    --halo-rgb: 255, 200, 120;
    --luz-rgb: 255, 230, 190;
    --humo: rgba(var(--arena-rgb), .68);
    --linea: rgba(var(--oro-rgb), .42);
    --serif: 'Young Serif', Georgia, 'Times New Roman', serif;
    --sans: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ease: cubic-bezier(.22, .8, .2, 1);
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--tinto);
    color: var(--arena);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
}

    .rel-root.rel-abierto {
        opacity: 1;
        visibility: visible;
        transition: opacity .35s ease;
    }

/* reset suave (especificidad 0: no pisa nuestras clases) */
:where(.rel-root) h2, :where(.rel-root) h3, :where(.rel-root) p, :where(.rel-root) ul, :where(.rel-root) li {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    letter-spacing: normal;
    text-transform: none;
    list-style: none;
}

:where(.rel-root) button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

:where(.rel-root) a {
    color: inherit;
}

.rel-root button:focus-visible,
.rel-root a:focus-visible {
    outline: 2px solid var(--oro);
    outline-offset: 3px;
    border-radius: 8px;
}

.rel-ico {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    display: inline-block;
    vertical-align: middle;
}

.rel-ico-lleno {
    fill: currentColor;
    stroke: none;
}

/* ---------------------------------------------------------------------
   FONDO (foto de la escena, desenfocada y teñida con el color del atractivo)
   --------------------------------------------------------------------- */
.rel-fondo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.rel-fondo-img {
    position: absolute;
    inset: -7%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.4s ease;
    filter: blur(16px) saturate(1.1) brightness(.55);
}

    .rel-fondo-img.rel-visible {
        opacity: 1;
        animation: relDeriva 28s ease-in-out infinite alternate;
    }

.rel-fondo-velo {
    position: absolute;
    inset: 0;
    background: radial-gradient(90% 80% at 16% 72%, rgba(var(--rc-rgb), .42), transparent 62%), linear-gradient(180deg, rgba(var(--tinto-rgb), .5) 0%, rgba(var(--tinto-rgb), .9) 100%);
}

/* ---------------------------------------------------------------------
   BARRA SUPERIOR
   --------------------------------------------------------------------- */
.rel-top {
    position: relative;
    z-index: 4;
    padding: 14px clamp(14px, 3vw, 36px) 0;
}

.rel-segmentos {
    display: flex;
    gap: 4px;
    height: 16px;
    align-items: center;
}

.rel-seg {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    position: relative;
}

    .rel-seg::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 3px;
        margin-top: -1.5px;
        border-radius: 2px;
        background: rgba(var(--arena-rgb), .22);
    }

    .rel-seg i {
        position: absolute;
        left: 0;
        top: 50%;
        height: 3px;
        margin-top: -1.5px;
        width: 0;
        border-radius: 2px;
        background: var(--oro);
        display: block;
    }

.rel-top-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
}

.rel-nombre-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--arena);
}

    .rel-nombre-mini span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.rel-vivo {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--oro);
    flex: none;
    box-shadow: 0 0 0 0 rgba(var(--oro-rgb), .6);
}

.rel-hablando .rel-vivo {
    animation: relLatido 1.6s ease-out infinite;
}

.rel-acciones {
    display: flex;
    gap: 8px;
    flex: none;
}

.rel-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(var(--arena-rgb), .28);
    background: rgba(var(--tinto-rgb), .45);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

    .rel-btn:hover {
        background: rgba(var(--arena-rgb), .12);
        border-color: rgba(var(--arena-rgb), .55);
    }

    .rel-btn[aria-pressed="true"] {
        background: var(--oro);
        border-color: var(--oro);
        color: var(--sobre-oro);
    }

    .rel-btn .rel-ico {
        width: 1.25rem;
        height: 1.25rem;
    }

/* ---------------------------------------------------------------------
   CUERPO: guía a la izquierda, escenario a la derecha
   --------------------------------------------------------------------- */
.rel-cuerpo {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(250px, 33%) minmax(0, 1fr);
}

/* ---------- GUÍA HOLOGRÁFICA ---------- */
.rel-guia {
    position: relative;
    min-height: 0;
    overflow: hidden;
}

.rel-holo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.rel-holo-haz {
    position: absolute;
    bottom: 9%;
    left: 50%;
    width: 76%;
    height: 84%;
    transform: translateX(-50%);
    background: linear-gradient(to top, rgba(var(--holo-rgb), .30), rgba(var(--holo-rgb), .07) 58%, transparent);
    clip-path: polygon(14% 100%, 86% 100%, 100% 0, 0 0);
    animation: relPulso 4.2s ease-in-out infinite;
    pointer-events: none;
}

.rel-holo-base {
    position: absolute;
    bottom: 5%;
    left: 50%;
    width: min(80%, 430px);
    aspect-ratio: 5 / 1;
    transform: translateX(-50%);
    pointer-events: none;
}

    .rel-holo-base i {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1.5px solid rgba(var(--holo-rgb), .8);
        box-shadow: 0 0 22px rgba(var(--halo-rgb), .5), inset 0 0 20px rgba(var(--halo-rgb), .3);
    }

        .rel-holo-base i:nth-child(2) {
            inset: 14% 12%;
            opacity: .6;
        }

        .rel-holo-base i:nth-child(3) {
            inset: 0;
            animation: relOnda 3.6s ease-out infinite;
        }

        .rel-holo-base i:nth-child(4) {
            inset: 0;
            animation: relOnda 3.6s ease-out 1.8s infinite;
        }

.rel-holo-figura {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 90%;
    margin-bottom: 4.2%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.rel-avatar-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    mix-blend-mode: screen; /* el negro del video se vuelve transparente */
    display: none;
    filter: drop-shadow(0 0 14px rgba(var(--holo-rgb), .35));
    animation: relParpadeo 7s steps(1) infinite;
}

.rel-con-video .rel-avatar-video {
    display: block;
}

.rel-avatar-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: min(76%, 280px);
    height: 100%;
    text-align: center;
}

.rel-con-video .rel-avatar-vacio {
    display: none;
}

.rel-avatar-vacio svg {
    width: 100%;
    height: auto;
    max-height: 78%;
    overflow: visible;
    animation: relParpadeo 7s steps(1) infinite;
}

.rel-avatar-vacio p {
    font-size: .82rem;
    color: var(--humo);
    max-width: 24ch;
}

.rel-barras {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 22px;
}

    .rel-barras b {
        width: 4px;
        height: 22%;
        border-radius: 2px;
        background: var(--holo);
        transition: height .2s ease;
    }

.rel-hablando .rel-barras b {
    animation: relBarra .9s ease-in-out infinite;
}

    .rel-hablando .rel-barras b:nth-child(2) {
        animation-delay: .15s;
    }

    .rel-hablando .rel-barras b:nth-child(3) {
        animation-delay: .3s;
    }

    .rel-hablando .rel-barras b:nth-child(4) {
        animation-delay: .45s;
    }

    .rel-hablando .rel-barras b:nth-child(5) {
        animation-delay: .6s;
    }

.rel-holo-lineas {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(var(--luz-rgb), .07) 0 1px, transparent 1px 4px);
}

.rel-holo-barrido {
    position: absolute;
    left: 0;
    right: 0;
    height: 22%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(var(--holo-rgb), .14), transparent);
    animation: relBarridoV 5.5s linear infinite;
}

.rel-particulas {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

    .rel-particulas span {
        position: absolute;
        bottom: 8%;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--holo);
        box-shadow: 0 0 8px 1px rgba(var(--holo-rgb), .8);
        opacity: 0;
        animation: relSube linear infinite;
    }

.rel-aviso-ia {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    z-index: 4;
    text-align: center;
    font-size: .72rem;
    color: rgba(var(--arena-rgb), .52);
}

/* ---------- ESCENARIO ---------- */
.rel-escenario {
    position: relative;
    min-height: 0;
    padding: clamp(8px, 2vh, 24px) clamp(16px, 4vw, 64px) clamp(8px, 2vh, 24px) clamp(8px, 2vw, 32px);
}

.rel-escena {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: inherit;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    transition: opacity .4s ease;
}

    .rel-escena::-webkit-scrollbar {
        display: none;
    }

    .rel-escena > * {
        margin-block: auto;
    }

    .rel-escena.rel-saliendo {
        opacity: 0;
        pointer-events: none;
    }

/* ---------- LA PROYECCIÓN: barrido de luz desde el guía ---------- */
.rel-proy {
    position: relative;
}

    .rel-proy:not(.rel-on) {
        visibility: hidden;
    }

    .rel-proy.rel-on {
        animation: relBarrido var(--dur, .85s) var(--ease) var(--d, 0s) backwards;
    }

        .rel-proy.rel-on::after {
            content: '';
            position: absolute;
            top: -3%;
            bottom: -3%;
            left: 0;
            width: 2px;
            pointer-events: none;
            background: linear-gradient(to bottom, transparent, var(--holo) 20%, var(--holo) 80%, transparent);
            box-shadow: 0 0 14px 3px rgba(var(--holo-rgb), .65);
            opacity: 0;
            animation: relLinea var(--dur, .85s) var(--ease) var(--d, 0s) backwards;
        }

/* ---------- ESCENAS ---------- */
/* intro */
.rel-intro {
    max-width: 900px;
    width: 100%;
}

.rel-intro-sello {
    display: inline-flex;
    align-items: center;
    gap: .7em;
    margin-bottom: clamp(10px, 2.2vh, 22px);
    font-size: clamp(.92rem, 1.4vw, 1.05rem);
    font-weight: 600;
    color: var(--oro);
}

    .rel-intro-sello::before {
        content: '';
        width: 34px;
        height: 1.5px;
        background: var(--oro);
    }

.rel-intro-titulo {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.015em;
    line-height: 1;
    font-size: clamp(2.5rem, min(8vw, 13.5vh), 6.2rem);
    text-wrap: balance;
    --dur: 1.1s;
}

.rel-intro-sub {
    margin-top: clamp(12px, 2.4vh, 26px);
    max-width: 34ch;
    color: var(--humo);
    font-size: clamp(1.05rem, min(2.2vw, 3.3vh), 1.65rem);
    line-height: 1.4;
}

/* datos */
.rel-datos {
    width: 100%;
    max-width: 860px;
}

.rel-h {
    font-family: var(--serif);
    font-weight: 400;
    color: var(--oro);
    font-size: clamp(1.15rem, min(2vw, 3vh), 1.6rem);
    margin-bottom: clamp(14px, 3vh, 30px);
}

.rel-datos-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 3.6vh, 36px) clamp(18px, 4vw, 56px);
}

.rel-dato {
    padding-left: clamp(12px, 1.4vw, 20px);
    border-left: 2px solid var(--oro);
}

.rel-dato-num {
    font-family: var(--serif);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-size: clamp(2.2rem, min(5.6vw, 9.5vh), 4.8rem);
}

.rel-dato-label {
    display: flex;
    gap: .55em;
    align-items: baseline;
    margin-top: .5em;
    line-height: 1.3;
    color: var(--humo);
    font-size: clamp(.95rem, min(1.5vw, 2.4vh), 1.2rem);
}

/* frase (relato con texto que sigue la voz) */
.rel-frase {
    max-width: 860px;
    width: 100%;
    border-left: 2px solid var(--linea);
    padding-left: clamp(14px, 2vw, 28px);
}

.rel-capitulo {
    font-family: var(--serif);
    color: var(--oro);
    margin-bottom: clamp(10px, 2vh, 20px);
    font-size: clamp(1.05rem, min(1.8vw, 2.7vh), 1.45rem);
}

.rel-frase-texto {
    font-family: var(--serif);
    line-height: 1.32;
    font-size: clamp(1.25rem, min(2.9vw, 4.7vh), 2.6rem);
}

.rel-w {
    color: rgba(var(--arena-rgb), .42);
    transition: color .25s ease, text-shadow .25s ease;
}

    .rel-w.rel-dicha {
        color: var(--arena);
    }

    .rel-w.rel-actual {
        color: var(--oro);
        text-shadow: 0 0 22px rgba(var(--oro-rgb), .5);
    }

/* imagen */
.rel-imagen {
    display: grid;
    gap: clamp(10px, 2vh, 18px);
    width: 100%;
    max-width: 880px;
}

.rel-marco {
    overflow: hidden;
    border-radius: 6px;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: min(58vh, 520px);
    background: #0b0508;
    box-shadow: 0 0 0 1px rgba(var(--holo-rgb), .38), 0 26px 70px rgba(0, 0, 0, .55), 0 0 70px rgba(var(--rc-rgb), .38);
    --dur: 1.05s;
}

    .rel-marco img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform-origin: var(--ox, 50%) var(--oy, 50%);
        animation: relKen 18s ease-out both;
    }

.rel-sin-foto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4em;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(var(--rc-rgb), .55), rgba(var(--tinto-rgb), .9));
    font-size: 3.5rem;
}

.rel-pie-foto {
    display: grid;
    gap: 6px;
}

.rel-leyenda {
    font-family: var(--serif);
    line-height: 1.3;
    font-size: clamp(1.1rem, min(2vw, 3.1vh), 1.65rem);
}

.rel-credito {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    color: var(--humo);
    font-size: .84rem;
}

    .rel-credito a {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

/* cápsulas */
.rel-capsulas {
    max-width: 880px;
    width: 100%;
}

.rel-chips {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 1.5vh, 14px) clamp(8px, 1vw, 14px);
}

.rel-chip {
    border: 1px solid var(--linea);
    background: rgba(var(--rc-rgb), .3);
    border-radius: 999px;
    padding: .5em 1.1em;
    font-size: clamp(1rem, min(1.9vw, 2.8vh), 1.4rem);
    --dur: .6s;
}

/* insider */
.rel-insider {
    max-width: 820px;
    width: 100%;
}

.rel-comilla {
    display: block;
    height: .5em;
    font-family: var(--serif);
    font-size: clamp(4.5rem, 13vh, 8.5rem);
    line-height: .7;
    color: var(--oro);
}

.rel-insider-titulo {
    font-family: var(--serif);
    font-weight: 400;
    margin-bottom: .35em;
    text-wrap: balance;
    font-size: clamp(1.6rem, min(3.6vw, 6vh), 3rem);
    line-height: 1.1;
}

.rel-insider-texto {
    font-family: var(--serif);
    line-height: 1.38;
    font-size: clamp(1.1rem, min(2.2vw, 3.6vh), 1.9rem);
}

.rel-firma {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    margin-top: clamp(12px, 2.4vh, 24px);
    color: var(--oro);
    font-weight: 600;
    font-size: 1rem;
}

/* logística */
.rel-logi {
    width: 100%;
    max-width: 940px;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr);
    gap: clamp(16px, 3vh, 30px) clamp(18px, 3.4vw, 52px);
}

.rel-horarios {
    display: grid;
    gap: clamp(10px, 2vh, 20px);
    align-content: start;
}

.rel-horario {
    padding-left: clamp(12px, 1.4vw, 20px);
    border-left: 2px solid var(--oro);
}

.rel-horario-est {
    display: flex;
    align-items: center;
    gap: .5em;
    color: var(--humo);
    font-size: 1rem;
}

.rel-horario-valor {
    font-family: var(--serif);
    line-height: 1.1;
    margin-top: .15em;
    font-size: clamp(1.5rem, min(3vw, 5vh), 2.6rem);
}

.rel-lista {
    display: grid;
    gap: clamp(8px, 1.6vh, 14px);
    align-content: start;
}

.rel-item {
    display: flex;
    gap: .7em;
    line-height: 1.38;
    font-size: clamp(.98rem, min(1.6vw, 2.5vh), 1.25rem);
}

    .rel-item .rel-ico {
        margin-top: .2em;
        color: var(--oro);
    }

.rel-pagos {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.rel-pagos-t {
    color: var(--humo);
    font-size: .95rem;
    margin-right: 4px;
}

.rel-pago {
    border: 1px solid var(--linea);
    border-radius: 999px;
    padding: .3em .9em;
    font-size: .95rem;
    --dur: .5s;
}

/* cierre */
.rel-cierre {
    max-width: 820px;
    width: 100%;
}

.rel-cierre-titulo {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.04;
    text-wrap: balance;
    font-size: clamp(2rem, min(5.4vw, 9vh), 4.2rem);
    --dur: 1s;
}

.rel-cierre-texto {
    margin-top: clamp(10px, 2vh, 20px);
    max-width: 42ch;
    color: var(--humo);
    font-size: clamp(1.05rem, min(1.9vw, 3vh), 1.4rem);
}

.rel-fin-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(18px, 4vh, 36px);
}

.rel-cta {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    padding: .85em 1.4em;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    border: 1px solid var(--linea);
    transition: transform .2s ease, background .2s ease;
}

    .rel-cta:hover {
        transform: translateY(-2px);
        background: rgba(var(--arena-rgb), .1);
    }

.rel-cta-principal {
    background: var(--oro);
    color: var(--sobre-oro);
    border-color: var(--oro);
}

    .rel-cta-principal:hover {
        background: var(--oro-luz);
    }

    .rel-cta-principal b {
        background: rgba(var(--sobre-oro-rgb), .16);
        border-radius: 999px;
        padding: .02em .6em;
        font-weight: 700;
    }

/* ---------------------------------------------------------------------
   PIE: subtítulos + controles
   --------------------------------------------------------------------- */
.rel-pie {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 clamp(14px, 3vw, 36px) clamp(10px, 2vh, 20px);
}

.rel-subtitulo {
    display: none;
    max-width: 860px;
    max-height: 5.6em;
    overflow: hidden;
    text-align: center;
    background: rgba(var(--tinto-rgb), .78);
    border-radius: 8px;
    padding: .45em .9em;
    font-size: .98rem;
    line-height: 1.4;
}

.rel-cc-on .rel-subtitulo:not(:empty) {
    display: block;
}

.rel-controles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.rel-ctl {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--arena-rgb), .3);
    background: rgba(var(--tinto-rgb), .5);
    transition: background .2s ease, border-color .2s ease;
}

    .rel-ctl:hover {
        background: rgba(var(--arena-rgb), .14);
        border-color: rgba(var(--arena-rgb), .6);
    }

    .rel-ctl .rel-ico {
        width: 1.3rem;
        height: 1.3rem;
    }

.rel-ctl-play {
    width: 58px;
    height: 58px;
    background: var(--oro);
    border-color: var(--oro);
    color: var(--sobre-oro);
}

    .rel-ctl-play:hover {
        background: var(--oro-luz);
        border-color: var(--oro-luz);
    }

    .rel-ctl-play .rel-ico {
        width: 1.5rem;
        height: 1.5rem;
    }

.rel-fin .rel-ctl-play {
    box-shadow: 0 0 0 0 rgba(var(--oro-rgb), .6);
    animation: relLatido 1.8s ease-out infinite;
}

/* ---------------------------------------------------------------------
   ANIMACIONES
   --------------------------------------------------------------------- */
@keyframes relBarrido {
    from {
        clip-path: inset(-4% 100% -4% 0);
        filter: brightness(1.7);
    }

    to {
        clip-path: inset(-4% -2% -4% 0);
        filter: brightness(1);
    }
}

@keyframes relLinea {
    0% {
        left: 0;
        opacity: 0;
    }

    6% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 2px);
        opacity: 0;
    }
}

@keyframes relKen {
    from {
        transform: scale(1.02);
    }

    to {
        transform: scale(1.11);
    }
}

@keyframes relDeriva {
    from {
        transform: scale(1.02) translate3d(-1.5%, 0, 0);
    }

    to {
        transform: scale(1.1) translate3d(1.5%, -1%, 0);
    }
}

@keyframes relPulso {
    0%, 100% {
        opacity: .72;
    }

    50% {
        opacity: 1;
    }
}

@keyframes relOnda {
    0% {
        transform: scale(.55);
        opacity: .9;
    }

    100% {
        transform: scale(1.18);
        opacity: 0;
    }
}

@keyframes relParpadeo {
    0%, 100% {
        opacity: 1;
    }

    91% {
        opacity: .9;
        transform: translateX(1px);
    }

    92% {
        opacity: 1;
        transform: none;
    }

    96% {
        opacity: .94;
    }
}

@keyframes relBarridoV {
    from {
        top: -25%;
    }

    to {
        top: 105%;
    }
}

@keyframes relSube {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    12% {
        opacity: .9;
    }

    100% {
        transform: translateY(-62vh);
        opacity: 0;
    }
}

@keyframes relBarra {
    0%, 100% {
        height: 22%;
    }

    50% {
        height: 100%;
    }
}

@keyframes relLatido {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--oro-rgb), .55);
    }

    100% {
        box-shadow: 0 0 0 14px rgba(var(--oro-rgb), 0);
    }
}

/* ---------------------------------------------------------------------
   MOBILE / PANTALLAS CHICAS
   --------------------------------------------------------------------- */
@media (max-width: 899px) {
    .rel-cuerpo {
        grid-template-columns: 1fr;
        grid-template-rows: clamp(170px, 27vh, 250px) minmax(0, 1fr);
    }

    .rel-escenario {
        padding: 6px 18px 4px;
    }

    .rel-datos-lista {
        gap: 16px 18px;
    }

    .rel-logi {
        grid-template-columns: 1fr;
    }

    .rel-frase-texto {
        font-size: clamp(1.2rem, 4.9vw, 1.7rem);
    }

    .rel-marco {
        aspect-ratio: 4 / 3;
        max-height: 36vh;
    }

    .rel-ctl {
        width: 42px;
        height: 42px;
    }

    .rel-ctl-play {
        width: 54px;
        height: 54px;
    }

    .rel-aviso-ia {
        display: none;
    }
}

@media (max-height: 560px) and (orientation: landscape) {
    .rel-controles {
        gap: 10px;
    }

    .rel-ctl {
        width: 38px;
        height: 38px;
    }

    .rel-ctl-play {
        width: 46px;
        height: 46px;
    }

    .rel-top {
        padding-top: 8px;
    }
}

/* ---------------------------------------------------------------------
   ACCESIBILIDAD: reducir movimiento
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .rel-root *, .rel-root *::before, .rel-root *::after {
        animation: none !important;
        transition-duration: .01s !important;
    }

    .rel-particulas {
        display: none;
    }
}

/* Guía holográfica dibujada en canvas (sin video) */
.rel-avatar-vacio {
    width: 100%;
    max-width: none;
    height: 100%;
    gap: 0;
}

.rel-avatar-canvas {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 14px rgba(var(--halo-rgb), .4));
}

.rel-con-video .rel-avatar-canvas {
    display: none;
}

/* Subtítulos: una sola línea que se renueva */
.rel-subtitulo {
    white-space: nowrap;
    max-height: none;
    max-width: min(860px, 100%);
    overflow: hidden;
    text-overflow: clip;
}

.rel-sub-nuevo {
    animation: relSub .28s ease both;
}

@keyframes relSub {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Profundidad: el fondo, el guía y la escena se mueven distinto con el mouse o el celular */
.rel-root {
    --px: 0;
    --py: 0;
}

.rel-fondo {
    transform: translate3d(calc(var(--px) * -16px), calc(var(--py) * -10px), 0) scale(1.04);
}

.rel-guia {
    transform: translate3d(calc(var(--px) * 8px), calc(var(--py) * 4px), 0);
}

.rel-escena > * {
    transform: perspective(1100px) rotateY(calc(var(--px) * 2.2deg)) rotateX(calc(var(--py) * -1.6deg));
}

@media (prefers-reduced-motion: reduce) {
    .rel-fondo, .rel-guia, .rel-escena > * {
        transform: none;
    }
}


/* ---------------------------------------------------------------------
   EMPRESAS: logo en la bienvenida y tarjetas (publicaciones, cercanos)
   --------------------------------------------------------------------- */
.rel-logo {
    width: clamp(84px, 14vh, 128px);
    height: clamp(84px, 14vh, 128px);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 1rem;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(var(--holo-rgb), .45), 0 12px 34px rgba(0, 0, 0, .45), 0 0 40px rgba(var(--oro-rgb), .25);
}

    .rel-logo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.rel-tarjetas {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 760px;
}

.rel-cards {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

    .rel-cards.n1 {
        grid-template-columns: minmax(0, 360px);
    }

    .rel-cards.n2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.rel-card {
    border-radius: 14px;
    overflow: hidden;
    background: rgba(var(--tinto-rgb), .62);
    border: 1px solid var(--linea);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.rel-card-foto {
    position: relative;
    aspect-ratio: 4 / 3;
    background: rgba(var(--oro-rgb), .1);
    overflow: hidden;
}

    .rel-card-foto img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.rel-card-vacia {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--oro-rgb), .6);
}

    .rel-card-vacia .rel-ico {
        width: 2rem;
        height: 2rem;
    }

.rel-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--oro);
    color: var(--sobre-oro);
    font-size: .72rem;
    font-weight: 700;
    padding: .2em .65em;
    border-radius: 999px;
}

.rel-card-txt {
    padding: .7rem .8rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.rel-card-t {
    margin: 0;
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
}

.rel-card-s {
    margin: 0;
    font-size: .82rem;
    color: var(--humo);
}

.rel-card-p {
    font-weight: 700;
    color: var(--oro);
    font-size: .95rem;
}

@media (max-width: 640px) {
    .rel-cards, .rel-cards.n2 {
        grid-template-columns: 1fr;
    }

    .rel-card {
        flex-direction: row;
    }

    .rel-card-foto {
        aspect-ratio: auto;
        width: 38%;
        flex: none;
        min-height: 84px;
    }

    .rel-card-txt {
        justify-content: center;
        padding: .5rem .7rem;
    }

    .rel-cards.n3 .rel-card-s {
        display: none;
    }
}

a.rel-cta {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* Cierre con varias acciones en pantallas angostas: botones compactos en filas */
@media (max-width: 899px) {
    .rel-cierre .rel-fin-acciones {
        gap: 8px;
    }

    .rel-cierre .rel-cta {
        padding: .55em 1em;
        font-size: .88rem;
    }
}

@media (max-width: 899px) and (max-height: 700px) {
    .rel-cierre .rel-cierre-texto {
        display: none;
    }
}


/* =====================================================================
   MODELO EMPRESA ("la vitrina") · v8
   Se activa con la clase .rel-m-empresa (opts.modelo = 'empresa').
   Mismo mundo del relato, otra puesta en escena:
   - la guía (holograma de partículas) aparece en el centro, saluda y se corre a la izquierda
   - la foto de la empresa se ve nítida de fondo, sin cajas ni paneles
   - la información se proyecta directo sobre la foto: tarjetas de vidrio, cifras enormes, texto tipo cartel
   - tipografía propia, hojas que caen y contacto solo en la escena final
   Los atractivos no se tocan: todo está bajo .rel-m-empresa.
   ===================================================================== */
.rel-m-empresa {
    --serif: 'Bricolage Grotesque', 'Albert Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --gx: 0px;
    --gx-ef: 0px;
    --gs: 1;
    background: radial-gradient(130% 100% at 14% 86%, rgba(var(--rc-rgb), 1), rgba(var(--tinto-rgb), 1) 78%);
}

    /* fondo: la foto se ve de verdad; el velo de color de marca da lectura al texto */
    .rel-m-empresa .rel-fondo-img {
        filter: blur(5px) saturate(1.15) brightness(.78);
        transition: opacity 1.4s ease, filter 1.2s ease;
    }

        .rel-m-empresa .rel-fondo-img.rel-visible {
            opacity: 1;
        }

    .rel-m-empresa .rel-fondo-velo {
        transition: opacity 1s ease;
        background: linear-gradient(90deg, rgba(var(--tinto-rgb), .86) 0%, rgba(var(--tinto-rgb), .55) 38%, rgba(var(--tinto-rgb), .3) 100%), radial-gradient(90% 90% at 12% 85%, rgba(var(--rc-rgb), .5), transparent 70%), linear-gradient(180deg, rgba(var(--tinto-rgb), .5), transparent 22%, transparent 70%, rgba(var(--tinto-rgb), .7));
    }
    /* escenas de foto: la imagen entra nítida a pantalla completa y solo queda la leyenda */
    .rel-m-empresa[data-esc="imagen"] .rel-fondo-img {
        filter: blur(0) saturate(1.1) brightness(.95);
    }

    .rel-m-empresa[data-esc="imagen"] .rel-fondo-velo {
        background: linear-gradient(90deg, rgba(var(--tinto-rgb), .55) 0%, transparent 34%), linear-gradient(180deg, rgba(var(--tinto-rgb), .4), transparent 20%, transparent 55%, rgba(var(--tinto-rgb), .82));
    }

    .rel-m-empresa .rel-marco {
        display: none;
    }

    .rel-m-empresa .rel-escena > .rel-imagen {
        max-width: 760px;
        margin-block: 0;
        align-self: flex-end;
        padding-bottom: clamp(4px, 1.5vh, 16px);
    }

    .rel-m-empresa .rel-leyenda {
        font-weight: 700;
        letter-spacing: -.02em;
        font-size: clamp(1.5rem, min(3.2vw, 6vh), 2.8rem);
        text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
    }

    .rel-m-empresa .rel-credito {
        color: rgba(255, 255, 255, .8);
    }

    .rel-m-empresa .rel-escena {
        animation: relEntra .55s var(--ease) both;
        transition: opacity .3s ease, transform .4s var(--ease);
    }

        .rel-m-empresa .rel-escena.rel-saliendo {
            transform: translateX(-26px);
        }

@keyframes relEntra {
    from {
        opacity: 0;
        transform: translateX(34px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* barra superior: placa con el logo + nombre (se oculta durante el saludo) */
.rel-m-empresa .rel-nombre-mini {
    gap: 11px;
    transition: opacity .6s ease;
}

.rel-marca-logo {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 11px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 6px 16px rgba(0, 0, 0, .35);
    transition: opacity .4s ease;
}

    .rel-marca-logo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.rel-marca-t {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

    .rel-marca-t b {
        font-family: var(--serif);
        font-weight: 700;
        font-size: 1.02rem;
        letter-spacing: -.01em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rel-marca-t small {
        font-size: .74rem;
        font-weight: 600;
        color: rgba(var(--arena-rgb), .72);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.rel-m-empresa[data-esc="intro"] .rel-marca-logo {
    opacity: 0;
}

.rel-m-empresa[data-esc="saludo"] .rel-nombre-mini {
    opacity: 0;
}

/* ---------- LA GUÍA: centro durante el saludo y después a la izquierda ---------- */
.rel-m-empresa[data-esc="saludo"] {
    --gx-ef: var(--gx);
    --gs: .76;
}

.rel-m-empresa .rel-guia {
    overflow: visible;
    transform: translate3d(calc(var(--gx-ef) + var(--px) * 8px), calc(var(--py) * 4px), 0) scale(var(--gs));
    transform-origin: 50% 100%;
    transition: transform 1.25s var(--ease);
}

.rel-m-empresa[data-esc="saludo"] .rel-escenario {
    opacity: 0;
}

.rel-m-empresa .rel-escenario {
    transition: opacity .8s ease .5s;
}

.rel-m-empresa .rel-holo-haz {
    opacity: .6;
}

/* texto del saludo (sobre la guía centrada) */
.rel-saludo-txt {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: clamp(4px, 2vh, 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 0 16px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .5s ease, transform .6s var(--ease), visibility 0s linear .5s;
}

.rel-m-empresa[data-esc="saludo"] .rel-saludo-txt {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .9s ease .7s, transform 1s var(--ease) .7s;
}

.rel-saludo-logo {
    width: clamp(48px, 8vh, 68px);
    height: clamp(48px, 8vh, 68px);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    margin-bottom: .4rem;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 10px 28px rgba(0, 0, 0, .4);
}

    .rel-saludo-logo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.rel-saludo-pre {
    font-size: clamp(.95rem, 2vh, 1.15rem);
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

.rel-saludo-nombre {
    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    font-size: clamp(1.8rem, min(4.6vw, 7vh), 3.6rem);
    text-wrap: balance;
    max-width: 24ch;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .5);
}

.rel-saludo-sub {
    font-size: clamp(.9rem, 1.8vh, 1.1rem);
    color: var(--humo);
}

/* ---------- LA INFORMACIÓN, proyectada sobre la foto ---------- */
.rel-m-empresa .rel-escenario {
    padding-right: clamp(16px, 5vw, 80px);
}

.rel-m-empresa .rel-intro-titulo {
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: .96;
    font-size: clamp(2.3rem, min(6.4vw, 12vh), 5.4rem);
    text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
}

.rel-m-empresa .rel-intro-sello {
    font-weight: 700;
}

.rel-m-empresa .rel-intro-sub {
    color: rgba(255, 255, 255, .86);
    text-shadow: 0 2px 16px rgba(0, 0, 0, .5);
}

.rel-m-empresa .rel-logo {
    border-radius: 20px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 14px 36px rgba(0, 0, 0, .45);
}

.rel-m-empresa .rel-h {
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--oro);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

.rel-m-empresa .rel-capitulo {
    font-weight: 700;
}

/* cifras enormes, sin recuadro */
.rel-m-empresa .rel-datos {
    max-width: 900px;
}

.rel-m-empresa .rel-datos-lista {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: clamp(14px, 3vh, 32px) clamp(20px, 4vw, 56px);
}

.rel-m-empresa .rel-dato {
    border-left: 0;
    padding-left: 0;
}

.rel-m-empresa .rel-dato-num {
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: .9;
    font-size: clamp(3.6rem, min(11vw, 22vh), 9rem);
    background: linear-gradient(180deg, #fff 30%, var(--oro));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .45));
}

.rel-m-empresa .rel-dato-label {
    margin-top: .35em;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

/* quiénes son: texto grande tipo cartel */
.rel-m-empresa .rel-frase {
    border-left: 0;
    padding-left: 0;
    max-width: 900px;
}

.rel-m-empresa .rel-frase-texto {
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.2;
    font-size: clamp(1.4rem, min(3vw, 5.6vh), 2.9rem);
    text-shadow: 0 3px 22px rgba(0, 0, 0, .55);
}

.rel-m-empresa .rel-w {
    color: rgba(255, 255, 255, .5);
}

    .rel-m-empresa .rel-w.rel-dicha {
        color: #fff;
    }

    .rel-m-empresa .rel-w.rel-actual {
        color: var(--oro-luz);
        text-shadow: 0 0 26px rgba(var(--oro-rgb), .7), 0 3px 22px rgba(0, 0, 0, .55);
    }

/* lo que los hace únicos */
.rel-m-empresa .rel-insider-titulo {
    font-weight: 700;
    letter-spacing: -.025em;
    font-size: clamp(1.6rem, min(3.4vw, 6vh), 3rem);
    text-shadow: 0 3px 22px rgba(0, 0, 0, .5);
}

.rel-m-empresa .rel-insider-texto {
    font-family: var(--sans);
    font-weight: 500;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .5);
}

/* tarjetas de vidrio (ofertas) */
.rel-m-empresa .rel-card {
    background: rgba(255, 255, 255, .13);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
    border-radius: 18px;
}

.rel-m-empresa .rel-card-foto {
    background: rgba(255, 255, 255, .08);
}

.rel-m-empresa .rel-card-t {
    font-weight: 700;
    letter-spacing: -.01em;
}

.rel-m-empresa .rel-card-p {
    color: var(--oro-luz);
    font-size: 1.05rem;
    font-weight: 700;
}

.rel-m-empresa .rel-card-s {
    color: rgba(255, 255, 255, .78);
}
/* cercanos: fotos altas con el nombre encima */
.rel-m-empresa .rel-tv-cercanos .rel-card {
    position: relative;
    aspect-ratio: 3 / 4;
}

.rel-m-empresa .rel-tv-cercanos .rel-card-foto {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}

.rel-m-empresa .rel-tv-cercanos .rel-card-txt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.4rem .9rem .9rem;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78));
}

/* lo práctico: cartel con corte de ticket */
.rel-m-empresa .rel-logi {
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 22px;
    padding: clamp(16px, 3vh, 30px) clamp(18px, 2.6vw, 36px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .3);
}

.rel-m-empresa .rel-horario {
    border-left: 0;
    padding-left: 0;
}

.rel-m-empresa .rel-horario-valor {
    font-weight: 700;
    letter-spacing: -.03em;
}

.rel-m-empresa .rel-pago, .rel-m-empresa .rel-chip {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-weight: 600;
}

/* contacto: solo en la escena final, botones grandes */
.rel-m-empresa .rel-cierre-titulo {
    font-weight: 700;
    letter-spacing: -.035em;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .5);
    font-size: clamp(2rem, min(5vw, 9vh), 4.2rem);
}

.rel-m-empresa .rel-cierre-texto {
    color: rgba(255, 255, 255, .86);
}

.rel-m-empresa .rel-fin-acciones {
    gap: 12px;
}

.rel-m-empresa .rel-cierre a.rel-cta {
    flex: 1 1 210px;
    max-width: 280px;
    justify-content: center;
    padding: 1em 1.4em;
    font-size: 1.05rem;
    font-weight: 700;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.rel-m-empresa .rel-cierre a.rel-cta-principal {
    background: var(--oro);
    border-color: var(--oro);
    color: var(--sobre-oro);
    box-shadow: 0 14px 34px rgba(var(--oro-rgb), .38);
}

    .rel-m-empresa .rel-cierre a.rel-cta-principal:hover {
        background: var(--oro-luz);
    }

.rel-m-empresa .rel-cierre a.rel-cta .rel-ico {
    width: 1.3em;
    height: 1.3em;
}

.rel-m-empresa .rel-cierre button.rel-cta {
    font-size: .9rem;
    opacity: .85;
}

/* hojas que caen en el escenario */
.rel-m-empresa .rel-particulas span {
    top: -6%;
    bottom: auto;
    width: 10px;
    height: 16px;
    border-radius: 0 100% 0 100%;
    box-shadow: none;
    background: rgba(var(--holo-rgb), .6);
    animation-name: relHoja;
    animation-timing-function: ease-in-out;
}

    .rel-m-empresa .rel-particulas span:nth-child(even) {
        border-radius: 100% 0 100% 0;
        width: 8px;
        height: 13px;
    }

@keyframes relHoja {
    0% {
        transform: translate(0, 0) rotate(0);
        opacity: 0;
    }

    12% {
        opacity: .65;
    }

    50% {
        transform: translate(26px, 32vh) rotate(150deg);
    }

    100% {
        transform: translate(-18px, 64vh) rotate(320deg);
        opacity: 0;
    }
}

@media (max-width: 899px) {
    .rel-m-empresa .rel-cuerpo {
        transition: grid-template-rows .9s var(--ease);
    }

    .rel-m-empresa[data-esc="saludo"] .rel-cuerpo {
        grid-template-rows: 64% minmax(0, 1fr);
    }

    .rel-m-empresa[data-esc="saludo"] {
        --gs: .96;
    }

    .rel-m-empresa .rel-saludo-txt {
        top: 64%;
    }

    .rel-saludo-nombre {
        font-size: clamp(1.9rem, 9vw, 3rem);
    }

    .rel-m-empresa .rel-escenario {
        padding-right: 18px;
    }

    .rel-marca-t small {
        display: none;
    }

    .rel-m-empresa .rel-intro-titulo {
        font-size: clamp(1.9rem, 9vw, 3rem);
    }

    .rel-m-empresa .rel-frase-texto {
        font-size: clamp(1.15rem, 4.8vw, 1.6rem);
    }

    .rel-m-empresa .rel-dato-num {
        font-size: clamp(2.8rem, 15vw, 4.6rem);
    }

    .rel-m-empresa .rel-datos-lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rel-m-empresa .rel-tv-cercanos .rel-card {
        aspect-ratio: auto;
        min-height: 96px;
        flex-direction: row;
    }

    .rel-m-empresa .rel-tv-cercanos .rel-card-foto {
        position: relative;
        inset: auto;
        width: 38%;
        aspect-ratio: auto;
    }

    .rel-m-empresa .rel-tv-cercanos .rel-card-txt {
        position: static;
        background: none;
        padding: .5rem .7rem;
    }

    .rel-m-empresa .rel-cierre a.rel-cta {
        flex: 1 1 100%;
        max-width: none;
        padding: .8em 1em;
        font-size: .98rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rel-m-empresa .rel-escena {
        animation: none;
    }

        .rel-m-empresa .rel-escena.rel-saliendo {
            transform: none;
        }

    .rel-m-empresa .rel-guia {
        transition: none;
    }
}


/* =====================================================================
   ATRACTIVOS · v10: saludo en el centro, luz de piso y efectos de entrada
   Todo bajo .rel-m-atractivo (las empresas tienen su propio bloque arriba).
   ===================================================================== */
.rel-m-atractivo {
    --gx: 0px;
    --gx-ef: 0px;
    --gs: 1;
}

    /* la guía aparece en el centro, saluda y después se corre a la izquierda */
    .rel-m-atractivo.rel-con-saludo[data-esc="saludo"] {
        --gx-ef: var(--gx);
        --gs: .66;
    }

    .rel-m-atractivo.rel-con-saludo .rel-guia {
        overflow: visible;
        transform: translate3d(calc(var(--gx-ef) + var(--px) * 8px), calc(var(--py) * 4px), 0) scale(var(--gs));
        transform-origin: 50% 100%;
        transition: transform 1.25s var(--ease);
    }

    .rel-m-atractivo.rel-con-saludo[data-esc="saludo"] .rel-escenario {
        opacity: 0;
    }

    .rel-m-atractivo.rel-con-saludo .rel-escenario {
        transition: opacity .8s ease .5s;
    }

    .rel-m-atractivo .rel-nombre-mini {
        transition: opacity .6s ease;
    }

    .rel-m-atractivo[data-esc="saludo"] .rel-nombre-mini {
        opacity: 0;
    }

    .rel-m-atractivo[data-esc="saludo"] .rel-saludo-txt {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .9s ease .7s, transform 1s var(--ease) .7s;
    }

    .rel-m-atractivo .rel-saludo-nombre {
        font-weight: 400;
        letter-spacing: -.015em;
    }

.rel-saludo-emoji {
    font-size: clamp(2rem, 6vh, 3rem);
    line-height: 1;
    margin-bottom: .2rem;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .4));
}

/* luz que sube desde abajo, bajo la información (suave: no le quita lectura al texto) */
.rel-m-atractivo .rel-escenario::before {
    content: '';
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: -2%;
    height: 46%;
    z-index: 0;
    pointer-events: none;
    opacity: .75;
    background: radial-gradient(62% 100% at 50% 100%, rgba(var(--holo-rgb), .2), rgba(var(--holo-rgb), .05) 55%, transparent 76%), repeating-linear-gradient(90deg, rgba(var(--holo-rgb), .06) 0 1px, transparent 1px 8px);
    -webkit-mask-image: linear-gradient(to top, #000, transparent 92%);
    mask-image: linear-gradient(to top, #000, transparent 92%);
    animation: relPiso 5.5s ease-in-out infinite;
    transition: opacity .6s ease;
}

.rel-m-atractivo .rel-escenario::after {
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 0;
    height: 2px;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(90deg, transparent, rgba(var(--holo-rgb), .5), transparent);
    box-shadow: 0 0 18px 2px rgba(var(--holo-rgb), .28);
}

.rel-m-atractivo.rel-hablando .rel-escenario::before {
    opacity: 1;
}

.rel-m-atractivo[data-esc="saludo"] .rel-escenario::before, .rel-m-atractivo[data-esc="saludo"] .rel-escenario::after {
    opacity: 0;
}

@keyframes relPiso {
    0%, 100% {
        opacity: .62;
    }

    50% {
        opacity: .95;
    }
}

/* efectos de entrada de la información (se rotan por escena; el barrido holográfico sigue siendo la firma) */
.rel-m-atractivo .rel-escena[data-fx]:not([data-fx="barrido"]) .rel-proy.rel-on::after {
    display: none;
}

.rel-m-atractivo .rel-escena[data-fx="sube"] .rel-proy.rel-on:not(.rel-pimg) {
    animation-name: relFxSube;
}

.rel-m-atractivo .rel-escena[data-fx="enfoque"] .rel-proy.rel-on:not(.rel-pimg) {
    animation-name: relFxEnfoque;
}

.rel-m-atractivo .rel-escena[data-fx="cortina"] .rel-proy.rel-on:not(.rel-pimg) {
    animation-name: relFxCortina;
}

@keyframes relFxSube {
    from {
        opacity: 0;
        transform: translateY(26px);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes relFxEnfoque {
    from {
        opacity: 0;
        transform: scale(1.05);
        filter: blur(14px);
    }

    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes relFxCortina {
    from {
        opacity: .25;
        clip-path: inset(0 0 100% 0);
    }

    to {
        opacity: 1;
        clip-path: inset(-4% -2% -4% -2%);
    }
}

/* fotos: bloques, giro, rombo, persiana, círculo y enfoque */
.rel-m-atractivo .rel-pimg.rel-on {
    animation: none;
}

    .rel-m-atractivo .rel-pimg.rel-on::after {
        display: none;
    }

.rel-m-atractivo .rel-marco {
    transition: transform .45s ease, filter .45s ease;
}

.rel-m-atractivo .rel-escena[data-fx="giro"] .rel-marco {
    animation: relFxGiro 1.1s var(--ease) .05s backwards;
}

.rel-m-atractivo .rel-escena[data-fx="rombo"] .rel-marco {
    animation: relFxRombo 1.1s var(--ease) .05s backwards;
}

.rel-m-atractivo .rel-escena[data-fx="circulo"] .rel-marco {
    animation: relFxCirculo 1.15s var(--ease) .05s backwards;
}

.rel-m-atractivo .rel-escena[data-fx="enfoque"] .rel-marco {
    animation: relFxEnfoque 1.1s var(--ease) .05s backwards;
}

@keyframes relFxGiro {
    from {
        opacity: 0;
        transform: perspective(1000px) rotateY(-78deg) scale(.9);
    }

    to {
        opacity: 1;
        transform: perspective(1000px) rotateY(0) scale(1);
    }
}

@keyframes relFxRombo {
    from {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    }

    to {
        clip-path: polygon(50% -60%, 160% 50%, 50% 160%, -60% 50%);
    }
}

@keyframes relFxCirculo {
    from {
        clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%));
    }

    to {
        clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%));
    }
}

.rel-teselas {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(var(--c), 1fr);
    grid-template-rows: repeat(var(--r), 1fr);
    pointer-events: none;
}

    .rel-teselas i {
        background: var(--tinto);
        box-shadow: inset 0 0 0 1px rgba(var(--holo-rgb), .12);
        animation: relTesela .55s ease var(--d) both;
    }

@keyframes relTesela {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(.35);
    }
}
/* al salir: la foto se aleja o se gira, según el efecto con el que entró */
.rel-m-atractivo .rel-escena.rel-saliendo .rel-marco {
    transform: perspective(900px) rotateY(var(--sal-ry, 0deg)) scale(var(--sal-s, .95));
    filter: blur(var(--sal-b, 4px));
}

.rel-m-atractivo .rel-escena[data-fx="giro"] {
    --sal-ry: 72deg;
    --sal-b: 0px;
}

.rel-m-atractivo .rel-escena[data-fx="rombo"], .rel-m-atractivo .rel-escena[data-fx="circulo"] {
    --sal-s: .88;
}

.rel-m-atractivo .rel-escena[data-fx="persiana"], .rel-m-atractivo .rel-escena[data-fx="bloques"] {
    --sal-s: 1.04;
    --sal-b: 6px;
}

@media (max-width: 899px) {
    .rel-m-atractivo.rel-con-saludo .rel-cuerpo {
        transition: grid-template-rows .9s var(--ease);
    }

    .rel-m-atractivo.rel-con-saludo[data-esc="saludo"] .rel-cuerpo {
        grid-template-rows: 64% minmax(0, 1fr);
    }

    .rel-m-atractivo.rel-con-saludo[data-esc="saludo"] {
        --gs: .96;
    }

    .rel-m-atractivo .rel-saludo-txt {
        top: 64%;
    }

    .rel-m-atractivo .rel-saludo-nombre {
        font-size: clamp(1.9rem, 9vw, 3rem);
    }

    .rel-m-atractivo .rel-escenario::before {
        height: 36%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rel-teselas {
        display: none;
    }

    .rel-m-atractivo .rel-escena.rel-saliendo .rel-marco {
        transform: none;
        filter: none;
    }

    .rel-m-atractivo.rel-con-saludo .rel-guia {
        transition: none;
    }
}


/* =====================================================================
   v11 · INDICADORES (cifras), HORARIOS y MEDIOS DE PAGO con más presencia
   ===================================================================== */
/* ---- indicadores: hasta 4 tarjetas con anillo, ícono, número que cuenta y brillo ---- */
.rel-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 2vh, 18px) clamp(10px, 1.6vw, 18px);
    width: 100%;
}

    .rel-stats.n1 {
        grid-template-columns: minmax(0, 440px);
    }

    .rel-stats.n3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.rel-stat-w {
    min-width: 0;
}

.rel-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.5vw, 20px);
    height: 100%;
    padding: clamp(14px, 2.6vh, 26px) clamp(14px, 1.8vw, 24px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--linea);
    background: linear-gradient(180deg, rgba(var(--arena-rgb), .07), rgba(var(--arena-rgb), .02));
}

    .rel-stat::before { /* luz que sube desde abajo */
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 70%;
        pointer-events: none;
        background: radial-gradient(70% 100% at 50% 100%, rgba(var(--oro-rgb), .22), transparent 70%);
    }

    .rel-stat::after { /* brillo que cruza una vez */
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -60%;
        width: 40%;
        pointer-events: none;
        transform: skewX(-14deg);
        background: linear-gradient(100deg, transparent, rgba(var(--luz-rgb), .2), transparent);
    }

.rel-stat-w.rel-on .rel-stat::after {
    animation: relBrillo 1.5s ease .55s both;
}

@keyframes relBrillo {
    from {
        left: -60%;
    }

    to {
        left: 130%;
    }
}

.rel-stat-med {
    position: relative;
    flex: none;
    width: clamp(54px, 9vh, 76px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    color: var(--oro);
}

    .rel-stat-med .rel-ico {
        width: 42%;
        height: 42%;
        position: relative;
        z-index: 1;
    }

.rel-stat-anillo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.rel-ring-bg {
    fill: none;
    stroke: rgba(var(--arena-rgb), .14);
    stroke-width: 2.2;
}

.rel-ring-fg {
    fill: none;
    stroke: var(--oro);
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: var(--fill, 20);
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    filter: drop-shadow(0 0 5px rgba(var(--oro-rgb), .8));
}

.rel-stat-w.rel-on .rel-ring-fg {
    animation: relAnillo 1.5s var(--ease) .15s backwards;
}

@keyframes relAnillo {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: var(--fill, 20);
    }
}

.rel-stat-w.rel-on .rel-stat-med {
    animation: relLatidoSuave 2.6s ease-in-out 1.8s infinite;
}

@keyframes relLatidoSuave {
    0%, 100% {
        filter: none;
    }

    50% {
        filter: drop-shadow(0 0 8px rgba(var(--oro-rgb), .55));
    }
}

.rel-stat-txt {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.rel-stat-num {
    font-family: var(--serif);
    font-size: clamp(2.3rem, min(5.6vw, 10.5vh), 4.6rem);
    line-height: .95;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    text-shadow: 0 0 26px rgba(var(--oro-rgb), .4);
}

.rel-stat-label {
    margin-top: .35em;
    color: var(--humo);
    font-size: clamp(.9rem, min(1.5vw, 2.4vh), 1.18rem);
    line-height: 1.25;
}

.rel-m-empresa .rel-stat {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .26);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.rel-m-empresa .rel-stat-num {
    font-weight: 700;
    letter-spacing: -.04em;
}

.rel-m-empresa .rel-stat-label {
    color: rgba(255, 255, 255, .88);
}

/* ---- horarios: dos horas grandes y una barra de 24 h con el tramo abierto ---- */
.rel-hor-w {
    width: 100%;
}

.rel-hor {
    position: relative;
    padding: clamp(12px, 2vh, 18px) clamp(14px, 1.6vw, 22px) clamp(10px, 1.6vh, 14px);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--linea);
    background: linear-gradient(180deg, rgba(var(--arena-rgb), .07), rgba(var(--arena-rgb), .02));
}

    .rel-hor::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 60%;
        pointer-events: none;
        background: radial-gradient(70% 100% at 50% 100%, rgba(var(--oro-rgb), .18), transparent 70%);
    }

    .rel-hor > * {
        position: relative;
    }

.rel-hor-est {
    display: flex;
    align-items: center;
    gap: .5em;
    color: var(--humo);
    font-weight: 600;
    font-size: clamp(.9rem, 1.4vw, 1.05rem);
}

    .rel-hor-est .rel-ico {
        color: var(--oro);
    }

.rel-hor-horas {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.4vw, 18px);
    margin: .3em 0 .55em;
    font-family: var(--serif);
    font-size: clamp(1.9rem, min(4.4vw, 8vh), 3.3rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

    .rel-hor-horas b {
        font-weight: inherit;
    }

.rel-hor-texto {
    font-size: .6em;
    line-height: 1.2;
}

.rel-hor-flecha {
    flex: 1;
    min-width: 28px;
    max-width: 110px;
    height: 2px;
    background: linear-gradient(90deg, var(--oro), rgba(var(--oro-rgb), .1));
    position: relative;
    transform-origin: left;
}

    .rel-hor-flecha::after {
        content: '';
        position: absolute;
        right: -1px;
        top: -3px;
        width: 8px;
        height: 8px;
        border-top: 2px solid var(--oro);
        border-right: 2px solid var(--oro);
        transform: rotate(45deg);
        opacity: .9;
    }

.rel-hor-w.rel-on .rel-hor-flecha {
    animation: relTrazo .9s var(--ease) .35s backwards;
}

@keyframes relTrazo {
    from {
        transform: scaleX(0);
        opacity: 0;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

.rel-hor-nota {
    margin: -.2em 0 .5em;
    color: var(--humo);
    font-size: .9rem;
}

.rel-hor-dia {
    position: relative;
    height: 8px;
    border-radius: 5px;
    background: rgba(var(--arena-rgb), .14);
}

.rel-hor-seg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--a);
    width: calc(var(--b) - var(--a));
    border-radius: 5px;
    transform-origin: left center;
    background: linear-gradient(90deg, var(--oro), var(--oro-luz));
    box-shadow: 0 0 14px rgba(var(--oro-rgb), .65);
}

.rel-hor-w.rel-on .rel-hor-seg {
    animation: relSegmento 1.2s var(--ease) .5s backwards;
}

@keyframes relSegmento {
    from {
        transform: scaleX(0);
        opacity: .2;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

.rel-hor-ejes {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: .68rem;
    color: var(--humo);
    opacity: .65;
    font-variant-numeric: tabular-nums;
}

.rel-m-empresa .rel-hor {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .24);
}

.rel-m-empresa .rel-hor-horas {
    font-weight: 700;
    letter-spacing: -.03em;
}

/* ---- puntos prácticos con tilde ---- */
.rel-logi .rel-item {
    align-items: center;
    padding: .6em .9em;
    border-radius: 14px;
    background: rgba(var(--arena-rgb), .05);
    border: 1px solid rgba(var(--arena-rgb), .08);
}

    .rel-logi .rel-item .rel-ico {
        flex: none;
        width: 1.6em;
        height: 1.6em;
        padding: .32em;
        margin-top: 0;
        border-radius: 50%;
        background: rgba(var(--oro-rgb), .2);
        color: var(--oro);
    }

/* ---- medios de pago: píldoras con ícono que aparecen una a una ---- */
.rel-pagos {
    align-items: center;
    gap: 10px 12px;
}

.rel-pagos-t {
    display: inline-flex;
    align-items: center;
    gap: .7em;
    margin-right: 6px;
    color: var(--humo);
    font-weight: 600;
    font-size: 1rem;
}

    .rel-pagos-t::after {
        content: '';
        width: 34px;
        height: 1.5px;
        background: var(--oro);
    }

.rel-pago {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .45em 1.1em .45em .5em;
    border-radius: 999px;
    font-weight: 600;
    font-size: clamp(.95rem, 1.5vw, 1.1rem);
    border: 1px solid var(--linea);
    background: rgba(var(--arena-rgb), .07);
}

.rel-pago-i {
    display: grid;
    place-items: center;
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    background: rgba(var(--oro-rgb), .2);
    color: var(--oro);
}

    .rel-pago-i .rel-ico {
        width: 1.05em;
        height: 1.05em;
    }

.rel-pago.rel-on {
    animation-name: relPop;
}

    .rel-pago.rel-on::after {
        display: none;
    }

.rel-pago::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    transform: skewX(-14deg);
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(var(--luz-rgb), .28), transparent);
}

.rel-pago.rel-on::before {
    animation: relBrillo 1.1s ease .35s both;
}

@keyframes relPop {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.85);
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

.rel-m-empresa .rel-pago {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .3);
}

@media (max-width: 899px) {
    .rel-stats {
        gap: 10px;
    }

    .rel-stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 12px;
        border-radius: 16px;
    }

    .rel-stat-med {
        width: 46px;
    }

    .rel-stat-num {
        font-size: clamp(2rem, 10.5vw, 3rem);
    }

    .rel-hor-horas {
        font-size: clamp(1.7rem, 8vw, 2.4rem);
    }

    .rel-hor-ejes {
        display: none;
    }

    .rel-horarios {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .rel-hor {
        padding: 10px 12px;
        border-radius: 14px;
    }

    .rel-hor-horas {
        gap: 6px;
        font-size: clamp(1.2rem, 6.2vw, 1.7rem);
        margin: .15em 0 .45em;
    }

    .rel-hor-flecha {
        min-width: 12px;
    }

    .rel-logi {
        gap: 10px;
    }

        .rel-logi .rel-item {
            padding: .45em .7em;
            font-size: .92rem;
        }

    .rel-pago {
        font-size: .88rem;
    }
}

@media (max-width: 899px) and (max-height: 700px) {
    .rel-stat-med {
        display: none;
    }

    .rel-hor-nota {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rel-stat-w .rel-stat::after, .rel-pago::before {
        display: none;
    }
}

/* =====================================================================
   v13 · PASILLO 3D (atractivos)
   Solo se activa con la clase .rel-pasillo (la pone el JS). Sin esa clase todo queda como antes.
   Base oscura y neutra; el color de cada atractivo entra por --oro / --holo (lo calcula el JS).
   ===================================================================== */
.rel-pasillo {
    --pW: 1400px;
    --pH: 590px;
    --pL: 5300px;
    --pnx: min(360px, 27vw);
    --pnw: min(410px, 31vw);
    --cz: 0px;
    --pb0: color-mix(in srgb, var(--oro) 3%, #05060a);
    --pb1: color-mix(in srgb, var(--oro) 6%, #080a10);
    --pb2: color-mix(in srgb, var(--oro) 9%, #0c0f17);
    --pb3: color-mix(in srgb, var(--oro) 14%, #121620);
    --pfc: color-mix(in srgb, var(--oro) 38%, #10131c);
    --pfm: color-mix(in srgb, var(--oro) 20%, #0d1018);
    --pla: .07;
    --arena: #EEF0F4;
    --arena-rgb: 238, 240, 244;
    --humo: rgba(var(--arena-rgb), .66);
    --linea: rgba(var(--oro-rgb), .38);
    background: radial-gradient(ellipse 60% 70% at 50% 46%, var(--pb3) 0%, var(--pb1) 42%, var(--pb0) 80%);
}

    .rel-pasillo .rel-fondo {
        display: none;
    }

/* ---- el pasillo (paredes, piso y techo con texturas que corren al avanzar) ---- */
.rel-pas {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.rel-cam {
    position: absolute;
    inset: 0;
    perspective: 1000px;
    perspective-origin: 50% 46%;
    overflow: hidden;
}

.rel-mundo {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

    .rel-mundo > * {
        position: absolute;
        left: 50%;
        top: 50%;
    }

.rel-piso, .rel-techo, .rel-pared {
    transition: background-position 1.7s cubic-bezier(.62, .04, .2, 1);
}

.rel-piso, .rel-techo {
    width: var(--pW);
    height: var(--pL);
    margin-left: calc(var(--pW) / -2);
    transform-origin: 50% 0;
}

.rel-piso {
    transform: translate3d(0, 300px, 700px) rotateX(-90deg);
    background: linear-gradient(90deg, transparent 0, rgba(var(--holo-rgb), .10) 50%, transparent 100%), repeating-linear-gradient(90deg, rgba(var(--oro-rgb), .30) 0 2px, transparent 2px 100px), repeating-linear-gradient(0deg, rgba(var(--oro-rgb), .22) 0 2px, transparent 2px 100px), linear-gradient(90deg, var(--pb0), var(--pb2) 50%, var(--pb0));
    background-position: 0 0, 0 0, 0 calc(var(--cz) * -1), 0 0;
}

.rel-techo {
    transform: translate3d(0, -290px, 700px) rotateX(-90deg);
    background: linear-gradient(90deg, var(--pb0) 0, var(--pb1) 50%, var(--pb0) 100%);
}

    .rel-techo::after {
        content: '';
        position: absolute;
        left: calc(50% - 90px);
        width: 180px;
        top: 0;
        bottom: 0;
        filter: blur(1px);
        background: repeating-linear-gradient(0deg, rgba(var(--holo-rgb), .55) 0 8px, transparent 8px 450px);
        background-position: 0 calc(var(--cz) * -1);
        transition: background-position 1.7s cubic-bezier(.62, .04, .2, 1);
    }

.rel-pared {
    width: var(--pL);
    height: var(--pH);
    margin-top: calc(var(--pH) / -2);
    transform-origin: 0 50%;
    background: repeating-linear-gradient(90deg, transparent 0 225px, rgba(var(--holo-rgb), .07) 225px 300px), linear-gradient(180deg, rgba(var(--holo-rgb), .05), transparent 35%, transparent 80%, rgba(var(--oro-rgb), .16)), linear-gradient(90deg, var(--pb1), var(--pb2));
    background-position: calc(var(--cz) * -1) 0, 0 0, 0 0;
}

    .rel-pared::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: var(--oro);
        box-shadow: 0 0 18px 3px rgba(var(--oro-rgb), .55);
    }

.rel-pared-i {
    transform: translate3d(calc(var(--pW) / -2), 5px, 700px) rotateY(90deg);
}

.rel-pared-d {
    transform: translate3d(calc(var(--pW) / 2), 5px, 700px) rotateY(90deg);
}

.rel-pfondo {
    width: var(--pW);
    height: var(--pH);
    margin-left: calc(var(--pW) / -2);
    margin-top: calc(var(--pH) / -2);
    transform: translate3d(0, 5px, -4600px);
    background: radial-gradient(ellipse 30% 60% at 50% 55%, var(--pfc) 0%, var(--pfm) 30%, var(--pb1) 70%, var(--pb0) 100%);
}

.rel-pozo { /* charco de luz en el piso, bajo el panel activo */
    width: 560px;
    height: 320px;
    margin-left: -280px;
    margin-top: -160px;
    pointer-events: none;
    transform-origin: 50% 50%;
    transform: translate3d(var(--pozx, 0px), 300px, -170px) rotateX(-90deg);
    background: radial-gradient(ellipse at center, rgba(var(--holo-rgb), .30) 0%, rgba(var(--oro-rgb), .10) 45%, transparent 70%);
    transition: transform 1.1s cubic-bezier(.4, 0, .2, 1), opacity .8s;
}

.rel-pasillo[data-lado="L"] {
    --pozx: calc(var(--pnx) * -1);
}

.rel-pasillo[data-lado="R"] {
    --pozx: var(--pnx);
}

.rel-pasillo[data-lado="C"] {
    --pozx: 0px;
}

.rel-pasillo[data-esc="saludo"] .rel-pozo {
    opacity: 0;
}

.rel-pluz {
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    background: radial-gradient(ellipse 22% 30% at 50% 46%, rgba(var(--holo-rgb), var(--pla)), transparent 70%);
}

/* ---- estructura: la guía al centro, abajo; el escenario cubre todo para que los paneles compartan la perspectiva ---- */
.rel-m-atractivo.rel-pasillo .rel-cuerpo {
    display: block;
    position: static;
}

.rel-m-atractivo.rel-pasillo .rel-guia,
.rel-m-atractivo.rel-pasillo.rel-con-saludo .rel-guia {
    position: absolute;
    z-index: 2;
    left: 50%;
    right: auto;
    top: auto;
    bottom: clamp(60px, 9vh, 92px);
    width: auto;
    height: min(47vh, 520px);
    aspect-ratio: .74;
    overflow: visible;
    opacity: .94;
    transform: translate3d(calc(-50% + var(--px) * 8px), calc(var(--py) * 4px), 0) scale(var(--gs));
    transform-origin: 50% 100%;
    transition: transform 1.25s var(--ease);
}

.rel-m-atractivo.rel-pasillo.rel-con-saludo[data-esc="saludo"] {
    --gs: 1.1;
}

.rel-m-atractivo.rel-pasillo[data-esc="saludo"] .rel-escenario {
    opacity: 1;
}

.rel-m-atractivo.rel-pasillo .rel-escenario {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 0;
    pointer-events: none;
    perspective: 1000px;
    perspective-origin: 50% 46%;
    transition: none;
}

    .rel-m-atractivo.rel-pasillo .rel-escenario::before, .rel-m-atractivo.rel-pasillo .rel-escenario::after {
        display: none;
    }

.rel-pasillo .rel-saludo-txt {
    position: absolute;
    z-index: 5;
    top: clamp(84px, 15vh, 150px);
}

.rel-pasillo .rel-aviso-ia {
    display: none;
}

/* ---- holograma 3D temático (flota en el medio del pasillo, sobre la cabeza de la guía) ---- */
.rel-obj {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: clamp(62px, 9vh, 96px);
    width: min(30vh, 300px);
    height: min(30vh, 300px);
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.4s ease .3s;
}

.rel-obj-on .rel-obj {
    opacity: 1;
}

/* ---- paneles sobre las paredes ---- */
.rel-m-atractivo.rel-pasillo .rel-escena {
    --x: 0px;
    --ry: 0deg;
    --z: 0px;
    --ty: -50%;
    --y: var(--dy, 0px);
    inset: 50% auto auto 50%;
    display: block;
    width: var(--pnw);
    height: auto;
    max-height: calc(100% - 210px);
    margin-left: calc(var(--pnw) / -2);
    padding: 24px 26px 26px;
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
    transform: translate3d(var(--x), var(--y), var(--z)) rotateY(var(--ry)) translateY(var(--ty));
    border: 1px solid rgba(var(--oro-rgb), .32);
    border-radius: 6px;
    background: linear-gradient(var(--oro), var(--oro)) 6px 6px / 18px 2px no-repeat, linear-gradient(var(--oro), var(--oro)) 6px 6px / 2px 18px no-repeat, linear-gradient(var(--oro), var(--oro)) calc(100% - 6px) 6px / 18px 2px no-repeat, linear-gradient(var(--oro), var(--oro)) calc(100% - 6px) 6px / 2px 18px no-repeat, linear-gradient(var(--oro), var(--oro)) 6px calc(100% - 6px) / 18px 2px no-repeat, linear-gradient(var(--oro), var(--oro)) 6px calc(100% - 6px) / 2px 18px no-repeat, linear-gradient(var(--oro), var(--oro)) calc(100% - 6px) calc(100% - 6px) / 18px 2px no-repeat, linear-gradient(var(--oro), var(--oro)) calc(100% - 6px) calc(100% - 6px) / 2px 18px no-repeat, linear-gradient(0deg, rgba(var(--holo-rgb), .12), transparent 46%), linear-gradient(180deg, color-mix(in srgb, var(--pb3) 90%, transparent), color-mix(in srgb, var(--pb1) 88%, transparent));
    box-shadow: 0 0 44px rgba(var(--oro-rgb), .16), inset 0 0 34px rgba(var(--oro-rgb), .05);
    animation: relPasIn 1.25s cubic-bezier(.2, .7, .2, 1) .3s both;
}

    .rel-m-atractivo.rel-pasillo .rel-escena.rel-pas-L {
        --x: calc(var(--pnx) * -1);
        --ry: 17deg;
    }

    .rel-m-atractivo.rel-pasillo .rel-escena.rel-pas-R {
        --x: var(--pnx);
        --ry: -17deg;
    }

    .rel-m-atractivo.rel-pasillo .rel-escena.rel-pas-C {
        --x: 0px;
        --ry: 0deg;
        --y: -70px;
        width: min(560px, 90vw);
        margin-left: calc(min(560px, 90vw) / -2);
    }

    .rel-m-atractivo.rel-pasillo .rel-escena.rel-t-saludo {
        display: none;
    }

    .rel-m-atractivo.rel-pasillo .rel-escena.rel-saliendo {
        animation: relPasOut .45s ease-in forwards;
        opacity: 1;
        pointer-events: none;
    }

    .rel-m-atractivo.rel-pasillo .rel-escena > * {
        transform: none;
        max-width: none;
        margin-block: 0;
    }

.rel-pasillo .rel-proy.rel-on, .rel-pasillo .rel-proy.rel-on::after {
    animation-delay: calc(var(--d, 0s) + .6s);
}

@keyframes relPasIn {
    from {
        opacity: 0;
        transform: translate3d(calc(var(--x) * .8), var(--y), calc(var(--z) - 560px)) rotateY(var(--ry)) translateY(var(--ty));
    }

    to {
        opacity: 1;
        transform: translate3d(var(--x), var(--y), var(--z)) rotateY(var(--ry)) translateY(var(--ty));
    }
}

@keyframes relPasOut {
    from {
        opacity: 1;
        transform: translate3d(var(--x), var(--y), var(--z)) rotateY(var(--ry)) translateY(var(--ty));
    }

    to {
        opacity: 0;
        transform: translate3d(calc(var(--x) * 1.6), var(--y), calc(var(--z) + 300px)) rotateY(var(--ry)) translateY(var(--ty));
    }
}

/* foto: marco de ventana, sin panel de vidrio */
.rel-m-atractivo.rel-pasillo .rel-escena.rel-pas-vent {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    --dz: 0;
}

.rel-pasillo .rel-pas-vent .rel-imagen {
    gap: 12px;
}

.rel-pasillo .rel-pas-vent .rel-marco {
    aspect-ratio: 4 / 3;
    max-height: none;
    border: 7px solid var(--arena);
    border-bottom-width: 9px;
    border-radius: 0;
    background: #000;
    box-shadow: 0 0 0 2px rgba(var(--oro-rgb), .5), 0 0 60px 6px rgba(var(--holo-rgb), .30);
}

.rel-pasillo .rel-pas-vent .rel-leyenda {
    text-align: center;
    font-size: 1.1rem;
    text-shadow: 0 2px 12px #000;
}

.rel-pasillo .rel-pas-vent .rel-credito {
    justify-content: center;
}

.rel-pasillo .rel-pas-vent .rel-pie-foto {
    justify-items: center;
}

/* ventana con foto en la pared de enfrente */
.rel-ventana {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(300px, 23vw);
    margin-left: calc(min(300px, 23vw) / -2);
    --x: 0px;
    --ry: 0deg;
    pointer-events: none;
    transform: translate3d(var(--x), -30px, -170px) rotateY(var(--ry)) translateY(-50%);
    opacity: .0;
    border: 6px solid var(--arena);
    border-bottom-width: 8px;
    background: #000;
    box-shadow: 0 0 0 2px rgba(var(--oro-rgb), .45), 0 0 50px 4px rgba(var(--holo-rgb), .25);
    animation: relVentIn 1.5s ease .8s both;
}

    .rel-ventana img {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        filter: saturate(.9) brightness(.9);
    }

    .rel-ventana.rel-pas-L {
        --x: calc(var(--pnx) * -1);
        --ry: 17deg;
    }

    .rel-ventana.rel-pas-R {
        --x: var(--pnx);
        --ry: -17deg;
    }

    .rel-ventana.rel-saliendo {
        animation: relVentOut .45s ease-in forwards;
    }

@keyframes relVentIn {
    from {
        opacity: 0;
        transform: translate3d(var(--x), -30px, -700px) rotateY(var(--ry)) translateY(-50%);
    }

    to {
        opacity: .88;
        transform: translate3d(var(--x), -30px, -170px) rotateY(var(--ry)) translateY(-50%);
    }
}

@keyframes relVentOut {
    from {
        opacity: .88;
    }

    to {
        opacity: 0;
        transform: translate3d(calc(var(--x) * 1.6), -30px, 130px) rotateY(var(--ry)) translateY(-50%);
    }
}

/* tipografía y composición dentro del panel */
.rel-pasillo .rel-escena .rel-h {
    margin-bottom: 12px;
    font-size: 1.4rem;
}

.rel-pasillo .rel-intro-sello {
    margin-bottom: 12px;
    font-size: .95rem;
}

.rel-pasillo .rel-intro-titulo {
    font-size: clamp(1.9rem, 3.1vw, 2.7rem);
}

.rel-pasillo .rel-intro-sub {
    margin-top: 12px;
    font-size: 1.12rem;
}

.rel-pasillo .rel-logo img {
    max-height: 54px;
}

.rel-pasillo .rel-stats {
    gap: 12px;
}

    .rel-pasillo .rel-stats.n1 {
        grid-template-columns: minmax(0, 1fr);
    }

.rel-pasillo .rel-stat {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 14px 10px 12px;
    border-radius: 8px;
    border-color: rgba(var(--oro-rgb), .28);
    background: rgba(var(--oro-rgb), .06);
}

.rel-pasillo .rel-stat-med {
    width: 54px;
}

.rel-pasillo .rel-stat-num {
    font-size: clamp(1.7rem, 2.4vw, 2.2rem);
}

.rel-pasillo .rel-stat-label {
    font-size: .9rem;
}

.rel-pasillo .rel-frase {
    border-left: 0;
    padding-left: 0;
}

.rel-pasillo .rel-capitulo {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.rel-pasillo .rel-frase-texto {
    font-size: clamp(1.1rem, 1.55vw, 1.4rem);
    line-height: 1.45;
}

.rel-pasillo .rel-w {
    color: rgba(var(--arena-rgb), .5);
}

    .rel-pasillo .rel-w.rel-dicha {
        color: #fff;
    }

    .rel-pasillo .rel-w.rel-actual {
        color: #fff;
        text-shadow: 0 0 14px rgba(var(--holo-rgb), .85);
    }

.rel-pasillo .rel-chip {
    font-size: 1rem;
    padding: .4em .9em;
    background: rgba(var(--oro-rgb), .10);
    border-color: rgba(var(--oro-rgb), .4);
}

.rel-pasillo .rel-item {
    font-size: 1.05rem;
}

.rel-pasillo .rel-insider .rel-comilla {
    font-size: 4rem;
    height: .4em;
}

.rel-pasillo .rel-insider-titulo {
    font-size: clamp(1.4rem, 2vw, 1.8rem);
}

.rel-pasillo .rel-insider-texto {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}

.rel-pasillo .rel-logi {
    grid-template-columns: 1fr;
    gap: 12px;
}

.rel-pasillo .rel-horarios {
    grid-template-columns: 1fr;
}

.rel-pasillo .rel-hor {
    border-radius: 8px;
    border-color: rgba(var(--oro-rgb), .28);
    background: rgba(var(--oro-rgb), .06);
}

.rel-pasillo .rel-hor-horas {
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
}

.rel-pasillo .rel-pago {
    border-radius: 10px;
}

.rel-pasillo .rel-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rel-pasillo .rel-card-t {
    font-size: 1rem;
}

.rel-pasillo .rel-cierre-titulo {
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
}

.rel-pasillo .rel-cierre-texto {
    font-size: 1.05rem;
}

.rel-pasillo .rel-cierre {
    text-align: center;
}

    .rel-pasillo .rel-cierre .rel-fin-acciones {
        justify-content: center;
        margin-top: 18px;
    }

.rel-pasillo .rel-cierre-texto {
    margin-inline: auto;
}

.rel-pasillo .rel-cta {
    padding: .7em 1.2em;
    font-size: .95rem;
}

/* celulares: un solo panel (alternando apenas de lado), guía chica abajo y holograma de fondo */
@media (max-width: 899px) {
    .rel-pasillo {
        --pnx: 0px;
        --pnw: min(88vw, 400px);
    }

        .rel-pasillo .rel-pared-i {
            transform: translate3d(calc(var(--pW) / -2), 5px, 700px) rotateY(90deg);
        }

    .rel-m-atractivo.rel-pasillo .rel-guia,
    .rel-m-atractivo.rel-pasillo.rel-con-saludo .rel-guia {
        height: min(30vh, 280px);
        bottom: clamp(70px, 11vh, 100px);
    }

    .rel-m-atractivo.rel-pasillo.rel-con-saludo[data-esc="saludo"] {
        --gs: 1.45;
    }

    .rel-m-atractivo.rel-pasillo .rel-escena {
        padding: 16px 16px 18px;
        max-height: calc(100% - 330px);
        --y: -17vh;
        transform-origin: 50% 50%;
    }

        .rel-m-atractivo.rel-pasillo .rel-escena.rel-pas-L {
            --x: -4vw;
            --ry: 9deg;
        }

        .rel-m-atractivo.rel-pasillo .rel-escena.rel-pas-R {
            --x: 4vw;
            --ry: -9deg;
        }

        .rel-m-atractivo.rel-pasillo .rel-escena.rel-pas-C {
            --y: -17vh;
            --x: 0px;
        }

        .rel-m-atractivo.rel-pasillo .rel-escena.rel-pas-vent {
            max-height: calc(100% - 300px);
        }

    .rel-ventana {
        display: none;
    }

    .rel-obj {
        top: auto;
        bottom: clamp(150px, 29vh, 260px);
        width: min(24vh, 200px);
        height: min(24vh, 200px);
    }

    .rel-pasillo .rel-escena .rel-h {
        font-size: 1.2rem;
    }

    .rel-pasillo .rel-stat {
        flex-direction: row;
        text-align: left;
        gap: 10px;
        padding: 10px;
    }

    .rel-pasillo .rel-stat-med {
        width: 40px;
    }

    .rel-pasillo .rel-stat-num {
        font-size: 1.5rem;
    }

    .rel-pasillo .rel-stat-label {
        font-size: .8rem;
    }

    .rel-pasillo .rel-frase-texto {
        font-size: 1.1rem;
    }

    .rel-pasillo .rel-intro-titulo {
        font-size: 1.8rem;
    }

    .rel-pasillo .rel-saludo-txt {
        top: clamp(72px, 11vh, 110px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rel-piso, .rel-techo, .rel-pared, .rel-techo::after, .rel-pozo {
        transition: none;
    }

    .rel-m-atractivo.rel-pasillo .rel-escena, .rel-ventana {
        animation: none;
        opacity: 1;
    }

    .rel-ventana {
        opacity: .88;
    }

    .rel-m-atractivo.rel-pasillo .rel-escena.rel-saliendo {
        animation: none;
        opacity: 0;
    }
}

/* v14 · vista previa de lo que viene (escenas siguientes atenuadas al fondo) */
.rel-fantasma {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--pnw);
    margin-left: calc(var(--pnw) / -2);
    min-height: 170px;
    --x: 0px;
    --ry: 0deg;
    --zf: -640px;
    --y: -10px;
    pointer-events: none;
    padding: 22px 24px;
    border: 1px solid rgba(var(--oro-rgb), .3);
    border-radius: 6px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--pb3) 80%, transparent), color-mix(in srgb, var(--pb1) 80%, transparent));
    box-shadow: 0 0 36px rgba(var(--oro-rgb), .12);
    transform: translate3d(var(--x), var(--y), var(--zf)) rotateY(var(--ry)) translateY(-50%);
    opacity: 0;
    animation: relFanIn 1.2s ease 1.3s both;
}

.rel-fantasma-2 {
    --zf: -1350px;
    --y: 0px;
    animation-delay: 1.7s;
}

.rel-fantasma.rel-pas-L {
    --x: calc(var(--pnx) * -1);
    --ry: 17deg;
}

.rel-fantasma.rel-pas-R {
    --x: var(--pnx);
    --ry: -17deg;
}

.rel-fantasma.rel-pas-C {
    --x: 0px;
    --ry: 0deg;
    --y: -70px;
}

.rel-fantasma b {
    display: block;
    font: 400 1.6rem/1.15 var(--serif);
    color: var(--oro);
    margin-bottom: 14px;
}

.rel-fantasma i {
    display: block;
    height: 10px;
    border-radius: 6px;
    background: rgba(var(--arena-rgb), .18);
    margin-top: 10px;
}

    .rel-fantasma i:nth-of-type(2) {
        width: 82%;
    }

    .rel-fantasma i:nth-of-type(3) {
        width: 58%;
    }

.rel-fantasma-foto {
    padding: 0;
    min-height: 0;
    border: 6px solid var(--arena);
    border-radius: 0;
    background: #000;
}

    .rel-fantasma-foto img {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

.rel-fantasma.rel-saliendo {
    animation: none;
    opacity: 0;
    transition: opacity .3s;
}

@keyframes relFanIn {
    from {
        opacity: 0;
    }

    to {
        opacity: .34;
    }
}

.rel-fantasma-2 {
    opacity: .16;
    animation-name: relFanIn2;
}

@keyframes relFanIn2 {
    from {
        opacity: 0;
    }

    to {
        opacity: .16;
    }
}

@media (max-width: 899px) {
    .rel-fantasma {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rel-fantasma {
        animation: none;
        opacity: .3;
    }
}

/* v15 · tipografías y cuadros más compactos (escritorio) y vista previa también en celular */
.rel-pasillo {
    --pnx: min(335px, 25.5vw);
    --pnw: min(372px, 28.5vw);
}

.rel-m-atractivo.rel-pasillo .rel-escena {
    padding: 18px 20px 20px;
}

.rel-pasillo .rel-escena .rel-h {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.rel-pasillo .rel-intro-sello {
    font-size: .85rem;
    margin-bottom: 9px;
}

.rel-pasillo .rel-intro-titulo {
    font-size: clamp(1.55rem, 2.45vw, 2.15rem);
}

.rel-pasillo .rel-intro-sub {
    font-size: .98rem;
    margin-top: 9px;
}

.rel-pasillo .rel-logo img {
    max-height: 44px;
}

.rel-pasillo .rel-stats {
    gap: 9px;
}

.rel-pasillo .rel-stat {
    padding: 11px 8px 10px;
    gap: 6px;
}

.rel-pasillo .rel-stat-med {
    width: 44px;
}

.rel-pasillo .rel-stat-num {
    font-size: clamp(1.4rem, 1.95vw, 1.75rem);
}

.rel-pasillo .rel-stat-label {
    font-size: .8rem;
}

.rel-pasillo .rel-capitulo {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.rel-pasillo .rel-frase-texto {
    font-size: clamp(.95rem, 1.25vw, 1.12rem);
    line-height: 1.42;
}

.rel-pasillo .rel-chip {
    font-size: .88rem;
}

.rel-pasillo .rel-item {
    font-size: .92rem;
}

.rel-pasillo .rel-insider .rel-comilla {
    font-size: 3.2rem;
}

.rel-pasillo .rel-insider-titulo {
    font-size: clamp(1.2rem, 1.7vw, 1.5rem);
}

.rel-pasillo .rel-insider-texto {
    font-size: clamp(.95rem, 1.2vw, 1.08rem);
}

.rel-pasillo .rel-hor-horas {
    font-size: clamp(1.45rem, 2.1vw, 1.85rem);
}

.rel-pasillo .rel-pago {
    font-size: .85rem;
}

.rel-pasillo .rel-card-t {
    font-size: .9rem;
}

.rel-pasillo .rel-cierre-titulo {
    font-size: clamp(1.45rem, 2.1vw, 1.9rem);
}

.rel-pasillo .rel-cierre-texto {
    font-size: .95rem;
}

.rel-pasillo .rel-cta {
    padding: .6em 1.05em;
    font-size: .85rem;
}

.rel-pasillo .rel-pas-vent .rel-leyenda {
    font-size: .98rem;
}

.rel-pasillo .rel-pas-vent .rel-marco {
    border-width: 6px;
    border-bottom-width: 8px;
}

.rel-fantasma {
    padding: 18px 20px;
    min-height: 140px;
}

    .rel-fantasma b {
        font-size: 1.3rem;
    }

.rel-ventana {
    width: min(260px, 20vw);
    margin-left: calc(min(260px, 20vw) / -2);
}

.rel-obj {
    width: min(27vh, 270px);
    height: min(27vh, 270px);
}

@media (max-width: 899px) {
    .rel-pasillo {
        --pnx: 0px;
        --pnw: min(78vw, 330px);
    }

    .rel-m-atractivo.rel-pasillo .rel-escena {
        padding: 12px 13px 14px;
        max-height: calc(100% - 340px);
        --y: -18vh;
    }

        .rel-m-atractivo.rel-pasillo .rel-escena.rel-pas-vent {
            padding: 0;
        }

    .rel-pasillo .rel-escena .rel-h {
        font-size: 1rem;
        margin-bottom: 7px;
    }

    .rel-pasillo .rel-intro-sello {
        font-size: .75rem;
        margin-bottom: 6px;
    }

    .rel-pasillo .rel-intro-titulo {
        font-size: 1.45rem;
    }

    .rel-pasillo .rel-intro-sub {
        font-size: .88rem;
        margin-top: 7px;
    }

    .rel-pasillo .rel-stats {
        gap: 7px;
    }

    .rel-pasillo .rel-stat {
        padding: 8px;
        gap: 8px;
        border-radius: 6px;
    }

    .rel-pasillo .rel-stat-med {
        width: 32px;
    }

    .rel-pasillo .rel-stat-num {
        font-size: 1.15rem;
    }

    .rel-pasillo .rel-stat-label {
        font-size: .7rem;
    }

    .rel-pasillo .rel-capitulo {
        font-size: .95rem;
        margin-bottom: 6px;
    }

    .rel-pasillo .rel-frase-texto {
        font-size: .92rem;
        line-height: 1.38;
    }

    .rel-pasillo .rel-chip {
        font-size: .78rem;
        padding: .3em .7em;
    }

    .rel-pasillo .rel-item {
        font-size: .84rem;
        padding: .4em .6em;
    }

    .rel-pasillo .rel-insider .rel-comilla {
        font-size: 2.6rem;
    }

    .rel-pasillo .rel-insider-titulo {
        font-size: 1.12rem;
    }

    .rel-pasillo .rel-insider-texto {
        font-size: .88rem;
    }

    .rel-pasillo .rel-logi, .rel-pasillo .rel-horarios {
        gap: 8px;
        grid-template-columns: 1fr;
    }

    .rel-pasillo .rel-hor-horas {
        font-size: 1.25rem;
        gap: 6px;
    }

    .rel-pasillo .rel-pago {
        font-size: .76rem;
    }

    .rel-pasillo .rel-cards {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .rel-pasillo .rel-card-t {
        font-size: .8rem;
    }

    .rel-pasillo .rel-cierre-titulo {
        font-size: 1.3rem;
    }

    .rel-pasillo .rel-cierre-texto {
        font-size: .85rem;
    }

    .rel-pasillo .rel-cta {
        padding: .55em .95em;
        font-size: .78rem;
    }

    .rel-pasillo .rel-fin-acciones {
        gap: 7px;
    }

    .rel-pasillo .rel-pas-vent .rel-leyenda {
        font-size: .85rem;
    }

    .rel-pasillo .rel-pas-vent .rel-marco {
        border-width: 5px;
        border-bottom-width: 7px;
        max-height: 30vh;
    }

    .rel-pasillo .rel-escena * {
        max-width: 100%;
    }

    .rel-pasillo .rel-escena {
        overflow-wrap: anywhere;
    }
    /* vista previa: las próximas escenas asoman por los costados, más atrás */
    .rel-fantasma {
        display: block;
        min-height: 110px;
        padding: 12px;
        --y: -18vh;
        --zf: -420px;
    }

    .rel-fantasma {
        width: min(52vw, 240px);
        margin-left: calc(min(52vw, 240px) / -2);
    }

        .rel-fantasma.rel-pas-L {
            --x: -72vw;
            --ry: 22deg;
        }

        .rel-fantasma.rel-pas-R {
            --x: 72vw;
            --ry: -22deg;
        }

        .rel-fantasma.rel-pas-C {
            --x: 0px;
            --y: -26vh;
        }

    .rel-fantasma-2 {
        --zf: -900px;
        --y: -20vh;
    }

        .rel-fantasma-2.rel-pas-L {
            --x: -84vw;
        }

        .rel-fantasma-2.rel-pas-R {
            --x: 84vw;
        }

    .rel-fantasma b {
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .rel-fantasma-foto {
        padding: 0;
    }
}

/* v16 · celular: el panel se ancla debajo de la barra superior (no centrado) y nunca invade la guía; lo que no entra se desplaza dentro del panel */
@media (max-width: 899px) {
    .rel-m-atractivo.rel-pasillo .rel-escena {
        inset: clamp(98px, 13vh, 120px) auto auto 50%;
        --ty: 0%;
        --y: 0px;
        transform-origin: 50% 0;
        max-height: calc(100% - clamp(98px, 13vh, 120px) - clamp(285px, 38vh, 330px));
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

        .rel-m-atractivo.rel-pasillo .rel-escena.rel-pas-C {
            --y: 0px;
        }

        .rel-m-atractivo.rel-pasillo .rel-escena.rel-pas-vent {
            max-height: calc(100% - clamp(98px, 13vh, 120px) - clamp(285px, 38vh, 330px));
        }

    .rel-pasillo .rel-escena > * {
        min-width: 0;
    }
    /* logística: horarios, puntos y pagos más compactos */
    .rel-pasillo .rel-hor {
        padding: 7px 10px 8px;
        border-radius: 6px;
    }

    .rel-pasillo .rel-hor-est {
        font-size: .78rem;
    }

    .rel-pasillo .rel-hor-horas {
        font-size: 1.05rem;
        margin: .1em 0 .35em;
        gap: 5px;
        flex-wrap: nowrap;
    }

    .rel-pasillo .rel-hor-flecha {
        min-width: 10px;
        max-width: 60px;
    }

    .rel-pasillo .rel-hor-texto {
        font-size: .8em;
    }

    .rel-pasillo .rel-hor-nota {
        display: none;
    }

    .rel-pasillo .rel-hor-dia {
        height: 6px;
    }

    .rel-pasillo .rel-logi .rel-item {
        padding: .3em .55em;
        font-size: .78rem;
        border-radius: 8px;
        gap: .5em;
    }

        .rel-pasillo .rel-logi .rel-item .rel-ico {
            width: 1.35em;
            height: 1.35em;
        }

    .rel-pasillo .rel-lista {
        gap: 5px;
    }

    .rel-pasillo .rel-pagos {
        gap: 5px 6px;
    }

    .rel-pasillo .rel-pagos-t {
        font-size: .76rem;
        width: 100%;
        margin: 2px 0 0;
    }

        .rel-pasillo .rel-pagos-t::after {
            width: 22px;
        }

    .rel-pasillo .rel-pago {
        font-size: .72rem;
        padding: .25em .7em .25em .3em;
    }

    .rel-pasillo .rel-pago-i {
        width: 1.6em;
        height: 1.6em;
    }

    .rel-pasillo .rel-escena .rel-h {
        margin-bottom: 6px;
    }

    .rel-pasillo .rel-card-foto {
        max-height: 70px;
    }
}

@media (max-width: 899px) and (max-height: 700px) {
    .rel-pasillo .rel-stat-med {
        display: none;
    }

    .rel-pasillo .rel-frase-texto {
        font-size: .85rem;
    }

    .rel-pasillo .rel-intro-titulo {
        font-size: 1.25rem;
    }

    .rel-pasillo .rel-intro-sub {
        display: none;
    }

    .rel-pasillo .rel-logi .rel-lista > .rel-proy:nth-child(n+4) {
        display: none;
    }
}

/* v16b · celular: horarios en una sola línea, puntos y pagos acotados para que todo entre sin desplazar */
@media (max-width: 899px) {
    .rel-pasillo .rel-hor {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px 8px;
        padding: 6px 10px;
    }

    .rel-pasillo .rel-hor-est {
        font-size: .74rem;
        min-width: 0;
    }

        .rel-pasillo .rel-hor-est span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .rel-pasillo .rel-hor-horas {
        margin: 0;
        font-size: 1rem;
    }

    .rel-pasillo .rel-hor-dia, .rel-pasillo .rel-hor-ejes {
        display: none;
    }

    .rel-pasillo .rel-horarios {
        gap: 6px;
    }

    .rel-pasillo .rel-logi {
        gap: 7px;
    }

        .rel-pasillo .rel-logi .rel-lista > .rel-proy:nth-child(n+4) {
            display: none;
        }

    .rel-pasillo .rel-pagos .rel-pago:nth-child(n+6) {
        display: none;
    }
}

@media (max-width: 899px) and (max-height: 700px) {
    .rel-pasillo .rel-logi .rel-lista > .rel-proy:nth-child(n+3) {
        display: none;
    }

    .rel-pasillo .rel-pagos .rel-pago:nth-child(n+5) {
        display: none;
    }

    .rel-pasillo .rel-pagos-t {
        display: none;
    }

    .rel-pasillo .rel-logi .rel-item {
        font-size: .72rem;
        padding: .25em .5em;
    }

    .rel-pasillo .rel-hor {
        padding: 3px 8px;
    }

    .rel-pasillo .rel-horarios, .rel-pasillo .rel-logi {
        gap: 4px;
    }

    .rel-m-atractivo.rel-pasillo .rel-escena {
        padding: 10px 11px 11px;
    }
}

/* v16c · escritorio: la logística más cargada entra sin desplazar */
.rel-pasillo .rel-hor-ejes, .rel-pasillo .rel-hor-nota {
    display: none;
}

.rel-pasillo .rel-hor {
    padding: 8px 12px 9px;
}

.rel-pasillo .rel-logi .rel-item {
    padding: .35em .7em;
}

.rel-pasillo .rel-logi .rel-lista {
    gap: 6px;
}

    .rel-pasillo .rel-logi .rel-lista > .rel-proy:nth-child(n+5) {
        display: none;
    }

.rel-pasillo .rel-pagos-t {
    width: 100%;
}

@media (min-width: 900px) {
    .rel-pasillo .rel-hor {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px 10px;
        padding: 8px 12px;
    }

    .rel-pasillo .rel-hor-est {
        font-size: .85rem;
        min-width: 0;
    }

    .rel-pasillo .rel-hor-horas {
        margin: 0;
        font-size: 1.3rem;
        gap: 8px;
    }

    .rel-pasillo .rel-hor-dia {
        display: none;
    }

    .rel-pasillo .rel-horarios {
        gap: 8px;
    }
}

@media (min-width: 900px) {
    .rel-pasillo .rel-pagos {
        gap: 6px 8px;
    }

    .rel-pasillo .rel-pagos-t {
        margin: 0;
        font-size: .85rem;
    }

    .rel-pasillo .rel-pago {
        font-size: .8rem;
        padding: .2em .75em .2em .3em;
        line-height: 1.2;
    }

    .rel-pasillo .rel-pago-i {
        width: 1.55em;
        height: 1.55em;
    }
}

@media (min-width: 900px) {
    .rel-m-atractivo.rel-pasillo .rel-escena {
        max-height: calc(100% - 160px);
    }
}

@media (max-width: 899px) and (max-height: 700px) {
    .rel-pasillo .rel-logi .rel-lista > .rel-proy:nth-child(n+2) {
        display: none;
    }

    .rel-pasillo .rel-pagos .rel-pago:nth-child(n+5) {
        display: none;
    }
}


/* v17 · celulares: pasillo liviano.
   En el celular real el navegador descartaba capas (la barra de arriba y los paneles parpadeaban): las capas 3D eran enormes y se repintaban en cada cuadro
   al correr las texturas. Acá el pasillo es más corto y angosto, no repinta nada (el avance es un desplazamiento por transform, que va por GPU)
   y los elementos fijos quedan en su propia capa. */
.rel-top, .rel-pie {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.rel-root {
    overscroll-behavior: none;
    touch-action: manipulation;
}

.rel-m-atractivo.rel-pasillo .rel-escena, .rel-ventana, .rel-fantasma {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@media (max-width: 899px) {
    @supports (height: 100dvh) {
        .rel-root {
            bottom: auto;
            height: 100dvh;
        }
    }

    .rel-pasillo {
        --pW: 900px;
        --pL: 2900px;
    }

    .rel-piso, .rel-techo, .rel-pared, .rel-techo::after {
        transition: none;
        background-position: 0 0, 0 0, 0 0, 0 0;
    }

    .rel-pared {
        background-position: 0 0, 0 0, 0 0;
    }

    .rel-techo::after {
        background-position: 0 0;
        filter: none;
        background: repeating-linear-gradient(0deg, rgba(var(--holo-rgb), .5) 0 8px, transparent 8px 300px);
    }

    .rel-pfondo {
        transform: translate3d(0, 5px, -2500px);
    }

    .rel-pluz {
        mix-blend-mode: normal;
        opacity: .8;
    }

    .rel-mundo.rel-avanza {
        animation: relAvanza 1.3s cubic-bezier(.62, .04, .2, 1);
    }
}

@keyframes relAvanza {
    from {
        transform: translateZ(-300px);
    }

    to {
        transform: translateZ(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rel-mundo.rel-avanza {
        animation: none;
    }
}


/* v18 · modo plano (celulares): sin ninguna capa 3D. El pasillo es una imagen vectorial estática y los paneles se mueven en 2D (opacidad y desplazamiento).
   En el celular real el navegador parpadeaba con las capas 3D; el recorrido de las empresas, que es 2D, nunca tuvo el problema. */
.rel-pasillo.rel-plano .rel-pas-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: 50% 46%;
}

.rel-pasillo.rel-plano .pl-base {
    fill: var(--pb0);
}

.rel-pasillo.rel-plano .pl-techo {
    fill: var(--pb1);
}

.rel-pasillo.rel-plano .pl-piso {
    fill: var(--pb2);
}

.rel-pasillo.rel-plano .pl-pared {
    fill: var(--pb2);
}

.rel-pasillo.rel-plano .pl-gl {
    stroke: rgba(var(--oro-rgb), .26);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}

.rel-pasillo.rel-plano .pl-gp {
    stroke: rgba(var(--holo-rgb), .07);
    stroke-width: 12;
    vector-effect: non-scaling-stroke;
}

.rel-pasillo.rel-plano .pl-borde {
    stroke: var(--oro);
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
    opacity: .85;
}

.rel-pasillo.rel-plano .rel-pas-svg.rel-avanza {
    animation: relPlanoAv 1s cubic-bezier(.3, .1, .2, 1);
}

@keyframes relPlanoAv {
    from {
        transform: scale(1.09);
    }

    to {
        transform: scale(1);
    }
}

.rel-pasillo.rel-plano .rel-escenario {
    perspective: none;
}

.rel-m-atractivo.rel-pasillo.rel-plano .rel-escena {
    --sx: 0px;
    transform: translate(var(--sx), 0);
    margin-left: calc(var(--pnw) / -2);
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    animation: relPlanoIn .7s ease .2s both;
    box-shadow: 0 0 24px rgba(var(--oro-rgb), .14);
}

    .rel-m-atractivo.rel-pasillo.rel-plano .rel-escena.rel-pas-L {
        --sx: -3vw;
    }

    .rel-m-atractivo.rel-pasillo.rel-plano .rel-escena.rel-pas-R {
        --sx: 3vw;
    }

    .rel-m-atractivo.rel-pasillo.rel-plano .rel-escena.rel-pas-C {
        --sx: 0px;
    }

    .rel-m-atractivo.rel-pasillo.rel-plano .rel-escena.rel-saliendo {
        animation: relPlanoOut .3s ease-in forwards;
    }

    .rel-m-atractivo.rel-pasillo.rel-plano .rel-escena.rel-pas-vent {
        box-shadow: none;
    }

@keyframes relPlanoIn {
    from {
        opacity: 0;
        transform: translate(var(--sx), 26px) scale(.94);
    }

    to {
        opacity: 1;
        transform: translate(var(--sx), 0) scale(1);
    }
}

@keyframes relPlanoOut {
    from {
        opacity: 1;
        transform: translate(var(--sx), 0);
    }

    to {
        opacity: 0;
        transform: translate(var(--sx), -14px) scale(.97);
    }
}

.rel-pasillo.rel-plano .rel-ventana {
    display: none;
}

.rel-pasillo.rel-plano .rel-fantasma {
    top: clamp(106px, 14vh, 130px);
    transform: translate(var(--gx, 0px), 0) scale(.88);
    animation: relFanIn 1s ease 1s both;
    box-shadow: none;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

    .rel-pasillo.rel-plano .rel-fantasma.rel-pas-L {
        --gx: -57vw;
    }

    .rel-pasillo.rel-plano .rel-fantasma.rel-pas-R {
        --gx: 57vw;
    }

    .rel-pasillo.rel-plano .rel-fantasma.rel-pas-C {
        --gx: 0px;
    }

.rel-pasillo.rel-plano .rel-fantasma-2 {
    transform: translate(var(--gx, 0px), 0) scale(.74);
    animation-name: relFanIn2;
}

    .rel-pasillo.rel-plano .rel-fantasma-2.rel-pas-L {
        --gx: -68vw;
    }

    .rel-pasillo.rel-plano .rel-fantasma-2.rel-pas-R {
        --gx: 68vw;
    }

.rel-m-atractivo.rel-pasillo.rel-plano .rel-escena.rel-pas-C {
    margin-left: calc(min(560px, 90vw) / -2);
}