*,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0
    }

    :root {
        --fire1: #FFD700;
        --fire2: #FF8C00;
        --fire3: #FF4500;
        --red: #8B0000;
        --red-b: #B71C1C;
        --red-c: #C0392B;
        --deep: rgba(3, 7, 22, .82);
        --deep2: rgba(7, 12, 36, .78);
        --deep3: rgba(12, 16, 48, .8);
        --deep4: rgba(19, 24, 62, .82);
        --text: #F5F0E8;
        --text-m: #A0907A;
        --bebas: 'Bebas Neue', sans-serif;
        --mont: 'Montserrat', sans-serif;
        --corm: 'Cormorant Garamond', Georgia, serif;
    }

    html {
        scroll-behavior: smooth
    }

    body {
        background: #02040f url("../img/fondo_universo.webp") center top / cover no-repeat;
        background-attachment: fixed;
        color: var(--text);
        font-family: var(--mont);
        font-weight: 300;
        line-height: 1.75;
        overflow-x: hidden
    }

    /* ── FIRE TEXT ── */
    .fire-text {
        font-family: var(--bebas);
        letter-spacing: .06em;
        background: linear-gradient(180deg, #FFE066 0%, #FFB300 28%, #FF6A00 62%, #C0392B 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 0 18px rgba(255, 120, 0, .65)) drop-shadow(0 2px 6px rgba(0, 0, 0, .9));
    }

    .fire-sm {
        background: linear-gradient(180deg, #FFE066 0%, #FFB300 40%, #FF6A00 80%, #C0392B 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 0 8px rgba(255, 100, 0, .45));
    }

    /* ── PARTICLES & STARS ── */
    .stars {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden
    }

    .star {
        position: absolute;
        border-radius: 50%;
        animation:
            tw var(--d, 3s) ease-in-out infinite,
            float var(--float-d, 12s) ease-in-out infinite;
        opacity: 0;
        box-shadow:
            0 0 11px currentColor,
            0 0 24px currentColor,
            0 0 38px currentColor;
    }

    .star.g {
        background: #FFF8DD;
        color: rgba(255, 240, 190, .92)
    }

    .star.o {
        background: #FFE08A;
        color: rgba(255, 180, 54, .88)
    }

    .star.bright {
        box-shadow:
            0 0 15px currentColor,
            0 0 34px currentColor,
            0 0 52px currentColor;
        z-index: 1;
    }

    @keyframes tw {

        0%,
        100% {
            opacity: 0
        }

        50% {
            opacity: var(--op, .86)
        }
    }

    @keyframes float {
        0% {
            transform: translate3d(0, 0, 0);
        }

        20% {
            transform: translate3d(24px, -16px, 0);
        }

        40% {
            transform: translate3d(40px, 6px, 0);
        }

        60% {
            transform: translate3d(14px, 24px, 0);
        }

        80% {
            transform: translate3d(-26px, 10px, 0);
        }

        100% {
            transform: translate3d(0, 0, 0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .star {
            animation: none;
            opacity: var(--op, .35)
        }
    }

    .ptcl {
        position: fixed;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
        animation: drift var(--pd, 9s) ease-in-out infinite;
        opacity: 0
    }

    @keyframes drift {
        0% {
            transform: translateY(100vh) scale(0);
            opacity: 0
        }

        20% {
            opacity: .6
        }

        80% {
            opacity: .2
        }

        100% {
            transform: translateY(-20px) scale(1);
            opacity: 0
        }
    }

    /* ── NAV ── */
    nav {
        padding: 1rem 2.5rem;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(3, 6, 20, .88);
        border-bottom: 1px solid rgba(255, 140, 0, .18);
        backdrop-filter: blur(5px);
    }

    .nb {
        font-family: var(--bebas);
        font-size: 1.7rem;
        letter-spacing: .1em;
        text-decoration: none;
    }

    .nb-accent {
        position: relative;
        display: inline-block;
        background: linear-gradient(180deg, #FFE066 0%, #FFB300 28%, #FF6A00 62%, #C0392B 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent
    }

    .nb-accent::before {
        content: '´';
        position: absolute;
        top: -.5em;
        left: .12em;
        color: #FFD166;
        font-family: Arial, sans-serif;
        font-size: .42em;
        font-weight: 700;
        line-height: 1;
        -webkit-text-fill-color: #FFD166;
        text-shadow: 0 0 7px rgba(255, 166, 42, .72)
    }

    .nl {
        display: flex;
        gap: 1.75rem;
        list-style: none
    }

    .nl a {
        font-family: var(--mont);
        font-size: .67rem;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--text-m);
        text-decoration: none;
        transition: color .3s
    }

    .nl a:hover {
        color: var(--fire2)
    }

    /* ── HERO ── */
    .hero {
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden
    }

    .hero-bg {
        position: absolute;
        inset: 0;
        background-size: cover;
        filter: brightness(1.08) saturate(1.3) contrast(1.08);
        transform: translateY(82px);
    }

    .hero-vig {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(5, 5, 5, .48) 0%, transparent 15%, transparent 70%, rgba(5, 5, 5, .98) 100%);
    }

    .scroll-h {
        position: absolute;
        bottom: 1.2rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .4rem;
        opacity: .28;
        z-index: 2;
        pointer-events: none
    }

    .scroll-h span {
        font-size: .52rem;
        letter-spacing: .32em;
        text-transform: uppercase;
        color: var(--fire2);
        font-family: var(--mont)
    }

    .scroll-l {
        width: 1px;
        height: 30px;
        background: linear-gradient(to bottom, #FF8C00, transparent);
        animation: sp 2s ease-in-out infinite
    }

    @keyframes sp {

        0%,
        100% {
            opacity: .15
        }

        50% {
            opacity: 1
        }
    }

    /* ── CAPTION ── */
    .caption {
        position: relative;
        z-index: 1;
        background: rgba(3, 7, 22, .7);
        text-align: center;
        padding: 2.75rem 2rem 3.25rem;
        border-top: 3px solid transparent;
        border-image: linear-gradient(90deg, transparent, var(--fire3), var(--fire2), var(--fire1), var(--fire2), var(--fire3), transparent) 1;
    }

    .caption-ey {
        font-family: var(--mont);
        font-size: .6rem;
        letter-spacing: .42em;
        text-transform: uppercase;
        color: var(--fire2);
        margin-bottom: 1rem;
        opacity: .9;
        text-shadow: 0 0 12px rgba(255, 140, 0, .4)
    }

    .title-row {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: .12em;
        flex-wrap: nowrap;
        line-height: 1;
        margin-bottom: .6rem
    }

    .t-ruben {
        font-family: var(--bebas);
        font-size: clamp(3.5rem, 10vw, 8.5rem);
        letter-spacing: .06em;
        background: linear-gradient(180deg, #FFE066 0%, #FFB300 28%, #FF6A00 62%, #C0392B 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 5px 0 #000) drop-shadow(0 8px 20px rgba(0, 0, 0, .98)) drop-shadow(0 0 25px rgba(255, 100, 0, .4));
    }

    .t-randu {
        font-family: var(--bebas);
        font-size: clamp(3.5rem, 10vw, 8.5rem);
        letter-spacing: .06em;
        color: #fff;
        text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 6px 0 #000, 0 10px 24px #000, 0 0 40px rgba(0, 0, 0, .98);
    }

    .t-reg {
        font-family: var(--bebas);
        font-size: .32em;
        vertical-align: super;
        color: rgba(255, 255, 255, .5);
        text-shadow: 0 2px 8px #000
    }

    .caption-sub {
        font-family: var(--mont);
        font-size: .62rem;
        letter-spacing: .28em;
        text-transform: uppercase;
        color: var(--text-m);
        margin: .85rem 0 2rem
    }

    .ctas {
        display: flex;
        gap: .85rem;
        justify-content: center;
        flex-wrap: wrap
    }

    /* ── BUTTONS ── */
    .btn-fire {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        background: linear-gradient(135deg, #FF8C00, #C0392B);
        border: none;
        color: #fff;
        padding: .9rem 2.4rem;
        font-family: var(--bebas);
        font-size: 1.2rem;
        letter-spacing: .18em;
        text-decoration: none;
        cursor: pointer;
        transition: all .35s;
        box-shadow: 0 4px 22px rgba(255, 100, 0, .38);
        clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    }

    .btn-fire:hover {
        background: linear-gradient(135deg, #FFB300, #E53935);
        transform: translateY(-2px);
        box-shadow: 0 6px 30px rgba(255, 120, 0, .6)
    }

    .chatbot-float {
        position: fixed;
        right: 1.5rem;
        bottom: 1.5rem;
        z-index: 250;
        width: 4.25rem;
        height: 4.25rem;
        border: 1px solid rgba(255, 215, 0, .7);
        border-radius: 50%;
        background: linear-gradient(135deg, #FF8C00, #8B0000);
        color: #fff;
        display: grid;
        place-items: center;
        cursor: pointer;
        box-shadow: 0 5px 24px rgba(255, 100, 0, .45), 0 0 0 5px rgba(139, 0, 0, .2);
        transition: transform .3s, box-shadow .3s;
        animation: chatbot-in .7s ease-out both;
    }

    .chatbot-float:hover,
    .chatbot-float:focus-visible {
        transform: translateY(-4px) scale(1.05);
        box-shadow: 0 8px 30px rgba(255, 120, 0, .65), 0 0 0 7px rgba(139, 0, 0, .24);
        outline: none;
    }

    .chatbot-panel[hidden] {
        display: none;
    }

    .chatbot-panel {
        position: fixed;
        right: 1.5rem;
        bottom: 6.4rem;
        z-index: 249;
        width: min(22rem, calc(100vw - 2rem));
        max-height: min(35rem, calc(100vh - 8rem));
        overflow-y: auto;
        overscroll-behavior: contain;
        touch-action: pan-y;
        scrollbar-gutter: stable;
        color: var(--text);
        background: rgba(7, 12, 36, .97);
        border: 1px solid rgba(255, 140, 0, .45);
        box-shadow: 0 12px 36px rgba(0, 0, 0, .55), 0 0 24px rgba(255, 100, 0, .16);
        transform-origin: bottom right;
        animation: chatbot-panel-in .35s ease-out both;
    }

    .chatbot-panel-head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .85rem 1rem;
        background: linear-gradient(135deg, rgba(139, 0, 0, .95), rgba(255, 100, 0, .75));
        border-bottom: 1px solid rgba(255, 215, 0, .35);
    }

    .chatbot-panel-title {
        display: flex;
        align-items: center;
        gap: .55rem;
        font-family: var(--bebas);
        font-size: 1.1rem;
        letter-spacing: .08em;
        color: #fff;
    }

    .chatbot-head-icon {
        width: 1.7rem;
        height: 1.7rem;
        color: var(--fire1);
    }

    .chatbot-close {
        width: 1.8rem;
        height: 1.8rem;
        border: 1px solid rgba(255, 255, 255, .5);
        border-radius: 50%;
        background: transparent;
        color: #fff;
        font-size: 1.35rem;
        line-height: 1;
        cursor: pointer;
        transition: background .25s, transform .25s;
    }

    .chatbot-close:hover,
    .chatbot-close:focus-visible {
        background: rgba(255, 255, 255, .18);
        transform: rotate(90deg);
        outline: none;
    }

    .chatbot-message {
        padding: 1.15rem 1.1rem 1.25rem;
        font-size: .78rem;
        line-height: 1.65;
    }

    .chatbot-line {
        display: flex;
        align-items: flex-start;
        gap: .5rem;
        margin-bottom: .85rem;
        color: rgba(245, 240, 232, .84);
    }

    .chatbot-line strong {
        color: #fff;
        font-weight: 600;
    }

    .chatbot-message-icon {
        width: 1.15rem;
        height: 1.15rem;
        flex: 0 0 1.15rem;
        margin-top: .18rem;
        color: var(--fire1);
    }

    .chatbot-messages {
        display: flex;
        flex-direction: column;
        gap: .65rem;
        max-height: 15rem;
        overflow-y: auto;
        margin: -.15rem 0 1rem;
        padding-right: .25rem;
        overscroll-behavior: contain;
    }

    .chatbot-reply {
        align-self: flex-start;
        max-width: 92%;
        padding: .65rem .75rem;
        border-left: 2px solid var(--fire2);
        background: rgba(255, 140, 0, .08);
        color: rgba(255, 255, 255, .88);
        font-size: .75rem;
        line-height: 1.6;
        animation: chatbot-response-in .35s ease-out both;
    }

    .chatbot-reply-user {
        align-self: flex-end;
        border-left: 0;
        border-right: 2px solid var(--fire1);
        background: rgba(139, 0, 0, .25);
        text-align: right;
    }

    .chatbot-reply strong {
        color: var(--fire1);
    }

    .chatbot-form {
        display: flex;
        align-items: flex-end;
        gap: .5rem;
        padding-top: .85rem;
        border-top: 1px solid rgba(255, 140, 0, .18);
    }

    .chatbot-form textarea {
        min-width: 0;
        flex: 1;
        resize: none;
        padding: .65rem .7rem;
        border: 1px solid rgba(255, 140, 0, .35);
        background: rgba(0, 0, 0, .2);
        color: #fff;
        font: .75rem/1.45 var(--mont);
        transition: border-color .25s, box-shadow .25s;
    }

    .chatbot-form textarea::placeholder {
        color: var(--text-m);
    }

    .chatbot-form textarea:focus {
        border-color: var(--fire1);
        box-shadow: 0 0 0 2px rgba(255, 215, 0, .12);
        outline: none;
    }

    .chatbot-send {
        width: 2.65rem;
        height: 2.65rem;
        flex: 0 0 2.65rem;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 215, 0, .55);
        border-radius: 50%;
        background: linear-gradient(135deg, #FF8C00, #8B0000);
        color: #fff;
        cursor: pointer;
        transition: transform .25s, box-shadow .25s;
    }

    .chatbot-attach {
        width: 2.65rem;
        height: 2.65rem;
        flex: 0 0 2.65rem;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 140, 0, .35);
        border-radius: 50%;
        color: var(--fire1);
        cursor: pointer;
        transition: background .25s, border-color .25s, transform .25s;
    }

    .chatbot-attach:hover,
    .chatbot-attach:focus-within {
        background: rgba(255, 140, 0, .16);
        border-color: var(--fire1);
        transform: scale(1.06);
    }

    .chatbot-attach svg {
        width: 1.15rem;
        height: 1.15rem;
    }

    .chatbot-send:hover,
    .chatbot-send:focus-visible {
        transform: scale(1.08);
        box-shadow: 0 0 18px rgba(255, 140, 0, .45);
        outline: none;
    }

    .chatbot-send:disabled {
        cursor: wait;
        opacity: .55;
    }

    .chatbot-send svg {
        width: 1.15rem;
        height: 1.15rem;
    }

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

    .chatbot-emphasis strong,
    .chatbot-question strong {
        color: #FFB300;
    }

    .chatbot-topics {
        display: flex;
        justify-content: space-between;
        gap: .35rem;
        margin: -.1rem 0 1rem 1.65rem;
        color: var(--fire1);
        font-family: var(--bebas);
        font-size: .95rem;
        letter-spacing: .07em;
    }

    .chatbot-topics span {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
    }

    .chatbot-topics svg {
        width: 1rem;
        height: 1rem;
    }

    .chatbot-options {
        display: grid;
        gap: .55rem;
        margin: .2rem 0 1rem;
    }

    .chatbot-option {
        width: 100%;
        padding: .65rem .8rem;
        border: 1px solid rgba(255, 140, 0, .38);
        background: rgba(255, 140, 0, .06);
        color: rgba(255, 255, 255, .9);
        font: 600 .7rem var(--mont);
        line-height: 1.35;
        text-align: left;
        cursor: pointer;
        transition: background .25s, border-color .25s, color .25s, transform .25s;
    }

    .chatbot-option:hover,
    .chatbot-option:focus-visible {
        background: rgba(255, 140, 0, .18);
        border-color: var(--fire1);
        color: #fff;
        transform: translateX(3px);
        outline: none;
    }

    .chatbot-option[aria-pressed="true"] {
        background: rgba(255, 140, 0, .22);
        border-color: var(--fire1);
        color: var(--fire1);
    }

    .chatbot-response[hidden] {
        display: none;
    }

    .chatbot-response {
        margin: .25rem 0 1rem;
        padding: .85rem;
        border-left: 2px solid var(--fire2);
        background: rgba(255, 140, 0, .08);
        color: rgba(255, 255, 255, .9);
        font-size: .76rem;
        line-height: 1.65;
        animation: chatbot-response-in .35s ease-out both;
    }

    .chatbot-response p {
        margin: 0 0 .65rem;
    }

    .chatbot-response p:last-child {
        margin-bottom: 0;
    }

    .chatbot-response strong {
        color: var(--fire1);
    }

    .chatbot-response-icon,
    .chatbot-inline-icon {
        display: inline-block;
        width: 1.05rem;
        height: 1.05rem;
        vertical-align: -.22rem;
        color: var(--fire1);
    }

    .chatbot-response-icon {
        margin-right: .25rem;
    }

    @keyframes chatbot-response-in {
        from {
            opacity: 0;
            transform: translateY(.35rem);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .chatbot-private {
        margin-bottom: 0;
        padding-top: .9rem;
        border-top: 1px solid rgba(255, 140, 0, .18);
        color: var(--text-m);
    }

    @keyframes chatbot-panel-in {
        from {
            opacity: 0;
            transform: translateY(.6rem) scale(.96);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .chatbot-icon {
        width: 2.25rem;
        height: 2.25rem;
        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .45));
    }

    @keyframes chatbot-in {
        from {
            opacity: 0;
            transform: translateY(1rem) scale(.8);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .tarot-contact {
        gap: .8rem;
        padding: 1.05rem 2.8rem;
        font-size: 1.35rem;
    }

    .tarot-contact .wa-icon {
        width: 1.2em;
        height: 1.2em;
        flex-basis: 1.2em;
    }

    .btn-wa {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        background: rgba(37, 211, 102, .08);
        border: 1.5px solid #25D366;
        color: #25D366;
        padding: .9rem 2.4rem;
        font-family: var(--bebas);
        font-size: 1.2rem;
        letter-spacing: .18em;
        text-decoration: none;
        cursor: pointer;
        transition: all .35s;
        box-shadow: 0 4px 22px rgba(37, 211, 102, .2);
        clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    }

    .wa-icon {
        display: inline-flex;
        width: 1.05em;
        height: 1.05em;
        flex: 0 0 1.05em;
    }

    .wa-icon svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    .btn-wa:hover {
        background: #25D366;
        color: #fff;
        box-shadow: 0 0 28px rgba(37, 211, 102, .42)
    }

    /* ── SHARED ── */
    .si {
        max-width: 980px;
        margin: 0 auto;
        padding: 5.5rem 2rem
    }

    .ey {
        font-family: var(--mont);
        font-size: .58rem;
        letter-spacing: .42em;
        text-transform: uppercase;
        color: var(--fire2);
        margin-bottom: 1rem;
        display: block
    }

    .st {
        font-family: var(--bebas);
        font-size: clamp(2rem, 5.5vw, 3.8rem);
        color: #fff;
        line-height: 1.05;
        margin-bottom: 1.4rem;
        letter-spacing: .04em
    }

    .sl {
        width: 48px;
        height: 2px;
        margin-bottom: 2.25rem;
        background: linear-gradient(90deg, var(--fire3), var(--fire2), var(--fire1));
        opacity: .85
    }

    .sb {
        font-size: .93rem;
        color: var(--text-m);
        line-height: 1.95;
        font-family: var(--mont)
    }

    /* ── RED BARS ── */
    .rbar {
        background: linear-gradient(90deg, var(--red) 0%, #6B0000 30%, var(--red-b) 50%, #6B0000 70%, var(--red) 100%);
        padding: .55rem 2rem;
        border-top: 1px solid rgba(255, 80, 0, .2);
        border-bottom: 1px solid rgba(255, 80, 0, .2);
        display: flex;
        align-items: center
    }

    .rbar span {
        font-family: var(--bebas);
        font-size: .92rem;
        letter-spacing: .3em;
        color: #fff;
        text-shadow: 0 0 10px rgba(255, 80, 0, .4)
    }

    /* ── BIENVENIDOS ── */
    .bienvenidos {
        background: linear-gradient(160deg, #0A0A0A, #111);
        border-top: 1px solid rgba(255, 100, 0, .12);
        border-bottom: 1px solid rgba(255, 100, 0, .12)
    }

    .bienvenidos .si {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4.5rem;
        align-items: center
    }

    .ritual-star {
        opacity: .3;
        overflow: visible;
        filter: drop-shadow(0 0 5px rgba(255, 140, 0, .18));
    }

    .ritual-pentagram {
        transform-box: fill-box;
        transform-origin: center;
        animation: ritual-fire 3.8s ease-in-out infinite;
    }

    .ritual-pentagram-inner,
    .ritual-ring-inner {
        opacity: .72;
        animation: ritual-flicker 2.9s ease-in-out infinite;
    }

    .ritual-flames {
        transform-box: fill-box;
        transform-origin: center;
        animation: ritual-flames 2.4s ease-in-out infinite;
    }

    .ritual-core {
        animation: ritual-core 2.1s ease-in-out infinite;
    }

    @keyframes ritual-fire {

        0%,
        100% {
            opacity: .78;
            filter: drop-shadow(0 0 3px rgba(255, 166, 42, .35));
            transform: scale(1);
        }

        50% {
            opacity: 1;
            filter: drop-shadow(0 0 9px rgba(255, 166, 42, .72));
            transform: scale(1.018);
        }
    }

    @keyframes ritual-flicker {

        0%,
        100% {
            opacity: .5;
        }

        38% {
            opacity: .9;
        }

        67% {
            opacity: .62;
        }
    }

    @keyframes ritual-flames {

        0%,
        100% {
            opacity: .5;
            transform: scale(1) translateY(0);
        }

        45% {
            opacity: .95;
            transform: scale(1.045) translateY(-2px);
        }

        72% {
            opacity: .66;
            transform: scale(.98) translateY(1px);
        }
    }

    @keyframes ritual-core {

        0%,
        100% {
            opacity: .55;
            transform: scale(.9);
        }

        50% {
            opacity: .95;
            transform: scale(1.12);
        }
    }

    @media (prefers-reduced-motion: reduce) {

        .ritual-pentagram,
        .ritual-pentagram-inner,
        .ritual-ring-inner,
        .ritual-flames,
        .ritual-core {
            animation: none;
        }
    }

    /* ── MAESTROS ── */
    .maestros {
        background: var(--deep)
    }

    .maestros .si {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: start
    }

    .mphoto {
        position: relative
    }

    .mframe {
        border: 1px solid rgba(255, 140, 0, .32);
        padding: 5px;
        background: var(--deep3)
    }

    .mframe img {
        width: 100%;
        display: block;
        filter: brightness(.95) saturate(1.1) contrast(1.05)
    }

    /* .mphoto::before {
        content: '';
        position: absolute;
        top: -8px;
        left: -8px;
        right: 8px;
        bottom: 8px;
        border-top: 2px solid rgba(255, 100, 0, .45);
        border-left: 2px solid rgba(255, 100, 0, .45);
        pointer-events: none;
        z-index: 1
    } */

    .ybadge {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .2rem;
        margin-top: .85rem;
        text-align: center
    }

    .ybadge .yn {
        font-family: var(--bebas);
        font-size: 6rem;
        line-height: 1;
        letter-spacing: .04em
    }

    .ybadge .yl {
        font-family: var(--mont);
        font-size: 1rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--text-m)
    }

    @media(max-width:768px) {
        .ybadge {
            gap: .15rem;
        }

        .ybadge .yn {
            font-size: 3.4rem;
        }

        .ybadge .yl {
            font-size: .67rem;
        }
    }

    .mbadges {
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
        margin-top: 1.75rem
    }

    .mbadge {
        display: flex;
        gap: .9rem;
        align-items: center;
        padding: 1rem 1.3rem;
        background: rgba(255, 100, 0, .04);
        border: 1px solid rgba(255, 100, 0, .18)
    }

    .mbadge-ic {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        color: var(--fire2);
        border: 1px solid rgba(255, 140, 0, .3);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--bebas);
        font-size: 1.4rem
    }

    .heart-icon {
        width: 1.55rem;
        height: 1.55rem;
        display: block;
        filter: drop-shadow(0 0 6px rgba(255, 140, 0, .45));
    }

    .mbadge-n {
        font-family: var(--mont);
        font-size: .91rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: .12rem
    }

    .mbadge-r {
        font-family: var(--mont);
        font-size: .65rem;
        letter-spacing: .15em;
        text-transform: uppercase;
        color: var(--text-m)
    }

    /* ── SECRETO DE AMOR — full-width banner ── */
    .secreto {
        position: relative;
        overflow: hidden;
        height: min(500px, 60vw);
    }

    .secreto-bg {
        position: absolute;
        inset: 0;
        background: url("../img/secreto_de_amor2.png") center/cover no-repeat;
        filter: brightness(.65) saturate(1.3)
    }

    .secreto-ov {
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(5, 5, 5, .92) 0%, rgba(5, 5, 5, .5) 50%, transparent 100%)
    }

    .secreto-content {
        position: absolute;
        top: 15%;
        right: 10%;
        width: min(100% - 3rem, 620px);
        z-index: 1;
        padding: 3rem 2rem;
        text-align: right;
    }

    .secreto-ey {
        font-family: var(--mont);
        font-size: .6rem;
        letter-spacing: .4em;
        text-transform: uppercase;
        color: var(--fire2);
        margin-bottom: .75rem;
        opacity: .9
    }

    .secreto-title {
        font-family: var(--bebas);
        font-size: clamp(2.5rem, 6vw, 4.5rem);
        color: #fff;
        letter-spacing: .06em;
        line-height: 1.05;
        margin-bottom: 1rem;
        text-shadow: 0 2px 30px rgba(0, 0, 0, .9)
    }

    .secreto-title span {
        color: var(--fire1)
    }

    .secreto-body {
        font-size: .9rem;
        color: rgba(255, 255, 255, .75);
        /* max-width: 420px; */
        line-height: 1.8;
        margin-bottom: 1.5rem
    }

    /* ── GALERIA ALTARES ── */
    .galeria {
        background: var(--deep2);
        border-top: 1px solid rgba(255, 100, 0, .1)
    }

    .galeria .si {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem
    }

    .gg2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .85rem;
        margin-top: 2rem
    }

    .gi {
        position: relative;
        overflow: hidden;
        aspect-ratio: 4/3
    }

    .gi img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(.85) saturate(1.2) contrast(1.08);
        transition: filter .5s, transform .5s
    }

    .gi:hover img {
        filter: brightness(.98) saturate(1.35) contrast(1.1);
        transform: scale(1.04)
    }

    .gi::after {
        content: attr(data-l);
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 2.5rem 1rem .8rem;
        background: linear-gradient(transparent, rgba(5, 5, 5, .93));
        font-family: var(--bebas);
        font-size: .8rem;
        letter-spacing: .22em;
        color: var(--fire1);
        text-align: center;
        text-shadow: 0 0 10px rgba(255, 100, 0, .45)
    }

    /* ── DISTINCION ── */
    .distincion {
        background: var(--deep3);
        border-top: 1px solid rgba(139, 0, 0, .35);
        border-bottom: 1px solid rgba(139, 0, 0, .35)
    }

    .distincion .si {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 4rem;
        align-items: center
    }

    .dq {
        font-family: var(--corm);
        font-size: clamp(1.05rem, 2.5vw, 1.55rem);
        font-style: italic;
        color: #fff;
        line-height: 1.7;
        border-left: 3px solid var(--fire2);
        padding-left: 1.65rem;
        margin-bottom: 2rem
    }

    .rpw {
        position: relative
    }

    .rpw img {
        width: 100%;
        display: block;
        border: 1px solid rgba(255, 140, 0, .28);
        filter: brightness(.88) saturate(1.05)
    }

    .rpw::after {
        content: 'RUBÉN RANDÚ BASHALE®';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(5, 5, 5, .95));
        padding: 2.5rem 1rem .8rem;
        font-family: var(--bebas);
        font-size: .85rem;
        letter-spacing: .24em;
        color: var(--fire1);
        text-align: center;
        text-shadow: 0 0 10px rgba(255, 100, 0, .45)
    }

    /* ── SERVICIOS ── */
    .servicios {
        background: var(--deep)
    }

    .sg {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: 1.1rem;
        margin-top: 2.75rem
    }

    .sc {
        background: var(--deep2);
        border: 1px solid rgba(255, 100, 0, .1);
        padding: 1.65rem 1.4rem;
        transition: border-color .3s, transform .3s;
        position: relative;
        overflow: hidden
    }

    .sc::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 0;
        background: linear-gradient(90deg, var(--fire3), var(--fire1));
        transition: width .45s ease
    }

    .sc:hover {
        border-color: rgba(255, 140, 0, .48);
        transform: translateY(-4px)
    }

    .sc:hover::after {
        width: 100%
    }

    .sc-n {
        font-family: var(--bebas);
        color: rgba(255, 140, 0, .18);
        font-size: .58rem;
        letter-spacing: .08em;
        margin-bottom: .7rem
    }

    .sc-t {
        font-family: var(--bebas);
        font-size: 1.35rem;
        color: #fff;
        margin-bottom: .45rem;
        letter-spacing: .04em
    }

    .sc-d {
        font-size: .83rem;
        color: var(--text-m);
        line-height: 1.72
    }

    /* ── EXPERIENCIA / GALERÍA CAMPO (masonry-feel) ── */
    .experiencia {
        background: var(--deep2);
        border-top: 1px solid rgba(255, 100, 0, .1)
    }

    .exp-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .85rem;
        margin-top: 2.5rem
    }

    .exp-grid .gi-tall {
        aspect-ratio: 2/3
    }

    .exp-grid .gi-wide {
        aspect-ratio: 4/3
    }

    .exp-grid .row2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .85rem
    }

    /* ── MAPA TESTIMONIAL — foto Machu Picchu, grupo noche, traje ── */
    .presencia {
        background: var(--deep3)
    }

    .presencia .si {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem
    }

    .presencia-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: .85rem;
        margin-top: 2rem
    }

    .pg-img {
        position: relative;
        overflow: hidden;
        aspect-ratio: 3/4
    }

    .pg-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        filter: brightness(.82) saturate(1.1) contrast(1.08);
        transition: filter .45s, transform .45s
    }

    .pg-img:hover img {
        filter: brightness(.96) saturate(1.2);
        transform: scale(1.04)
    }

    .pg-img::after {
        content: attr(data-l);
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 2.5rem .75rem .7rem;
        background: linear-gradient(transparent, rgba(5, 5, 5, .92));
        font-family: var(--bebas);
        font-size: .75rem;
        letter-spacing: .2em;
        color: var(--fire1);
        text-align: center
    }

    /* ── TAROT ── */
    .tarot {
        background: var(--deep)
    }

    .tarot .si {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 4rem;
        align-items: center
    }

    .prices {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .85rem;
        margin: 1.75rem 0
    }

    .pc {
        background: transparent;
        border: none;
        padding: 1.35rem;
        text-align: center
    }

    .pc-flag {
        font-size: 1.4rem;
        margin-bottom: .35rem
    }

    .pc-amt {
        font-family: var(--bebas);
        font-size: 3rem;
        line-height: 1;
        letter-spacing: .04em
    }

    .pc-lbl {
        font-family: var(--mont);
        font-size: .90rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--text-m);
        margin-top: .2rem
    }

    .tw {
        position: relative;
        overflow: hidden
    }

    .tw img {
        width: 100%;
        display: block;
        border: 1px solid rgba(255, 140, 0, .18);
        filter: brightness(.85) saturate(1.1)
    }

    .tw::before {
        content: 'AMARRES DE AMOR · 24 HS';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(5, 5, 5, .95));
        padding: 2.5rem 1rem .82rem;
        font-family: var(--bebas);
        font-size: .9rem;
        letter-spacing: .28em;
        color: var(--fire1);
        text-align: center;
        z-index: 1;
        text-shadow: 0 0 10px rgba(255, 100, 0, .45)
    }

    /* ── CAMPO ── */
    .campo {
        background: var(--deep2);
        border-top: 1px solid rgba(255, 100, 0, .08)
    }

    .campo .si {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem
    }

    .campo-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .85rem;
        margin-top: 2rem
    }

    .ci {
        position: relative;
        overflow: hidden
    }

    .ci img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        min-height: 200px;
        display: block;
        filter: brightness(.88) saturate(1.15) contrast(1.08);
        transition: transform .5s
    }

    .ci:hover img {
        transform: scale(1.04)
    }

    .ci::after {
        content: attr(data-l);
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 2.5rem 1rem .8rem;
        background: linear-gradient(transparent, rgba(5, 5, 5, .92));
        font-family: var(--bebas);
        font-size: .82rem;
        letter-spacing: .22em;
        color: var(--fire1);
        text-align: center;
        text-shadow: 0 0 10px rgba(255, 100, 0, .4)
    }

    /* ── VUDU ── */
    .vudu {
        background: var(--deep)
    }

    .vudu .si {
        display: grid;
        grid-template-columns: 1fr 1.15fr;
        gap: 4rem;
        align-items: start
    }

    .vw {
        position: relative
    }

    .vw img {
        width: 85%;
        display: block;
        margin: 0 auto;
        border: 1px solid rgba(255, 140, 0, .32);
        filter: brightness(.9) saturate(1.12) contrast(1.08)
    }

    .vbadge {
        position: absolute;
        top: .85rem;
        right: 0;
        background: var(--red-b);
        color: #fff;
        font-family: var(--mont);
        font-size: .56rem;
        letter-spacing: .22em;
        text-transform: uppercase;
        padding: .35rem .85rem;
        font-weight: 600
    }

    .vprices {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .85rem;
        margin: 1.4rem 0
    }

    .inc {
        margin: 1.4rem 0
    }

    .inc h4 {
        font-family: var(--bebas);
        font-size: 1.25rem;
        color: #fff;
        margin-bottom: .85rem;
        letter-spacing: .04em
    }

    .ii {
        display: flex;
        gap: .7rem;
        align-items: flex-start;
        padding: .5rem 0;
        border-bottom: 1px solid rgba(255, 100, 0, .07);
        font-size: .84rem;
        color: var(--text-m)
    }

    .ii span {
        color: var(--fire2);
        flex-shrink: 0
    }

    .tnote {
        background: rgba(139, 0, 0, .1);
        border: 1px solid rgba(139, 0, 0, .32);
        border-left: 3px solid var(--fire2);
        padding: 1rem 1.35rem;
        margin-top: 1.4rem;
        font-size: .81rem;
        color: var(--text-m);
        line-height: 1.75
    }

    /* ── SESION ── */
    .sesion {
        background: var(--deep2);
        border-top: 1px solid rgba(255, 100, 0, .1)
    }

    .sesion .si {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center
    }

    .simg {
        position: relative;
        overflow: hidden
    }

    .simg img {
        width: 100%;
        display: block;
        border: 1px solid rgba(255, 140, 0, .28);
        filter: brightness(.88) saturate(1.08)
    }

    .simg::after {
        content: 'CONSULTA EN VIVO';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(5, 5, 5, .92));
        padding: 2.5rem 1rem .8rem;
        font-family: var(--bebas);
        font-size: .88rem;
        letter-spacing: .25em;
        color: var(--fire1);
        text-align: center;
        text-shadow: 0 0 10px rgba(255, 100, 0, .42)
    }

    /* ── COMO ── */
    .como {
        background: var(--deep3)
    }

    .steps {
        margin-top: 2.75rem;
        display: flex;
        flex-direction: column;
        position: relative
    }

    .steps::before {
        content: '';
        position: absolute;
        left: 1.7rem;
        top: 1.8rem;
        bottom: 1.8rem;
        width: 1px;
        background: linear-gradient(to bottom, var(--fire1), var(--fire3), transparent);
        opacity: .38
    }

    .step {
        display: flex;
        gap: 1.75rem;
        align-items: flex-start;
        padding: 1.5rem 0;
        border-bottom: 1px solid rgba(255, 100, 0, .06)
    }

    .sn {
        flex-shrink: 0;
        width: 3.4rem;
        height: 3.4rem;
        border: 1px solid rgba(255, 140, 0, .42);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--bebas);
        font-size: 1.35rem;
        background: var(--deep3);
        position: relative;
        z-index: 1;
        letter-spacing: .04em
    }

    .sn .heart-icon {
        width: 1.7rem;
        filter: drop-shadow(0 0 6px rgba(255, 140, 0, .45));
        height: 1.7rem;
    }

    .sc2 h3 {
        font-family: var(--bebas);
        font-size: 1.25rem;
        color: #fff;
        margin-bottom: .22rem;
        letter-spacing: .04em
    }

    .sc2 p {
        font-size: .86rem;
        color: var(--text-m);
        line-height: 1.72
    }

    /* ── POR QUE ── */
    .porque {
        background: var(--deep2);
        border-top: 1px solid rgba(255, 100, 0, .1)
    }

    .razones {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .85rem;
        margin-top: 2.75rem
    }

    .razon {
        display: flex;
        align-items: flex-start;
        gap: .9rem;
        padding: 1.1rem 1.3rem;
        background: var(--deep3);
        border: 1px solid rgba(255, 100, 0, .1)
    }

    .rch {
        color: var(--fire2);
        font-size: .95rem;
        margin-top: .2rem;
        flex-shrink: 0
    }

    .razon p {
        font-size: .86rem;
        color: var(--text-m);
        line-height: 1.62
    }

    /* ── PAGOS ── */
    .pagos {
        background: var(--deep)
    }

    .pg {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.1rem;
        margin-top: 2.25rem
    }

    .pcard {
        background: var(--deep2);
        border: 1px solid rgba(255, 100, 0, .12);
        padding: 1.75rem 1.4rem;
        text-align: center;
        transition: border-color .3s, transform .3s
    }

    .pcard:hover {
        border-color: rgba(255, 140, 0, .48);
        transform: translateY(-3px)
    }

    .pcard-ic {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.4rem;
        margin-bottom: .85rem
    }

    .payment-icon {
        width: 2.3rem;
        height: 2.3rem;
        display: block;
        color: var(--fire1);
        filter: drop-shadow(0 0 7px rgba(255, 180, 0, .42));
    }

    .payment-whatsapp {
        width: 2.15rem;
        height: 2.15rem;
        color: #25D366;
        filter: drop-shadow(0 0 7px rgba(37, 211, 102, .35));
    }

    .pcard-n {
        font-family: var(--bebas);
        font-size: 1.35rem;
        color: #fff;
        margin-bottom: .35rem;
        letter-spacing: .04em
    }

    .pcard-d {
        font-size: .81rem;
        color: var(--text-m);
        line-height: 1.6
    }

    /* ── LLAMADA ── */
    .llamada {
        background: linear-gradient(135deg, #0A0000 0%, var(--red) 35%, #5C0000 65%, #0A0000 100%);
        text-align: center;
        padding: 3.5rem 2rem;
        border-top: 2px solid var(--fire2);
        border-bottom: 2px solid var(--fire2);
        position: relative;
        overflow: hidden;
    }

    .llamada::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255, 140, 0, .08), transparent 70%);
        pointer-events: none
    }

    .llamada-sparkle {
        font-size: 1.3rem;
        margin-bottom: .4rem;
        letter-spacing: .1em
    }

    .ll-block {
        font-family: var(--bebas);
        letter-spacing: .06em
    }

    .ll-title {
        font-size: clamp(2rem, 5vw, 3.8rem);
        color: #fff;
        line-height: 1.05;
        text-shadow: 0 0 25px rgba(255, 80, 0, .5);
        display: block
    }

    .ll-sub {
        font-size: clamp(1rem, 2.5vw, 1.7rem);
        color: rgba(255, 255, 255, .82);
        display: block;
        margin: .35rem 0 1.5rem
    }

    .ll-sub strong {
        color: var(--fire1);
        font-family: var(--bebas)
    }

    .btn-call {
        display: inline-flex;
        align-items: center;
        gap: .85rem;
        background: linear-gradient(135deg, #FFD700, #FF8C00);
        color: #0A0000;
        padding: 1.05rem 2.8rem;
        font-family: var(--bebas);
        font-size: clamp(1.6rem, 4vw, 2.2rem);
        letter-spacing: .06em;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 0 35px rgba(255, 180, 0, .48);
        animation: callPulse 1.9s ease-in-out infinite;
        clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
    }

    .phone-icon {
        width: 1.05em;
        height: 1.05em;
        flex: 0 0 1.05em;
        display: block;
        filter: drop-shadow(0 0 6px rgba(255, 140, 0, .55));
    }

    @keyframes callPulse {

        0%,
        100% {
            transform: scale(1);
            box-shadow: 0 0 30px rgba(255, 180, 0, .4)
        }

        50% {
            transform: scale(1.03);
            box-shadow: 0 0 50px rgba(255, 180, 0, .7)
        }
    }

    .btn-call:hover {
        background: linear-gradient(135deg, #FFE066, #FF6A00)
    }

    /* ── CTA ── */
    .cta {
        background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(139, 0, 0, .18), transparent 70%);
        border-top: 1px solid rgba(255, 100, 0, .12);
        text-align: center;
        padding: 6.5rem 2rem
    }

    .cta-orn {
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(255, 140, 0, .5), transparent);
        margin: 2.5rem auto;
        max-width: 360px
    }

    .cta-tl {
        font-family: var(--bebas);
        font-size: clamp(1.8rem, 4.5vw, 3.8rem);
        margin-bottom: .4rem;
        line-height: 1.05;
        letter-spacing: .05em
    }

    .cta-sub {
        font-family: var(--corm);
        font-size: clamp(.95rem, 2.5vw, 1.45rem);
        font-style: italic;
        color: var(--text-m);
        margin-bottom: 2.25rem
    }

    .cta-meta-item {
        display: inline-flex;
        align-items: center;
        gap: .28rem;
        white-space: nowrap;
    }

    .cta-meta-icon {
        width: 1.15em;
        height: 1.15em;
        display: block;
        color: var(--fire1);
        filter: drop-shadow(0 0 4px rgba(255, 180, 0, .38));
    }

    /* ── AVISO ── */
    .aviso {
        background: #000;
        border-top: 3px solid var(--red-b);
        border-bottom: 3px solid var(--red-b);
        padding: 2.5rem 2rem;
        text-align: center;
    }

    .aviso-inner {
        max-width: 760px;
        margin: 0 auto;
        border: 1px solid rgba(192, 57, 43, .5);
        padding: 1.75rem 2.25rem;
        background: rgba(139, 0, 0, .12);
    }

    .aviso-label {
        font-family: var(--bebas);
        font-size: 1.1rem;
        letter-spacing: .28em;
        color: var(--red-b);
        margin-bottom: .85rem;
        display: block;
    }

    .aviso p {
        font-family: var(--mont);
        font-size: .78rem;
        color: rgba(255, 255, 255, .82);
        line-height: 1.88
    }

    footer {
        background: var(--deep);
        border-top: 1px solid rgba(255, 100, 0, .14);
        padding: 2.25rem 2rem;
        text-align: center;
    }

    footer .fc {
        font-family: var(--mont);
        font-size: .63rem;
        letter-spacing: .18em;
        color: var(--text-m);
        text-transform: uppercase;
        opacity: .38;
        margin-top: .3rem
    }

    /* ── COSMIC BACKGROUND ── */
    .caption,
    .bienvenidos,
    .maestros,
    .galeria,
    .distincion,
    .servicios,
    .experiencia,
    .presencia,
    .tarot,
    .campo,
    .vudu,
    .sesion,
    .como,
    .porque,
    .pagos,
    footer {
        background-color: transparent;
        background-image: none;
    }

    .bienvenidos,
    .galeria,
    .experiencia,
    .campo,
    .sesion,
    .porque {
        background-color: transparent;
    }

    .maestros,
    .distincion,
    .presencia,
    .como,
    .tarot,
    .vudu,
    .pagos {
        background-color: transparent;
    }

    .hero-vig {
        background: linear-gradient(to bottom, rgba(3, 6, 24, .52) 0%, rgba(19, 12, 47, .08) 42%, rgba(2, 4, 15, .94) 100%);
    }

    .secreto-ov {
        background: linear-gradient(to right, rgba(3, 6, 24, .94) 0%, rgba(18, 11, 52, .62) 52%, rgba(3, 6, 24, .18) 100%);
    }

    .llamada {
        background: rgba(2, 4, 15, .18);
    }

    footer {
        background: linear-gradient(rgba(2, 4, 15, .38), rgba(2, 4, 15, .72));
    }

    @media(max-width:768px) {
        nav {
            padding: .85rem 1.2rem
        }

        .chatbot-float {
            right: 1rem;
            bottom: 1rem;
            width: 3.75rem;
            height: 3.75rem;
        }

        .chatbot-panel {
            right: 1rem;
            bottom: 5.7rem;
            width: calc(100vw - 2rem);
            max-height: calc(100vh - 7rem);
        }

        .chatbot-icon {
            width: 2rem;
            height: 2rem;
        }

        .nl {
            display: none
        }

        .bienvenidos .si,
        .maestros .si,
        .distincion .si,
        .tarot .si,
        .vudu .si,
        .sesion .si {
            grid-template-columns: 1fr;
            gap: 2.25rem
        }

        .razones,
        .pg,
        .prices,
        .vprices,
        .gg2,
        .campo-grid,
        .presencia-grid,
        .exp-grid {
            grid-template-columns: 1fr
        }

        .tw,
        .rpw {
            order: -1
        }

        .vw img {
            width: 100%
        }

        .secreto {
            height: auto
        }

        .secreto-content {
            width: calc(100% - 2rem);
            padding: 2.5rem 1rem;
        }

        .title-row {
            flex-wrap: wrap;
            gap: .05em
        }

        .t-ruben,
        .t-randu {
            font-size: clamp(3rem, 14vw, 5.5rem)
        }

        .secreto {
            height: clamp(550px, 80vw, 520px)
        }
    }

    @media(prefers-reduced-motion:reduce) {

        .star,
        .ptcl,
        .scroll-l,
        .btn-call {
            animation: none;
            opacity: .4
        }
    }