/* ==========================================================================
   Mundo GoFun - Hero
   Flat surfaces, one accent colour, no glow. The lockup carries the colour;
   everything around it stays quiet so it reads as designed, not generated.
   ========================================================================== */

.gofun-hero {
    --gofun-gold: #f0c000;
    --gofun-purple: #a94bf0;
    --gofun-surface-deep: #0b0614;
    --gofun-text-dim: rgba(255, 255, 255, 0.74);

    position: relative;
    margin-bottom: 15px;
    border-radius: 14px;
    overflow: hidden;
    /* One directional gradient, not a stack of radials */
    background: linear-gradient(118deg, #23103f 0%, #150c26 52%, #0f0819 100%);
}

/* ---- Animated backdrop ----
   Two oversized, heavily blurred auras drifting on long, offset cycles. They
   are blurred well past their own radius and clipped by the hero, so no edge
   can ever surface the way the earlier rotating gradient did. A fine grain
   layer sits on top to break up banding and keep the flat fills from looking
   plastic. */
.gofun-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.gofun-orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(64px);
    will-change: transform;
}

.gofun-orb-a {
    width: 420px;
    height: 420px;
    top: -170px;
    left: -110px;
    background: #7d1ee0;
    opacity: 0.42;
    animation: gofun-drift-a 30s ease-in-out infinite;
}

.gofun-orb-b {
    width: 360px;
    height: 360px;
    right: -110px;
    bottom: -190px;
    background: #b98400;
    opacity: 0.3;
    animation: gofun-drift-b 38s ease-in-out infinite;
}

@keyframes gofun-drift-a {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(76px, 40px, 0); }
}

@keyframes gofun-drift-b {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(-66px, -34px, 0); }
}

.gofun-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Content sits above the backdrop */
.gofun-hero-main,
.gofun-loop {
    position: relative;
    z-index: 1;
}

/* ---- Band 1 ---- */
.gofun-hero-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 34px;
    padding: 22px 30px;
}

.gofun-hero-brand { min-width: 0; }

.gofun-hero-logo {
    display: block;
    height: 126px;
    width: auto;
    max-width: 100%;
    animation: gofun-float 5s ease-in-out infinite;
}

@keyframes gofun-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

.gofun-hero-copy { min-width: 0; }

.gofun-eyebrow {
    position: relative;
    margin: 0 0 14px;
    padding-bottom: 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gofun-gold);
}

.gofun-eyebrow::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 26px;
    height: 2px;
    background: var(--gofun-gold);
}

.gofun-hero-title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.3px;
    color: #fff;
}

.gofun-hero-lead {
    margin: 12px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--gofun-text-dim);
    max-width: 52ch;
}

/* Right rail: seal over CTA. Keeping the button out of the copy stack is
   what stops the hero from growing a whole extra row in height. */
.gofun-hero-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

/* Flat fill, no gradient, no coloured shadow */
.gofun-cta,
.gofun-cta:hover,
.gofun-cta:focus {
    text-decoration: none;
}

.gofun-cta {
    display: inline-block;
    padding: 11px 24px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #14061f;
    background: var(--gofun-gold);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.gofun-cta:hover {
    color: #14061f;
    background: #ffd12b;
    transform: translateY(-1px);
}

/* ---- Guarantee ----
   A shield and two lines of readable type. The medallion version put a curved
   legend at 8px, which turns to mush at this size and is what made it look
   cheap. No frame either, so it never reads as a second button. */
.gofun-guarantee {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 200px;
}

.gofun-guarantee-mark {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    fill: none;
    stroke: var(--gofun-gold);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.gofun-guarantee-tick {
    stroke-width: 2;
    stroke-linecap: round;
}

.gofun-guarantee-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gofun-guarantee-copy strong {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gofun-gold);
}

.gofun-guarantee-copy em {
    font-size: 11px;
    font-style: normal;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.55);
}

/* ---- Band 2: the GoFun loop ---- */
.gofun-loop {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 24px 34px 22px;
    list-style: none;
    border-top: 1px solid rgba(240, 192, 0, 0.16);
    background: var(--gofun-surface-deep);
}

/* Connector: the five steps are a sequence, so draw the thread they sit on.
   Insets are half a column so it starts and ends under the outer discs. */
.gofun-loop {
    /* One cycle of the 1 -> 5 progress sweep. Disc delays below are derived
       from it, so changing this value keeps the discs in step. */
    --gofun-cycle: 6s;
    --gofun-sweep: 2.7s;
}

/* Filled portion of the thread, travelling left to right */
.gofun-loop::after {
    content: '';
    position: absolute;
    left: calc(34px + 10%);
    right: calc(34px + 10%);
    top: 49px;
    height: 1px;
    /* Pseudo-elements paint after the list items, so this needs to be pushed
       back explicitly or the fill draws across the discs instead of under. */
    z-index: 0;
    transform-origin: left center;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--gofun-purple) 0%, var(--gofun-gold) 100%);
    animation: gofun-progress var(--gofun-cycle) ease-in-out infinite;
}

@keyframes gofun-progress {
    0%   { transform: scaleX(0); opacity: 1; }
    45%  { transform: scaleX(1); opacity: 1; }
    72%  { transform: scaleX(1); opacity: 1; }
    88%  { transform: scaleX(1); opacity: 0; }
    100% { transform: scaleX(0); opacity: 0; }
}

/* Each disc rings out as the sweep reaches it. The ripple lives on a
   pseudo-element so it never fights the hover transform on the disc. */
.gofun-loop-ico::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid currentColor;
    opacity: 0;
    transform: scale(0.86);
    animation: gofun-step-ping var(--gofun-cycle) ease-out infinite;
}

@keyframes gofun-step-ping {
    0%   { opacity: 0; transform: scale(0.86); }
    5%   { opacity: 0.9; transform: scale(1); }
    18%  { opacity: 0; transform: scale(1.3); }
    100% { opacity: 0; transform: scale(1.3); }
}

/* ---- Per-step arrival effects ----
   Each step reacts in its own way as the sweep reaches it, on the same delay
   ladder as the ripple. The glyph is animated rather than the disc, so the
   hover lift on the disc keeps working throughout. */
.gofun-loop-ico > i,
.gofun-coin-face {
    display: block;
    animation-duration: var(--gofun-cycle);
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

.gofun-loop-item:nth-child(1) .gofun-loop-ico > i { animation-name: gofun-fx-press;   animation-delay: 0s; }
.gofun-loop-item:nth-child(2) .gofun-loop-ico > i { animation-name: gofun-fx-lock;    animation-delay: 0.675s; }
.gofun-loop-item:nth-child(3) .gofun-loop-ico > i { animation-name: gofun-fx-swap;    animation-delay: 1.35s; }
.gofun-loop-item:nth-child(4) .gofun-coin-face    { animation-name: gofun-fx-collect; animation-delay: 2.025s; }
.gofun-loop-item:nth-child(5) .gofun-loop-ico > i { animation-name: gofun-fx-pop;     animation-delay: 2.7s; }

/* 1 - Juega: a button being pressed */
@keyframes gofun-fx-press {
    0%, 100% { transform: none; }
    4%       { transform: scale(0.76); }
    9%       { transform: scale(1.14); }
    15%      { transform: none; }
}

/* 2 - Atrapa: the sight snapping onto its target */
@keyframes gofun-fx-lock {
    0%, 100% { transform: none; opacity: 1; }
    1%       { transform: scale(1.6); opacity: 0.35; }
    9%       { transform: scale(0.9); opacity: 1; }
    15%      { transform: none; }
}

/* 3 - Intercambia: the swap, and the swap back at the end of the cycle */
@keyframes gofun-fx-swap {
    0%, 4%   { transform: rotate(0deg); }
    13%      { transform: rotate(180deg); }
    88%      { transform: rotate(180deg); }
    97%,100% { transform: rotate(360deg); }
}

/* 4 - Acumula: the coin dropping into the pile */
@keyframes gofun-fx-collect {
    0%, 100% { transform: none; }
    3%       { transform: translateY(-8px); }
    10%      { transform: translateY(0) scale(1.18); }
    16%      { transform: none; }
}

/* 5 - Gana: the trophy pops as the sparks go up */
@keyframes gofun-fx-pop {
    0%, 100% { transform: none; }
    5%       { transform: scale(1.32) rotate(-9deg); }
    13%      { transform: scale(1) rotate(0deg); }
}

/* Fireworks on the last step. One dot plus eight box-shadows at 45 degree
   intervals; scaling the pseudo-element throws the whole set outward. */
.gofun-loop-item:nth-child(5) .gofun-loop-ico::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    margin: -1.5px 0 0 -1.5px;
    border-radius: 50%;
    background: var(--gofun-gold);
    opacity: 0;
    /* 22px reach: the discs are 36-50px, so the sparks clear the rim while
       still at full opacity instead of fading out inside it. */
    box-shadow:
        22px 0 0 0 var(--gofun-gold),
        15.5px 15.5px 0 0 var(--gofun-purple),
        0 22px 0 0 var(--gofun-gold),
        -15.5px 15.5px 0 0 var(--gofun-purple),
        -22px 0 0 0 var(--gofun-gold),
        -15.5px -15.5px 0 0 var(--gofun-purple),
        0 -22px 0 0 var(--gofun-gold),
        15.5px -15.5px 0 0 var(--gofun-purple);
    animation: gofun-spark var(--gofun-cycle) ease-out 2.7s infinite;
}

@keyframes gofun-spark {
    0%   { opacity: 0; transform: scale(0.35); }
    5%   { opacity: 1; transform: scale(0.72); }
    11%  { opacity: 1; transform: scale(1.18); }
    19%  { opacity: 0; transform: scale(1.7); }
    100% { opacity: 0; transform: scale(1.7); }
}

/* delay = (n - 1) / 4 * var(--gofun-sweep) */
.gofun-loop-item:nth-child(1) .gofun-loop-ico::after { animation-delay: 0s; }
.gofun-loop-item:nth-child(2) .gofun-loop-ico::after { animation-delay: 0.675s; }
.gofun-loop-item:nth-child(3) .gofun-loop-ico::after { animation-delay: 1.35s; }
.gofun-loop-item:nth-child(4) .gofun-loop-ico::after { animation-delay: 2.025s; }
.gofun-loop-item:nth-child(5) .gofun-loop-ico::after { animation-delay: 2.7s; }

.gofun-loop::before {
    content: '';
    position: absolute;
    left: calc(34px + 10%);
    right: calc(34px + 10%);
    /* band padding-top (24) + disc radius (25) */
    top: 49px;
    height: 1px;
    z-index: 0;
    background: rgba(255, 255, 255, 0.12);
}

.gofun-loop-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.gofun-loop-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 19px;
    /* Opaque, so the connector passes behind the discs instead of through */
    color: #c88cf5;
    background: #211033;
    transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.gofun-loop-item:nth-child(even) .gofun-loop-ico {
    color: var(--gofun-gold);
    background: #291e11;
}

.gofun-loop-item:hover .gofun-loop-ico {
    transform: translateY(-3px);
    color: #e0b6ff;
    background: #2e1547;
}

.gofun-loop-item:nth-child(even):hover .gofun-loop-ico {
    color: #ffd94a;
    background: #3a2c14;
}

/* The coin is the loop's anchor, so it gets the one slow pulse */
.gofun-coin {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 22px;
}

.gofun-coin-face {
    display: block;
    /* the theme puts a right margin on inline emphasis tags, which flex
       centring counts, pushing the glyph off-centre */
    margin: 0;
    padding: 0;
    font-weight: inherit;
    line-height: 1;
}

@keyframes gofun-rise {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
}

.gofun-loop-item {
    animation: gofun-rise 0.45s ease both;
}

.gofun-loop-item:nth-child(1) { animation-delay: 0.04s; }
.gofun-loop-item:nth-child(2) { animation-delay: 0.10s; }
.gofun-loop-item:nth-child(3) { animation-delay: 0.16s; }
.gofun-loop-item:nth-child(4) { animation-delay: 0.22s; }
.gofun-loop-item:nth-child(5) { animation-delay: 0.28s; }

.gofun-loop-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    text-align: center;
}

/* ---- Tablet ---- */
@media (max-width: 900px) {
    .gofun-hero-main {
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 20px;
        padding: 18px 20px;
    }
    .gofun-hero-logo { height: 104px; }
    .gofun-hero-title { font-size: 26px; }
    .gofun-hero-lead { font-size: 13.5px; }
    .gofun-guarantee { max-width: 178px; }
    .gofun-loop { padding: 20px 20px 18px; }
    .gofun-loop::before,
    .gofun-loop::after { left: calc(20px + 10%); right: calc(20px + 10%); top: 42px; } /* 20 + 22 */
    .gofun-loop-ico { width: 44px; height: 44px; font-size: 17px; }
    .gofun-coin { font-size: 20px; }
}

/* ---- Mobile ---- */
@media (max-width: 680px) {
    /* Compact: the hero must not push the feed below the fold */
    .gofun-hero-main {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        row-gap: 6px;
        padding: 13px 16px 14px;
    }
    .gofun-hero-logo { height: 62px; }
    .gofun-eyebrow {
        margin-bottom: 9px;
        padding-bottom: 6px;
        font-size: 9px;
        letter-spacing: 2.4px;
    }
    .gofun-eyebrow::after { width: 22px; }
    .gofun-hero-title { font-size: 20px; line-height: 1.2; }
    .gofun-hero-lead {
        font-size: 12px;
        line-height: 1.5;
        margin-top: 7px;
        /* let it use the full column: a narrower cap only adds a third line */
        max-width: none;
    }
    .gofun-hero-rail {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 8px;
    }
    .gofun-guarantee { max-width: none; gap: 8px; }
    .gofun-guarantee-mark { width: 24px; height: 24px; }
    .gofun-guarantee-copy strong { font-size: 9.5px; letter-spacing: 1px; }
    .gofun-guarantee-copy em { font-size: 9.5px; }
    .gofun-cta { padding: 9px 20px; font-size: 12px; }

    /* copy is centred here, so the eyebrow rule has to centre with it */
    .gofun-eyebrow::after {
        left: 50%;
        transform: translateX(-50%);
    }


    /* All five stay on one row: wrapping to a second row costs more vertical
       space than the hero can afford on a phone. Type is sized so the longest
       label (INTERCAMBIA) still fits its column without wrapping. */
    .gofun-loop {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        padding: 14px 8px 13px;
    }
    .gofun-loop::before,
    .gofun-loop::after { left: calc(8px + 10%); right: calc(8px + 10%); top: 32px; } /* 14 + 18 */
    .gofun-loop-item { gap: 8px; }
    .gofun-loop-ico { width: 36px; height: 36px; font-size: 14px; }
    .gofun-coin { font-size: 16px; }
    .gofun-loop-label {
        font-size: 8.5px;
        letter-spacing: 0.1px;
        white-space: nowrap;
    }
}

@media (max-width: 380px) {
    .gofun-loop { gap: 3px; padding: 13px 6px; }
    .gofun-loop::before,
    .gofun-loop::after { left: calc(6px + 10%); right: calc(6px + 10%); top: 29px; } /* 13 + 16 */
    .gofun-loop-ico { width: 32px; height: 32px; font-size: 12.5px; }
    .gofun-coin { font-size: 14px; }
    .gofun-loop-label { font-size: 7.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .gofun-hero-logo,
    .gofun-coin,
    .gofun-orb,
    .gofun-loop-item { animation: none; }
    .gofun-loop::after,
    .gofun-loop-ico::after,
    .gofun-loop-item:nth-child(5) .gofun-loop-ico::before { animation: none; opacity: 0; }
    .gofun-loop-ico > i,
    .gofun-coin-face { animation: none; }
    .gofun-loop-item { opacity: 1; transform: none; }
}

/* ==========================================================================
   Integracion en RAM Plaza
   En RAM el card vive dentro de .page-margin. Aqui es el primer hijo de
   <main>, que no trae padding-top: sin el wrapper su margin-top se colapsa
   hacia fuera y el card queda pegado al header sticky, tapando la esquina
   redondeada. El padding del wrapper no colapsa, asi que el aire se respeta.

   El card NO lleva padding propio: .gofun-hero-main y .gofun-loop ya traen
   el suyo, y .gofun-loop va a sangre (fondo y border-top propios) hasta los
   bordes del card. Un padding aqui la despegaria y se leeria como un
   rectangulo suelto dentro del card.
   ========================================================================== */

.gofun-hero-wrap {
    padding-top: 14px;
}

.gofun-hero {
    max-width: 1220px;
    margin: 0 auto 24px;
}

@media (max-width: 1280px) {
    .gofun-hero {
        margin-left: 16px;
        margin-right: 16px;
    }
}

@media (max-width: 680px) {
    .gofun-hero-wrap {
        padding-top: 10px;
    }

    .gofun-hero {
        margin: 0 12px 16px;
    }
}