/* =========================================================
   Captly Launch Benefit Modal
   Scope seguro: .captly-promo-modal / .promo-*
   ========================================================= */

   /* ===============================
   HERO BENEFICIO MUNDIALISTA
   ================================ */

   .mundial-hero{
    position:relative;
    min-height:100vh;
    color:#fff;
    overflow:hidden;
    background:
    linear-gradient(
      90deg,
      rgba(2,8,13,.90) 0%,
      rgba(2,8,13,.72) 36%,
      rgba(2,8,13,.22) 62%,
      rgba(2,8,13,.35) 100%
      ),
    url("../images/camps/mundial-2026/hero-beneficio-mundialista.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }

  .mundial-hero__bg,
  .mundial-stage,
  .mundial-hero__overlay{
    display:none;
  }

  .mundial-hero__content{
    position:relative;
    z-index:2;
  }

  .mundial-hero__content{
    --navH: 84px;
    min-height: 100svh;
    padding-top: var(--navH);
    padding-bottom: clamp(56px, 10vh, 110px);
    display: flex;
    align-items: center;
  }

  .mundial-hero__copy{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .mundial-title{
    max-width:700px;
    margin:26px 0 24px;
    font-size:48px;
    line-height:.9;
    font-weight:normal;
    letter-spacing:-2px;
    color:#fff;
    text-shadow:0 8px 28px rgba(0,0,0,.45);
  }

  .mundial-title span{
    color:#00c2a8;
    font-weight: 700;
  }

  .mundial-subtitle{
    max-width:620px;
    color:rgba(255,255,255,.86);
    font-size:17.28px;
    line-height:1.55;
  }

  .mundial-pill{
    width: max-content;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    border:1px solid rgba(0,194,168,.55);
    border-radius:999px;
    background:rgba(0,194,168,.10);
    color:#dffef9;
    font-weight:900;
    font-size: 13px;
  }

  .mundial-actions{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-top:28px;
  }

  .mundial-btn{
    min-height:58px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:15px 28px;
    border-radius:999px;
    text-decoration:none;
    font-weight:950;
    text-transform:uppercase;
  }

  .mundial-btn--primary{
    color:#fff;
    background:linear-gradient(135deg,#00a992,#00c2a8);
    box-shadow:0 18px 42px rgba(0,194,168,.38);
  }

  .mundial-btn--ghost{
    color:#fff;
    border:1px solid rgba(0,194,168,.65);
    background:rgba(0,0,0,.25);
    backdrop-filter:blur(10px);
  }

  .mundial-btn:hover{
    color:#fff;
    transform:translateY(-3px);
    filter:brightness(1.08);
  }

  .mundial-stats{
    width:min(725px,100%);
    margin-top:8px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border:1px solid rgba(0,194,168,.25);
    border-radius:22px;
    overflow:hidden;
    background:rgba(3,18,28,.62);
    backdrop-filter:blur(16px);
  }

  .mundial-stats div{
    padding:20px;
    display:grid;
    gap:4px;
    border-right:1px solid rgba(255,255,255,.1);
  }

  .mundial-stats div:last-child{
    border-right:0;
  }

  .mundial-stats i{
    color:#00c2a8;
    font-size:26px;
  }

  .mundial-stats strong{
    font-size:20px;
    line-height:1;
  }

  .mundial-stats span{
    color:rgba(255,255,255,.7);
    font-size:13px;
  }

  /* Visual estadio */

  .mundial-stage{
    position:relative;
    min-height:560px;
    display:grid;
    place-items:center;
  }

  .mundial-badge-year{
    position:absolute;
    top:0;
    right:0;
    padding:10px 18px;
    border-radius:999px;
    border:1px solid rgba(0,194,168,.35);
    background:rgba(255,255,255,.06);
    font-weight:950;
    font-size:22px;
  }

  .mundial-goal{
    position:relative;
    width:min(560px, 100%);
    height:320px;
    border:10px solid rgba(255,255,255,.88);
    border-bottom-width:16px;
    border-radius:18px 18px 28px 28px;
    transform:perspective(900px) rotateY(-8deg) rotateX(2deg);
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.015));
    box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 70px rgba(0,194,168,.18),
    inset 0 0 60px rgba(255,255,255,.07);
  }

  .mundial-net{
    position:absolute;
    inset:0;
    background:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
    background-size:32px 32px;
    opacity:.52;
  }

  .mundial-c-logo{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    opacity:.32;
    filter:drop-shadow(0 0 28px rgba(0,194,168,.7));
  }

  .mundial-c-logo img{
    width:170px;
  }

  .mundial-keeper{
    position:absolute;
    left:50%;
    bottom:20px;
    width:110px;
    height:190px;
    transform:translateX(-50%);
    animation:keeperReady 2.4s ease-in-out infinite;
  }

  .keeper-head{
    position:absolute;
    top:0;
    left:50%;
    width:42px;
    height:42px;
    transform:translateX(-50%);
    border-radius:50%;
    background:#d99a63;
  }

  .keeper-body{
    position:absolute;
    top:44px;
    left:50%;
    width:76px;
    height:78px;
    transform:translateX(-50%);
    border-radius:24px 24px 18px 18px;
    background:linear-gradient(135deg,#008b7a,#00c2a8);
    box-shadow:0 12px 28px rgba(0,0,0,.35);
  }

  .keeper-body::after{
    content:"1";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:34px;
    font-weight:950;
  }

  .keeper-arm,
  .keeper-leg{
    position:absolute;
    background:#0b1018;
    border-radius:999px;
  }

  .keeper-arm{
    top:60px;
    width:82px;
    height:20px;
    background:#00a992;
  }

  .keeper-arm--left{
    left:-35px;
    transform:rotate(-22deg);
  }

  .keeper-arm--right{
    right:-35px;
    transform:rotate(22deg);
  }

  .keeper-leg{
    bottom:20px;
    width:24px;
    height:70px;
  }

  .keeper-leg--left{
    left:32px;
    transform:rotate(8deg);
  }

  .keeper-leg--right{
    right:32px;
    transform:rotate(-8deg);
  }

  @keyframes keeperReady{
    0%,100%{
      transform:translateX(-50%) translateY(0);
    }

    50%{
      transform:translateX(-50%) translateY(-8px);
    }
  }

  .mundial-ball{
    position:absolute;
    left:50%;
    bottom:30px;
    width:160px;
    height:160px;
    transform:translateX(-50%);
    border-radius:50%;
    background:#fff;
    box-shadow:
    0 0 0 8px rgba(0,194,168,.08),
    0 0 70px rgba(0,194,168,.72),
    0 28px 50px rgba(0,0,0,.55);
    animation:ballPulse 2.8s ease-in-out infinite;
  }

  .mundial-ball span{
    position:absolute;
    inset:0;
    border-radius:50%;
    background-image:url("https://upload.wikimedia.org/wikipedia/commons/d/d3/Soccerball.svg");
    background-size:cover;
    background-position:center;
  }

  @keyframes ballPulse{
    0%,100%{
      transform:translateX(-50%) translateY(0) scale(1);
    }

    50%{
      transform:translateX(-50%) translateY(-12px) scale(1.04);
    }
  }

  .mundial-glow{
    position:absolute;
    left:50%;
    bottom:0;
    width:340px;
    height:90px;
    transform:translateX(-50%);
    border-radius:50%;
    background:rgba(0,194,168,.28);
    filter:blur(34px);
  }

  /* Strip inferior */

  .mundial-benefit-strip{
    margin-top:50px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border:1px solid rgba(0,194,168,.26);
    border-radius:26px;
    overflow:hidden;
    background:rgba(0,194,168,.08);
    backdrop-filter:blur(18px);
  }

  .mundial-benefit-strip div{
    display:flex;
    align-items:center;
    gap:14px;
    padding:22px;
    border-right:1px solid rgba(255,255,255,.1);
  }

  .mundial-benefit-strip div:last-child{
    border-right:0;
  }

  .mundial-benefit-strip i{
    color:#00c2a8;
    font-size:28px;
  }

  .mundial-benefit-strip span{
    color:rgba(255,255,255,.8);
    font-weight:800;
    line-height:1.25;
  }

  @media(max-width:991.98px){
    .mundial-hero{
      padding-top:130px;
      text-align:center;
    }

    .mundial-actions{
      justify-content:center;
    }

    .mundial-stats{
      margin-inline:auto;
    }

    .mundial-stage{
      min-height:460px;
    }

    .mundial-benefit-strip{
      grid-template-columns:1fr 1fr;
    }
  }

  @media(max-width:575.98px){
    .mundial-hero{
      padding-top:115px;
    }

    .mundial-title{
      font-size:42px;
    }

    .mundial-stats,
    .mundial-benefit-strip{
      grid-template-columns:1fr;
    }

    .mundial-stats div,
    .mundial-benefit-strip div{
      border-right:0;
      border-bottom:1px solid rgba(255,255,255,.1);
    }

    .mundial-stage{
      min-height:380px;
    }

    .mundial-goal{
      height:240px;
      border-width:7px;
    }

    .mundial-ball{
      width:120px;
      height:120px;
    }
  }

  .captly-promo-modal {
    --promo-bg: #06131c;
    --promo-panel: #081824;
    --promo-panel-2: #0b1e2b;
    --promo-teal: #00c2a8;
    --promo-teal-2: #12f0d0;
    --promo-orange: #ff6b00;
    --promo-orange-2: #ff8a2a;
    --promo-purple: #8f5cff;
    --promo-muted: #9fb1bd;
    --promo-line: rgba(255, 255, 255, .12);
    --promo-white: #ffffff;
    --promo-shadow: 0 30px 90px rgba(0, 0, 0, .62);
  }

  .captly-promo-modal .modal-dialog {
    max-width: 1120px;
  }

  .captly-promo-modal .modal-content {
    color: #2b2b2b;
  }

  .captly-promo-modal .promo-head {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(18px, 3vw, 30px);
  }

  .captly-promo-modal .promo-logo {
    width: 120px;
    height: auto;
    display: block;
  }

  .captly-promo-modal .promo-close {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .055);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    transition: .25s ease;
  }

  .captly-promo-modal .promo-close:hover {
    background: rgba(255, 255, 255, .12);
    transform: rotate(90deg);
  }

  .captly-promo-modal .promo-screen {
    /*display: none;*/
    position: relative;
    z-index: 2;
  }

  .captly-promo-modal .promo-screen.is-active {
    display: block;
    animation: promoFadeUp .38s ease both;
  }

  @keyframes promoFadeUp {
    from {
      opacity: 0;
      transform: translateY(14px);
    }

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

  .captly-promo-modal .promo-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(0, 194, 168, .34);
    border-radius: 999px;
    padding: 8px 14px;
    background: rgba(0, 194, 168, .08);
    color: #d8fffa;
    font-size: 13px;
    font-weight: 800;
  }

  .captly-promo-modal .promo-title {
    font-size: 40px;
    font-weight: normal;
    letter-spacing: -.6px;
    line-height: 1.2;
  }

  .captly-promo-modal .promo-gradient {
    color: #00c2a8;
    font-weight: 700;
    text-shadow: 0 0 28px rgba(0, 194, 168, .22);
  }

  .captly-promo-modal .promo-gradient-number {
    color: #00c2a8;
    font-weight: 700;
    font-size: 18px;
    text-shadow: 0 0 28px rgba(0, 194, 168, .22);
  }

  .captly-promo-modal .promo-copy {
    color: #2b2b2b;
    font-size: 18px;
    line-height: 1.5;
  }

  .captly-promo-modal .promo-copy span {
    color: rgba(255, 255, 255, .72);
    font-weight: 800;
  }

  .captly-promo-modal .promo-btn,
  .captly-promo-modal .promo-btn-outline {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    padding: 13px 22px;
    font-weight: 900;
    letter-spacing: .1px;
    transition: .25s ease;
  }

  .captly-promo-modal .promo-btn {
    background: rgb(0 194 168);
    box-shadow: 0 16px 38px rgba(0, 194, 168, .24);
    border: 0;
    color: #fff;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .25px;
    text-transform: uppercase;
    padding: .8rem 1.2rem;
    display: block;
    margin: auto;
    margin-top: 20px;
  }

  .captly-promo-modal .promo-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 20px 44px rgba(0, 194, 168, .32);
  }

  .captly-promo-modal .promo-btn:disabled {
    opacity: .72;
    transform: none;
    cursor: not-allowed;
  }

  .captly-promo-modal .promo-btn-outline {
    border: 1px solid rgba(0, 194, 168, .52);
    color: #fff;
    background: rgba(255, 255, 255, .035);
  }

  .captly-promo-modal .promo-btn-outline:hover {
    background: rgba(0, 194, 168, .12);
    border-color: var(--promo-teal);
    transform: translateY(-2px);
  }

  /* Gift */

  .captly-promo-modal .promo-gift {
    width: min(255px, 72vw);
    aspect-ratio: 1;
    position: relative;
    margin: 0 auto;
    filter: drop-shadow(0 34px 45px rgba(0, 0, 0, .35));
  }

  .captly-promo-modal .promo-gift__lid,
  .captly-promo-modal .promo-gift__box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #f5f7f8;
    border-radius: 12px;
    box-shadow: inset 0 -14px 0 rgba(0, 0, 0, .08);
  }

  .captly-promo-modal .promo-gift__lid {
    top: 40px;
    width: 188px;
    height: 44px;
    animation: promoGiftFloat 2.4s ease-in-out infinite;
  }

  .captly-promo-modal .promo-gift__box {
    top: 96px;
    width: 156px;
    height: 126px;
  }

  .captly-promo-modal .promo-gift__lid::before,
  .captly-promo-modal .promo-gift__box::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 50%;
    width: 24px;
    transform: translateX(-50%);
    background: #ef2732;
  }

  .captly-promo-modal .promo-gift__lid::after {
    content: "";
    position: absolute;
    top: -30px;
    left: 50%;
    width: 94px;
    height: 54px;
    border: 16px solid #ef2732;
    border-bottom: 0;
    border-radius: 60px 60px 0 0;
    transform: translateX(-50%);
  }

  @keyframes promoGiftFloat {
    50% {
      transform: translate(-50%, -12px) rotate(-2deg);
    }
  }

  .captly-promo-modal .promo-spark {
    position: absolute;
    width: 8px;
    height: 18px;
    border-radius: 999px;
    background: var(--promo-orange);
    opacity: .9;
    animation: promoSparkPop 1.8s ease-in-out infinite;
  }

  .captly-promo-modal .promo-spark:nth-child(1) {
    left: 42px;
    top: 82px;
  }

  .captly-promo-modal .promo-spark:nth-child(2) {
    right: 46px;
    top: 112px;
    animation-delay: .3s;
  }

  .captly-promo-modal .promo-spark:nth-child(3) {
    left: 72px;
    bottom: 32px;
    background: var(--promo-teal);
    animation-delay: .7s;
  }

  .captly-promo-modal .promo-spark:nth-child(4) {
    right: 82px;
    bottom: 58px;
    background: #fff;
    animation-delay: 1s;
  }

  @keyframes promoSparkPop {
    50% {
      opacity: .45;
      transform: translateY(-22px) rotate(18deg);
    }
  }

  /* Wheel */

  .captly-promo-modal .promo-wheel-wrap {
    position: relative;
    max-width: 470px;
    margin: 20px auto 22px;
    padding: 18px;
  }

  .captly-promo-modal .promo-pointer {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 5;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 44px solid #111923;
    filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35));
  }

  .captly-promo-modal .promo-wheel {
    width: 100%;
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
    border: 12px solid #111923;
    border-radius: 50%;
    background:
    conic-gradient(
      from -30deg,
      #078777 0deg 120deg,
      #6b38d8 120deg 240deg,
      #ca6a12 240deg 360deg
      );
    box-shadow:
    0 0 0 2px rgba(255, 255, 255, .12),
    0 24px 72px rgba(0, 0, 0, .48),
    inset 0 0 46px rgba(0, 0, 0, .45);
    transition: transform 4s cubic-bezier(.12, .78, .12, 1);
    will-change: transform;
  }

  .captly-promo-modal .promo-wheel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
    radial-gradient(circle at center, transparent 0 33%, rgba(0, 0, 0, .08) 34% 100%),
    repeating-conic-gradient(from -30deg, rgba(255, 255, 255, .18) 0deg 1deg, transparent 1deg 120deg);
    pointer-events: none;
  }

  .captly-promo-modal .promo-wheel::after {
    content: "";
    position: absolute;
    inset: 38%;
    border-radius: 50%;
    background: #07131d;
    border: 8px solid #162532;
    box-shadow: 0 0 22px rgba(0, 0, 0, .7);
    z-index: 2;
  }

  .captly-promo-modal .promo-wheel-center {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: grid;
    place-items: center;
    pointer-events: none;
  }

  .captly-promo-modal .promo-wheel-center img {
    width: 44px;
    height: 44px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(6, 19, 28, .92);
    border: 1px solid rgba(255, 255, 255, .16);
  }

  .captly-promo-modal .promo-seg {
    position: absolute;
    z-index: 3;
    text-align: center;
    font-weight: 950;
    line-height: 1.03;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  }

  .captly-promo-modal .promo-seg small {
    display: block;
    font-size: 15px;
    letter-spacing: .5px;
  }

  .captly-promo-modal .promo-seg strong {
    display: block;
    font-size: 58px;
    letter-spacing: -2px;
  }

  .captly-promo-modal .promo-seg--10 {
    top: 18%;
    left: 38%;
  }

  .captly-promo-modal .promo-seg--15 {
    top: 53%;
    left: 11%;
  }

  .captly-promo-modal .promo-seg--20 {
    top: 53%;
    right: 13%;
  }

  /* Cards */

  .captly-promo-modal .promo-benefit-card {
    border: 1px solid rgb(135 135 135);
    border-radius: 22px;
    padding: 18px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  }

  .captly-promo-modal .promo-benefit-row,
  .captly-promo-modal .promo-b10,
  .captly-promo-modal .promo-b15,
  .captly-promo-modal .promo-b20 {
    border-radius: 15px;
  }

  .captly-promo-modal .promo-benefit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 10px;
    padding: 12px 14px;
    font-weight: 900;
    font-size: 13px;
  }

  .captly-promo-modal .promo-b10 {
    border: 1px solid rgba(0, 194, 168, .44);
    background: linear-gradient(90deg, rgba(0, 194, 168, .34), rgba(0, 194, 168, .07));
  }

  .captly-promo-modal .promo-b15 {
    border: 1px solid rgba(255, 107, 0, .44);
    background: linear-gradient(90deg, rgba(255, 107, 0, .38), rgba(255, 107, 0, .07));
  }

  .captly-promo-modal .promo-b20 {
    background:rgba(0, 194, 168, .065);
  }

  /* Form */

  .captly-promo-modal .promo-form .input-group-text,
  .captly-promo-modal .promo-form .form-control {
    min-height: 52px;
    border: 1.15px solid rgb(186 194 203 / 60%);
    background: #fff;
    color: #2b2b2b;
  }

  .captly-promo-modal .promo-form .input-group-text {
    border-radius: 15px 0 0 15px;
    color: #00c2a8;
    font-size: 15px;
    background: #fff;
  }

  .captly-promo-modal .promo-form .form-control {
    border-radius: 0 15px 15px 0;
  }

  .captly-promo-modal .promo-form .form-control::placeholder {
    color: #8fa2ae;
  }

  .captly-promo-modal .promo-form .form-control:focus {
    color: #2b2b2b;
    background: #fff;
    border-color: var(--promo-teal);
    box-shadow: 0 0 0 .25rem rgba(0, 194, 168, .13);
  }

  .captly-promo-modal .promo-tiny {
    color: #97aab5;
    font-size: 16px;
    text-align: center;
  }

  /* Congrats / ready */

  .captly-promo-modal .promo-mini-progress {
    width: min(360px, 90%);
    height: 6px;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
  }

  .captly-promo-modal .promo-mini-progress span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--promo-teal), var(--promo-teal-2));
    transform-origin: left;
    animation: promoProgress 10s linear forwards;
  }

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

    to {
      transform: scaleX(1);
    }
  }

  .captly-promo-modal .promo-code-box {
    border: 3px dashed rgba(0, 194, 168, .75);
    border-radius: 20px;
    padding: 22px;
    color: #dffef9;
    background: rgba(0, 194, 168, .065);
    font-size: clamp(22px, 4vw, 40px);
    font-weight: 950;
    letter-spacing: 1.6px;
    word-break: break-word;
    text-align: center;
    width: max-content;
    margin: auto;
  }

  .captly-promo-modal .promo-check-list {
    max-width: 540px;
    margin: 22px auto;
    padding: 0;
    list-style: none;
    text-align: left;
  }

  .captly-promo-modal .promo-check-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 10px 0;
    color: #d7e5ec;
  }

  .captly-promo-modal .promo-check-list i {
    color: var(--promo-teal);
    margin-top: 2px;
  }

  /* Confetti */

  .captly-promo-modal .promo-confetti {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
  }

  .captly-promo-modal .promo-confetti span {
    position: absolute;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    background: var(--promo-teal);
    animation: promoConfettiFall 1.9s ease-in forwards;
  }

  .captly-promo-modal .promo-confetti span:nth-child(3n) {
    background: var(--promo-orange);
  }

  .captly-promo-modal .promo-confetti span:nth-child(4n) {
    background: var(--promo-purple);
  }

  .captly-promo-modal .promo-confetti span:nth-child(5n) {
    background: #fff;
  }

  @keyframes promoConfettiFall {
    0% {
      opacity: 1;
      transform: translateY(-20px) rotate(0deg);
    }

    100% {
      opacity: 0;
      transform: translateY(560px) rotate(260deg);
    }
  }

  /* Responsive */

  @media (max-width: 991.98px) {
    .captly-promo-modal .modal-dialog {
      max-width: calc(100% - 24px);
    }

    .captly-promo-modal .modal-body {
      min-height: auto;
    }

    .captly-promo-modal .promo-title {
      font-size: 28px;
    }
  }

  @media (max-width: 767.98px) {
    .captly-promo-modal .modal-dialog {
      margin: 12px auto;
    }

    .captly-promo-modal .modal-content {
      border-radius: 24px;
    }

    .captly-promo-modal .promo-logo {
      width: 104px;
    }

    .captly-promo-modal .promo-close {
      width: 38px;
      height: 38px;
      font-size: 26px;
    }

    .captly-promo-modal .promo-wheel-wrap {
      max-width: 330px;
      padding: 10px;
    }

    .captly-promo-modal .promo-wheel {
      border-width: 8px;
    }

    .captly-promo-modal .promo-pointer {
      border-left-width: 13px;
      border-right-width: 13px;
      border-top-width: 32px;
    }

    .captly-promo-modal .promo-seg small {
      font-size: 10px;
    }

    .captly-promo-modal .promo-seg strong {
      font-size: 34px;
    }

    .captly-promo-modal .promo-seg--10 {
      top: 18%;
      left: 37%;
    }

    .captly-promo-modal .promo-seg--15 {
      top: 52%;
      left: 10%;
    }

    .captly-promo-modal .promo-seg--20 {
      top: 52%;
      right: 11%;
    }

    .captly-promo-modal .promo-benefit-row {
      font-size: 12px;
    }

    .captly-promo-modal .promo-code-box {
      letter-spacing: .8px;
    }
  }

  @media (max-width: 420px) {
    .captly-promo-modal .promo-wheel-wrap {
      max-width: 292px;
    }

    .captly-promo-modal .promo-seg strong {
      font-size: 30px;
    }

    .captly-promo-modal .promo-seg small {
      font-size: 9px;
    }

    .captly-promo-modal .promo-btn,
    .captly-promo-modal .promo-btn-outline {
      width: max-content;
      margin: auto;
    }

    .br {
      display: none;
    }

    .mb-resp {
      margin-bottom: 18px;
    }
  }

  /* Evita que Bootstrap desplace el body al abrir el modal */
  body.modal-open {
    padding-right: 0 !important;
    overflow: hidden;
  }

  body.modal-open .fixed-top,
  body.modal-open .sticky-top,
  body.modal-open .navbar {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

/* =========================================================
   Mundial Experience
   ========================================================= */

   .captly-promo-modal .promo-game-title{
    font-size: 40px;
    font-weight: normal;
    letter-spacing: -.6px;
    line-height: 1.2;
  }

  .captly-promo-modal .promo-stadium{
    position:relative;
    width:100%;
    max-width:560px;
    margin:30px auto 0;
    padding-top:40px;
  }

  .captly-promo-modal .promo-goal{
    position:relative;
    width:100%;
    height:260px;
    border:10px solid rgba(255,255,255,.92);
    border-bottom-width:18px;
    border-radius:10px 10px 24px 24px;
    overflow:hidden;
    background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.08),
      rgba(255,255,255,.02)
      );
    box-shadow:
    0 30px 60px rgba(0,0,0,.35),
    inset 0 0 60px rgba(255,255,255,.05);
  }

  .captly-promo-modal .promo-goal-net{
    position:absolute;
    inset:0;
    background:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size:28px 28px;
    opacity:.45;
  }

  .captly-promo-modal .promo-goal-zone{
    position:absolute;
    top:0;
    bottom:0;
  }

  .captly-promo-modal .promo-zone-20{
    right:0;
    width:33.33%;
    background:rgba(143,92,255,.18);
  }

  .captly-promo-modal .promo-zone-15{
    left:33.33%;
    width:33.33%;
    background:rgba(255,107,0,.14);
  }

  .captly-promo-modal .promo-zone-10{
    left:0;
    width:33.33%;
    background:rgba(0,194,168,.14);
  }

  .captly-promo-modal .promo-ball-wrap{
    position:relative;
    height:140px;
  }

  .captly-promo-modal .promo-ball{
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:86px;
    height:86px;
    display:grid;
    place-items:center;
    font-size:56px;
    border-radius:50%;
    cursor:pointer;
    transition:
    transform 1.4s cubic-bezier(.2,.8,.2,1),
    left 1.4s cubic-bezier(.2,.8,.2,1),
    bottom 1.4s cubic-bezier(.2,.8,.2,1);
    filter:drop-shadow(0 18px 24px rgba(0,0,0,.35));
  }

  .captly-promo-modal .promo-ball.shoot-10{
    left:24%;
    bottom:260px;
    transform:translateX(-50%) scale(.68) rotate(-220deg);
  }

  .captly-promo-modal .promo-ball.shoot-15{
    left:50%;
    bottom:240px;
    transform:translateX(-50%) scale(.68) rotate(220deg);
  }

  .captly-promo-modal .promo-ball.shoot-20{
    left:77%;
    bottom:250px;
    transform:translateX(-50%) scale(.65) rotate(320deg);
  }

/* =========================================================
   Captly Penalty Game Pro
   ========================================================= */

   .captly-promo-modal .promo-penalty-game {
    position: relative;
    max-width: 100%;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 28px;
    background:
    radial-gradient(circle at 12% 8%, rgba(0, 194, 168, .24), transparent 26%),
    radial-gradient(circle at 88% 24%, rgba(255, 107, 0, .18), transparent 26%),
    radial-gradient(circle at 72% 92%, rgba(143, 92, 255, .16), transparent 26%),
    linear-gradient(145deg, #06131c, #091923 62%, #07121b);
    overflow: hidden;
  }

  .captly-promo-modal .promo-scoreboard {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    margin-bottom: 14px;
    border-radius: 999px;
    border: 1px solid rgba(0,194,168,.28);
    background: rgba(0,194,168,.08);
    color: #dffefa;
    font-size: 13px;
    font-weight: 900;
  }

  .captly-promo-modal .promo-goal-pro {
    position: relative;
    height: 245px;
    border: 9px solid rgba(255,255,255,.88);
    border-radius: 26px 26px 0 0;
    background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    radial-gradient(circle at 50% 100%, rgba(0,194,168,.12), transparent 55%);
    overflow: hidden;
  }

  .captly-promo-modal .promo-net-pro {
    position: absolute;
    inset: 0;
    background:
    linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: .5;
  }

  .captly-promo-modal .promo-target-glow {
    position: absolute;
    top: 28%;
    left: 50%;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,194,168,.24);
    box-shadow: 0 0 42px rgba(0,194,168,.5);
    opacity: .75;
    transition: left .16s linear, background .2s ease, box-shadow .2s ease;
  }

  .captly-promo-modal .promo-keeper {
    position: absolute;
    left: 50%;
    bottom: 16px;
    width: 90px;
    height: 118px;
    transform: translateX(-50%);
    z-index: 3;
    animation: promoKeeperMove 2.4s ease-in-out infinite alternate;
  }

  @keyframes promoKeeperMove {
    from { left: 36%; }
    to { left: 64%; }
  }

  .captly-promo-modal .promo-keeper-head {
    position: absolute;
    top: 0;
    left: 50%;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: #f2c9a5;
    box-shadow: 0 0 20px rgba(0,0,0,.3);
  }

  .captly-promo-modal .promo-keeper-body {
    position: absolute;
    top: 38px;
    left: 50%;
    width: 48px;
    height: 62px;
    border-radius: 16px 16px 12px 12px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #111923, #00c2a8);
    border: 1px solid rgba(255,255,255,.18);
  }

  .captly-promo-modal .promo-keeper-arm {
    position: absolute;
    top: 44px;
    width: 52px;
    height: 12px;
    border-radius: 99px;
    background: #00c2a8;
  }

  .captly-promo-modal .promo-keeper-arm--left {
    right: 57px;
    transform: rotate(-28deg);
  }

  .captly-promo-modal .promo-keeper-arm--right {
    left: 57px;
    transform: rotate(28deg);
  }

  .captly-promo-modal .promo-field-pro {
    position: relative;
    height: 170px;
    margin-top: 10px;
    border-radius: 0 0 26px 26px;
    background:
    repeating-linear-gradient(
      90deg,
      rgba(0,194,168,.10) 0 54px,
      rgba(0,194,168,.055) 54px 108px
      );
  }

  .captly-promo-modal .promo-field-pro::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 50%;
    width: 160px;
    height: 90px;
    border: 2px solid rgba(255,255,255,.14);
    border-bottom: 0;
    border-radius: 100px 100px 0 0;
    transform: translateX(-50%);
  }

  .captly-promo-modal .promo-direction-arrow {
    position: absolute;
    left: 50%;
    bottom: 82px;
    z-index: 4;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff; /* <- antes era #06131c */
    background: var(--promo-teal-2);
    box-shadow: 0 0 28px rgba(0,194,168,.55);
    transform: translateX(-50%) rotate(0deg);
    transition: left .16s linear, transform .16s linear, background .2s ease;
  }

  .captly-promo-modal .promo-direction-arrow i {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.25);
  }

  .captly-promo-modal .promo-ball-pro {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 5;
    width: 82px;
    height: 82px;
    border: 0;
    border-radius: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), transparent 18%),
    radial-gradient(circle at center, var(--ball-color, #00c2a8), #06131c 72%);
    box-shadow:
    0 18px 26px rgba(0,0,0,.42),
    0 0 36px var(--ball-glow, rgba(0,194,168,.55));
    transition:
    left 1.15s cubic-bezier(.2,.85,.2,1),
    bottom 1.15s cubic-bezier(.2,.85,.2,1),
    transform 1.15s cubic-bezier(.2,.85,.2,1),
    background .18s ease,
    box-shadow .18s ease;
  }

  .captly-promo-modal .promo-ball-pro::before {
    content: "⚽";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 48px;
    filter: grayscale(1) contrast(1.1);
    opacity: .9;
  }

  .captly-promo-modal .promo-ball--10 {
    --ball-color: #00c2a8;
    --ball-glow: rgba(0,194,168,.62);
  }

  .captly-promo-modal .promo-ball--15 {
    --ball-color: #132a63;
    --ball-glow: rgba(19,42,99,.62);
  }

  .captly-promo-modal .promo-ball--20 {
    --ball-color: #c85a00;
    --ball-glow: rgba(200,90,0,.62);
  }

  .captly-promo-modal .promo-ball-pro.is-shooting {
    bottom: var(--shot-y, 310px) !important;
    left: var(--shot-x, 50%) !important;
    transform: translateX(-50%) scale(.48) rotate(460deg);
  }

  .captly-promo-modal .promo-ball-pro.is-goal {
    filter: brightness(1.3);
  }

  @media (max-width: 767.98px) {
    .captly-promo-modal .promo-ball-pro {
      width: 66px;
      height: 66px;
    }

    .captly-promo-modal .promo-ball-pro::before {
      font-size: 39px;
    }

    .captly-promo-modal .promo-ball-pro.is-shooting {
      bottom: 250px;
    }

    .captly-promo-modal .promo-game-title {
      font-size: 30px;
    }

    .promo-title-ball__inner {
      width: 70% !important;
      height: 70% !important;
    }

    .promo-title-ball::after {
      left: 20px !important;
      bottom: 0 !important;
    }

    .mundial-hero__content {
      padding-top: 40px;
    }

    .mundial-subtitle {
      text-align: left;
    }

    .promo-landing-flow .promo-icon-ball {
      width: 50px !important;
    }

    .promo-landing-flow .promo-icon-medal {
      width: 40px !important;
    }

    .promo-landing-flow .promo-icon-trophy {
      width: 25px !important;
    }
  }

/* =========================================================
   Portero Pro + Atajada
   ========================================================= */

   .captly-promo-modal .promo-keeper {
    display: none;
  }

  .captly-promo-modal .promo-keeper-pro {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 5;
    width: 124px;
    height: 150px;
    transform: translateX(-50%);
    transform-origin: 50% 78%;
    animation: promoKeeperProMove 2.2s ease-in-out infinite alternate;
    transition:
    left .28s ease,
    transform .55s cubic-bezier(.2,.8,.2,1);
  }

  @keyframes promoKeeperProMove {
    from {
      left: 34%;
    }

    to {
      left: 66%;
    }
  }

  .captly-promo-modal .promo-keeper-pro.is-ready {
    animation-duration: 1.65s;
  }

  .captly-promo-modal .promo-keeper-shadow {
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 94px;
    height: 18px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(0,0,0,.36);
    filter: blur(4px);
  }

  .captly-promo-modal .promo-keeper-head {
    position: absolute;
    top: 0;
    left: 50%;
    width: 38px;
    height: 42px;
    transform: translateX(-50%);
    border-radius: 46% 46% 50% 50%;
    background:
    radial-gradient(circle at 32% 38%, rgba(255,255,255,.32), transparent 12%),
    linear-gradient(180deg, #f2c29b, #c9875c);
    box-shadow: 0 8px 18px rgba(0,0,0,.25);
  }

  .captly-promo-modal .promo-keeper-hair {
    position: absolute;
    top: -5px;
    left: 4px;
    right: 4px;
    height: 16px;
    border-radius: 18px 18px 8px 8px;
    background: #172331;
  }

  .captly-promo-modal .promo-keeper-neck {
    position: absolute;
    top: 38px;
    left: 50%;
    width: 18px;
    height: 16px;
    transform: translateX(-50%);
    background: #c9875c;
    border-radius: 0 0 8px 8px;
  }

  .captly-promo-modal .promo-keeper-torso {
    position: absolute;
    top: 50px;
    left: 50%;
    width: 58px;
    height: 66px;
    transform: translateX(-50%);
    border-radius: 18px 18px 14px 14px;
    background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(180deg, #00c2a8, #067669);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 12px 26px rgba(0,0,0,.28);
  }

  .captly-promo-modal .promo-keeper-number {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.9);
    font-weight: 950;
    font-size: 28px;
  }

  .captly-promo-modal .promo-keeper-arm {
    position: absolute;
    top: 60px;
    width: 58px;
    height: 15px;
    border-radius: 99px;
    background: linear-gradient(90deg, #00c2a8, #0a7f73);
    transform-origin: center;
    box-shadow: 0 8px 15px rgba(0,0,0,.22);
  }

  .captly-promo-modal .promo-keeper-arm--left {
    right: 78px;
    transform: rotate(-18deg);
  }

  .captly-promo-modal .promo-keeper-arm--right {
    left: 78px;
    transform: rotate(18deg);
  }

  .captly-promo-modal .promo-keeper-glove {
    position: absolute;
    top: -6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background:
    radial-gradient(circle at 35% 30%, #fff, #d7ecff 58%, #9fc8ff);
    border: 2px solid rgba(255,255,255,.8);
    box-shadow: 0 0 18px rgba(255,255,255,.2);
  }

  .captly-promo-modal .promo-keeper-arm--left .promo-keeper-glove {
    left: -17px;
  }

  .captly-promo-modal .promo-keeper-arm--right .promo-keeper-glove {
    right: -17px;
  }

  .captly-promo-modal .promo-keeper-leg {
    position: absolute;
    top: 110px;
    left: 50%;
    width: 18px;
    height: 42px;
    border-radius: 99px;
    background: linear-gradient(180deg, #101923, #07131d);
    transform-origin: top;
  }

  .captly-promo-modal .promo-keeper-leg--left {
    transform: translateX(-24px) rotate(8deg);
  }

  .captly-promo-modal .promo-keeper-leg--right {
    transform: translateX(8px) rotate(-8deg);
  }

  /* Dirección de atajada */
  .captly-promo-modal .promo-keeper-pro.save-left {
    animation: none;
    left: 26% !important;
    transform: translateX(-50%) rotate(-28deg) translateY(-12px);
  }

  .captly-promo-modal .promo-keeper-pro.save-center {
    animation: none;
    left: 50% !important;
    transform: translateX(-50%) scale(1.08) translateY(-18px);
  }

  .captly-promo-modal .promo-keeper-pro.save-right {
    animation: none;
    left: 74% !important;
    transform: translateX(-50%) rotate(28deg) translateY(-12px);
  }

  .captly-promo-modal .promo-keeper-pro.save-left .promo-keeper-arm--left {
    transform: rotate(-72deg);
  }

  .captly-promo-modal .promo-keeper-pro.save-left .promo-keeper-arm--right {
    transform: rotate(-14deg);
  }

  .captly-promo-modal .promo-keeper-pro.save-right .promo-keeper-arm--left {
    transform: rotate(14deg);
  }

  .captly-promo-modal .promo-keeper-pro.save-right .promo-keeper-arm--right {
    transform: rotate(72deg);
  }

  .captly-promo-modal .promo-keeper-pro.save-center .promo-keeper-arm--left {
    transform: rotate(-48deg);
  }

  .captly-promo-modal .promo-keeper-pro.save-center .promo-keeper-arm--right {
    transform: rotate(48deg);
  }

  /* Estados del balón */
  .captly-promo-modal .promo-ball-pro.is-saved {
    filter: grayscale(.15) brightness(.9);
    animation: promoSavedShake .42s ease both;
  }

  @keyframes promoSavedShake {
    0%,100% {
      transform: translateX(-50%) scale(.62);
    }

    30% {
      transform: translateX(-50%) scale(.62) translateX(-8px);
    }

    60% {
      transform: translateX(-50%) scale(.62) translateX(8px);
    }
  }

  .captly-promo-modal .promo-ball-pro.is-retry {
    animation: promoBallRetry .7s ease both;
  }

  @keyframes promoBallRetry {
    from {
      opacity: .35;
      transform: translateX(-50%) scale(.75);
    }

    to {
      opacity: 1;
      transform: translateX(-50%) scale(1);
    }
  }

  @media (max-width: 767.98px) {
    .captly-promo-modal .promo-keeper-pro {
      width: 94px;
      height: 124px;
    }

    .captly-promo-modal .promo-keeper-torso {
      width: 48px;
      height: 56px;
    }

    .captly-promo-modal .promo-keeper-arm {
      width: 45px;
    }

    .captly-promo-modal .promo-keeper-arm--left {
      right: 62px;
    }

    .captly-promo-modal .promo-keeper-arm--right {
      left: 62px;
    }
  }

/* =========================================================
   Fix portero: evita que se desarme al aventarse
   ========================================================= */

   .captly-promo-modal .promo-keeper-pro {
    transform-origin: 50% 90%;
  }

  .captly-promo-modal .promo-keeper-pro.save-left {
    animation: none;
    left: 28% !important;
    transform: translateX(-50%) translateY(-10px) rotate(-18deg);
  }

  .captly-promo-modal .promo-keeper-pro.save-center {
    animation: none;
    left: 50% !important;
    transform: translateX(-50%) translateY(-16px) scale(1.04);
  }

  .captly-promo-modal .promo-keeper-pro.save-right {
    animation: none;
    left: 72% !important;
    transform: translateX(-50%) translateY(-10px) rotate(18deg);
  }

  /* Brazos más unidos al cuerpo durante la atajada */
  .captly-promo-modal .promo-keeper-pro.save-left .promo-keeper-arm--left {
    right: 70px;
    transform: rotate(-44deg);
  }

  .captly-promo-modal .promo-keeper-pro.save-left .promo-keeper-arm--right {
    left: 74px;
    transform: rotate(10deg);
  }

  .captly-promo-modal .promo-keeper-pro.save-right .promo-keeper-arm--left {
    right: 74px;
    transform: rotate(-10deg);
  }

  .captly-promo-modal .promo-keeper-pro.save-right .promo-keeper-arm--right {
    left: 70px;
    transform: rotate(44deg);
  }

  .captly-promo-modal .promo-keeper-pro.save-center .promo-keeper-arm--left {
    right: 70px;
    transform: rotate(-38deg);
  }

  .captly-promo-modal .promo-keeper-pro.save-center .promo-keeper-arm--right {
    left: 70px;
    transform: rotate(38deg);
  }

  /* Piernas más compactas al aventarse */
  .captly-promo-modal .promo-keeper-pro.save-left .promo-keeper-leg--left {
    transform: translateX(-24px) rotate(18deg);
  }

  .captly-promo-modal .promo-keeper-pro.save-left .promo-keeper-leg--right {
    transform: translateX(6px) rotate(-2deg);
  }

  .captly-promo-modal .promo-keeper-pro.save-right .promo-keeper-leg--left {
    transform: translateX(-24px) rotate(2deg);
  }

  .captly-promo-modal .promo-keeper-pro.save-right .promo-keeper-leg--right {
    transform: translateX(6px) rotate(-18deg);
  }

  /* =========================
   GIFT VIDEO
   ========================= */

   .promo-gift-video-wrap{
    position: relative;
    width: 100%;
    max-width: 430px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
  }

  .promo-gift-video-wrap::before{
    content: "";
    position: absolute;
    inset: 10%;
    background:
    radial-gradient(circle,
      rgba(255,215,90,.55) 0%,
      rgba(255,180,0,.35) 22%,
      rgba(255,140,0,.18) 45%,
      rgba(255,120,0,.08) 62%,
      transparent 78%);
    filter: blur(48px);
    z-index: -1;
    animation: promoGiftGlow 3.8s ease-in-out infinite;
  }

  .promo-gift-video{
    width: 100%;
    max-width: 480px;
    height: auto;
    object-fit: contain;
    user-select: none;
    pointer-events: none;

    filter:
    drop-shadow(0 0 10px rgba(255,215,90,.45))
    drop-shadow(0 0 26px rgba(255,170,0,.28))
    drop-shadow(0 0 54px rgba(255,140,0,.16));

    transform: translateZ(0);

    animation:
    promoGiftFloat 4.5s ease-in-out infinite,
    promoGiftPulse 2.8s ease-in-out infinite;
  }

  @keyframes promoGiftPulse{

    0%,100%{
      filter:
      drop-shadow(0 0 10px rgba(255,215,90,.45))
      drop-shadow(0 0 26px rgba(255,170,0,.28))
      drop-shadow(0 0 54px rgba(255,140,0,.16));
    }

    50%{
      filter:
      drop-shadow(0 0 16px rgba(255,225,120,.72))
      drop-shadow(0 0 42px rgba(255,180,0,.48))
      drop-shadow(0 0 86px rgba(255,140,0,.28));
    }
  }

  /* Glow breathing */

  @keyframes promoGiftGlow{
    0%,100%{
      opacity: .65;
      transform: scale(1);
    }

    50%{
      opacity: 1;
      transform: scale(1.08);
    }
  }

  /* Floating animation */

  @keyframes promoGiftFloat{
    0%,100%{
      transform:
      translateY(0px)
      rotate(0deg);
    }

    25%{
      transform:
      translateY(-8px)
      rotate(-1deg);
    }

    50%{
      transform:
      translateY(-14px)
      rotate(0deg);
    }

    75%{
      transform:
      translateY(-8px)
      rotate(1deg);
    }
  }

  /* Responsive */

  @media (max-width: 991.98px){

    .promo-gift-video-wrap{
      max-width: 360px;
    }

    .promo-gift-video{
      max-width: 340px;
    }
  }

  @media (max-width: 575.98px){

    .promo-gift-video-wrap{
      max-width: 280px;
    }

    .promo-gift-video{
      max-width: 260px;
    }
  }

/* =========================================
   BALÓN PREMIUM MICROINTERACTION
   Rebote suave + giro sin regreso visual
   ========================================= */

   .promo-title-ball {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    vertical-align: top;
    transform-origin: center bottom;
    will-change: transform;
    animation: promoBallBounce 4.8s ease-in-out infinite;
  }

  .promo-title-ball__inner{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/d/d3/Soccerball.svg");
    background-size: cover;
    background-position: center;
    transform-origin: center center;
    will-change: transform;
    animation: promoBallSpinOnce 4.8s ease-in-out infinite;
  }

  .promo-title-ball::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:-8px;
    width:44px;
    height:10px;
    border-radius:50%;
    background: rgba(0,0,0,.22);
    filter: blur(6px);
    transform: translateX(-50%);
    animation: promoBallShadowIdle 4.8s ease-in-out infinite;
  }

  /* Rebote: un solo salto suave */
  @keyframes promoBallBounce{
    0%, 60%, 100%{
      transform: translateY(0) scale(1);
    }

    63%{
      transform: translateY(2px) scale(1.06,.92);
    }

    72%{
      transform: translateY(-20px) scale(.98,1.04);
    }

    78%{
      transform: translateY(-26px) scale(1);
    }

    86%{
      transform: translateY(0) scale(1.08,.90);
    }

    92%{
      transform: translateY(-3px) scale(.99,1.01);
    }

    96%{
      transform: translateY(0) scale(1);
    }
  }

  /* Giro: solo durante el salto; mantiene orientación al caer */
  @keyframes promoBallSpinOnce{
    0%, 63%{
      transform: rotate(0deg);
    }

    78%{
      transform: rotate(220deg);
    }

    86%, 100%{
      transform: rotate(360deg);
    }
  }

  /* Sombra: acompaña altura y compresión */
  @keyframes promoBallShadowIdle{
    0%, 60%, 100%{
      transform: translateX(-50%) scaleX(1);
      opacity:.28;
    }

    63%{
      transform: translateX(-50%) scaleX(1.18);
      opacity:.36;
    }

    78%{
      transform: translateX(-50%) scaleX(.62);
      opacity:.10;
    }

    86%{
      transform: translateX(-50%) scaleX(1.24);
      opacity:.38;
    }

    92%{
      transform: translateX(-50%) scaleX(.9);
      opacity:.22;
    }
  }

  /* Número circular */

  .captly-promo-modal .promo-step-number{
   flex: 0 0 auto;
   width: 34px;
   height: 34px;
   display: inline-grid;
   place-items: center;
   border: 1.5px solid #00c2a8;
   border-radius: 50%;
   color: #00c2a8;
   font-size: 15px;
   font-weight: 950;
   line-height: 1;
 }

 .divider-rules {
  border-bottom: 1px solid #ff6b00;
}

/*ESTADIO LED BOARD*/

.captly-promo-modal .promo-stadium-board{
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 18px;
  border-radius: 10px;
  border: 1px solid rgba(0,194,168,.28);
  background:
  linear-gradient(
    180deg,
    rgba(0,194,168,.12),
    rgba(255,255,255,.02)
    );
  box-shadow:
  inset 0 0 22px rgba(0,194,168,.12),
  0 0 24px rgba(0,194,168,.08);
}

/* líneas LED */

.captly-promo-modal .promo-stadium-board::before{
  content:"";
  position:absolute;
  inset:0;
  background:
  repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.08) 0px,
    rgba(255,255,255,.08) 1px,
    transparent 1px,
    transparent 6px
    );
  opacity:.55;
  pointer-events:none;
}

/* cinta */

.captly-promo-modal .promo-stadium-track{
  display:flex;
  align-items:center;
  width:max-content;
  white-space:nowrap;
  animation: promoBoardLoop 22s linear infinite;
}

.captly-promo-modal .promo-stadium-track span{
  position:relative;
  display:flex;
  align-items:center;
  flex:0 0 auto;
  padding:14px 10px;
  color:#ffffff;
  font-size:15px;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
  text-shadow:0 0 8px rgba(0,194,168,.35);
}

/* Icono Captly */

.captly-promo-modal .promo-stadium-track span::before{
  content:"";
  width:22px;
  height:22px;
  margin-right:20px;
  background-image:url("../images/camps/mundial-2026/icon-captly.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  flex-shrink:0;
}

/* movimiento continuo */

@keyframes promoBoardLoop{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-33.333%);
  }
}

.captly-promo-modal .promo-coupon-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.captly-promo-modal .promo-coupon-img{
  width: 100%;
  height: auto;
  display: block;
  transition: transform .25s ease, filter .25s ease;
}

.captly-promo-modal .promo-coupon-img:hover{
  transform: translateY(-2px) scale(1.01);
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.34));
}

.captly-promo-modal .promo-code-wrap{
  width: max-content;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 3px dashed rgba(0,194,168,.75);
  border-radius: 18px;
  padding: 18px 22px;
  background: rgba(0,194,168,.065);
  transition: .2s;
}

.captly-promo-modal .promo-code-wrap:hover {
  border-color: #00c2a8;
  box-shadow: 0 0 25px rgba(0, 194, 168, .20);
}

.captly-promo-modal .promo-code-box{
  border: 0;
  padding: 0;
  margin: 0;
  width: auto;
  background: transparent;
  color: #2b2b2b;
  font-size: clamp(22px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: 1.6px;
  word-break: break-word;
}

.captly-promo-modal .promo-copy-code-btn{
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgb(0 194 168 / 22%);
  color: #198754;
  font-size: 20px;
  transition: .25s ease;
}

.captly-promo-modal .promo-copy-code-btn:hover{
  background: rgba(0,194,168,.18);
  border-color: rgba(0,194,168,.55);
  transform: translateY(-2px);
}

.captly-promo-modal .promo-copy-code-btn.is-copied{
  background: rgba(0,194,168,.24);
  color: #00c2a8;
}

.captly-promo-modal .promo-rules-grid{
  width: min(760px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.captly-promo-modal .promo-rule-card {
  position: relative;
  display: grid;
  min-height: 92px;
  padding: 16px;
  place-items: center;
  gap: 8px;
  border-radius: 18px;
  font-size: 16px;
  line-height: 1.25;
  color: #212529;
  background: rgb(255 255 255);
  border: 1px solid #FF6B00;
  transition: .2s;
}

/* ICON */
.captly-promo-modal .promo-rule-card i {
  font-size: 24px;
  color: #FF6B00;
  transition: .2s;
}

/* HOVER EFFECT */
.captly-promo-modal .promo-rule-card:hover {
  transform: translateY(-3px);
  color: #2b2b2b;
  border: 1px solid #ff6b00;
  box-shadow: 0 10px 30px rgb(255 107 0 / 12%);
  background: rgb(255 107 0 / 5%);
}

/* ICON HOVER */
.captly-promo-modal .promo-rule-card:hover i {
  transform: scale(1.15);
}

@media (max-width: 767.98px){
  .captly-promo-modal .promo-code-wrap{
    flex-direction: column;
    padding: 18px;
  }

  .captly-promo-modal .promo-rules-grid{
    grid-template-columns: 1fr;
  }
}

.captly-promo-modal .promo-congrats-wrap{
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 32px) 0;
}

.captly-promo-modal .promo-congrats-check{
  width: 86px;
  height: 86px;
  margin: 0 auto 26px;
  display: grid;
  place-items: center;
  border: 6px solid var(--promo-teal);
  border-radius: 50%;
  color: var(--promo-teal);
  font-size: 48px;
  box-shadow:
  0 0 35px rgba(0,194,168,.18),
  inset 0 0 18px rgba(0,194,168,.08);
}

.captly-promo-modal .promo-congrats-title{
  margin: 0 0 18px;
  color: #2b2b2b;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -.8px;
  line-height: 1.1;
}

.captly-promo-modal .promo-congrats-kicker{
  margin: 0 0 12px;
  color: #2b2b2b;
  font-size: 20px;
  font-weight: 700;
}

.captly-promo-modal .promo-unlocked-benefit{
  width: max-content;
  margin: 0 auto 15px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 22px 28px;
  border-radius: 24px;
  border: 3px solid rgba(0,194,168,.75);
  background: rgba(0,194,168,.065);
}

.captly-promo-modal .promo-unlocked-name{
  color: #2b2b2b;
  font-size: clamp(22px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: .04em;
  text-align: left;
}

.captly-promo-modal .promo-unlocked-x{
  color: #2b2b2b;
  font-size: clamp(48px, 7vw, 76px);
  font-weight: 700;
  line-height: .9;
}

.captly-promo-modal .promo-unlocked-icon{
  color: rgba(255,255,255,.92);
  font-size: clamp(32px, 4vw, 48px);
}

.captly-promo-modal .promo-congrats-divider{
  width: min(420px, 90%);
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #2b2b2b;
}

.captly-promo-modal .promo-congrats-divider span{
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}

.captly-promo-modal .promo-congrats-copy{
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255,255,255,.72);
  font-size: 18px;
  line-height: 1.5;
}

@media (max-width: 575.98px){
  .captly-promo-modal .promo-unlocked-benefit{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .captly-promo-modal .promo-unlocked-name{
    text-align: center;
  }
}

.promo-unlocked-icon-img{
  /*width:72px;*/
  height:55px;
  object-fit:contain;
  flex-shrink:0;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.25));
  transition:.35s ease;
}

.copy-code-btn.is-copied{
  background: rgba(0,194,168,.18);
  border-color: rgba(0,194,168,.45);
  color: #00c2a8;

  transform: scale(1.06);

  box-shadow:
  0 0 18px rgba(0,194,168,.22);
}

.copy-code-btn.is-copied i{
  animation: copiedPop .25s ease;
}

@keyframes copiedPop{
  0%{
    transform: scale(.5);
    opacity:0;
  }
  100%{
    transform: scale(1);
    opacity:1;
  }
}

.captly-promo-modal .promo-whatsapp-preview{
  border-radius: 18px;
}

.captly-promo-modal .promo-whatsapp-preview__head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #25d366;
  font-size: 14px;
  font-weight: 900;
}

.captly-promo-modal .promo-whatsapp-preview p{
  min-height: 78px;
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-line;
}

.captly-promo-modal .promo-whatsapp-preview p::after{
  content: "|";
  display: inline-block;
  margin-left: 2px;
  color: var(--promo-teal);
  animation: promoTypingCursor .8s infinite;
}

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

/* =========================================
   WHATSAPP PREVIEW
   ========================================= */

   .captly-promo-modal .promo-whatsapp-preview{
    width: min(760px, 100%);
    margin: 24px auto 0;
    text-align: left;
  }

  .captly-promo-modal .promo-whatsapp-phone{
    overflow: hidden;
    border: 1px solid rgb(7 94 84 / 80%);
    border-radius: 18px;
    background:
    radial-gradient(circle at 15% 20%, rgba(37,211,102,.16), transparent 34%),
    linear-gradient(145deg, rgba(7,22,31,.96), rgba(11,31,43,.92));
  }

  .captly-promo-modal .promo-whatsapp-topbar{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgb(7 94 84 / 80%);
  }

  .captly-promo-modal .promo-whatsapp-avatar{
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff, #ededed);
    color: #fff;
    font-size: 22px;
    box-shadow: 0 10px 24px rgba(37,211,102,.25);
  }

  .captly-promo-modal .promo-whatsapp-topbar span{
    display: block;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.1;
  }

  .captly-promo-modal .promo-whatsapp-topbar small{
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.58);
    font-size: 14px;
    font-weight: 500;
  }

  .captly-promo-modal .promo-whatsapp-chat{
    position: relative;
    padding: 20px;
    background-image: url(../images/camps/mundial-2026/background-whatsapp.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .captly-promo-modal .promo-whatsapp-chat::before{
    content: "";
    position: absolute;
    inset: 0;
    opacity: .08;
    background-image:
    radial-gradient(circle at 20px 20px, rgba(255,255,255,.45) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
  }

  .captly-promo-modal .promo-whatsapp-bubble{
    position: relative;
    width: min(665px, 100%);
    margin-left: auto;
    padding: 16px 18px 26px;
    border-radius: 18px;
    background: #075e54;
    border: 1px solid rgba(37,211,102,.22);
  }

  .captly-promo-modal .promo-whatsapp-bubble::after{
    content: "";
    position: absolute;
    right: -8px;
    top: -0.7px;
    width: 30px;
    height: 50px;
    background: #075e54;
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }

  .captly-promo-modal .promo-whatsapp-bubble p{
    margin: 0;
    color: rgba(255,255,255,.88);
    font-size: 15px;
    line-height: 1.55;
    white-space: pre-line;
  }

  .captly-promo-modal .promo-whatsapp-meta{
    position: absolute;
    right: 14px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,.52);
    font-size: 11px;
  }

  .captly-promo-modal .promo-whatsapp-meta i{
    color: #53bdeb;
    font-size: 14px;
  }

  .captly-promo-modal .promo-whatsapp-cursor{
    display: inline-block;
    width: 2px;
    height: 18px;
    margin-left: 3px;
    background: #25D366;
    vertical-align: -3px;
    animation: promoCursorBlink .8s infinite;
  }

  @keyframes promoCursorBlink{
    0%,50%{ opacity: 1; }
    51%,100%{ opacity: 0; }
  }

  @media (max-width: 575.98px){
    .captly-promo-modal .promo-whatsapp-chat{
      padding: 14px;
    }

    .captly-promo-modal .promo-whatsapp-bubble{
      margin-left: 0;
    }
  }

  .promo-whatsapp-message strong{
    color:#ffffff;
    font-weight:800;
  }

  /* =========================================
   CONGRATS SCREEN · TEXTO OSCURO
   ========================================= */

   .promo-landing-flow .promo-screen[data-promo-screen="congrats"]{
    background: transparent !important;
  }

  .promo-landing-flow .promo-congrats-title{
    color: #2b2b2b !important;
  }

  .promo-landing-flow .promo-congrats-kicker{
    color: #4d4d4d !important;
  }

  .promo-landing-flow .promo-congrats-copy{
    color: #5a5a5a !important;
  }

  .promo-landing-flow .promo-congrats-copy b{
    color: #2b2b2b !important;
  }

  .promo-landing-flow .promo-congrats-divider{
    color: #FF6B00 !important;
  }

  .promo-landing-flow .promo-congrats-divider span{
    background:#FF6B00 !important;
  }

  /* BENEFIT CARD */

  .promo-landing-flow .promo-unlocked-benefit{
    border: 1.5px solid rgba(0,194,168,.75);
    background:rgba(0,194,168,.065);
    box-shadow: 0 0 25px rgba(0, 194, 168, .20);
  }

  .promo-landing-flow .promo-unlocked-name,
  .promo-landing-flow .promo-unlocked-x,
  .promo-landing-flow .promo-unlocked-icon{
    color: #2b2b2b !important;
  }

  /* PROGRESS */

  .promo-landing-flow .promo-mini-progress{
    background: rgba(43,43,43,.10);
  }

/* =========================================
   CUPÓN DESBLOQUEADO · ALINEADO
   ========================================= */

   .promo-landing-flow .promo-unlocked-benefit{
    width: max-content;
    margin-inline:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
  }

  /* TEXTO SUPERIOR */

  .promo-landing-flow .promo-unlocked-name{
    color:#2b2b2b !important;
    font-size: 30px;
    font-weight:700;
    line-height:1;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-align:center;
  }

  /* FILA DEL 15X + ICONO */

  .promo-landing-flow .promo-unlocked-x{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;

    color:#2b2b2b !important;

    font-size:clamp(82px,9vw,132px);
    font-weight:700;
    line-height:.9;
    letter-spacing:-4px;
  }

  /* ICONO */

  .promo-landing-flow .promo-unlocked-icon-img{
    width: 45px;
    height:auto;
    object-fit:contain;
    opacity:.92;
    flex-shrink:0;
  }

  @media(max-width:575.98px){

    .promo-landing-flow .promo-unlocked-benefit{
      padding:22px 20px;
    }

    .promo-landing-flow .promo-unlocked-name{
      font-size:22px;
    }

    .promo-landing-flow .promo-unlocked-x{
      font-size:72px;
      gap:12px;
    }

    .promo-landing-flow .promo-unlocked-icon-img{
      width:44px;
    }
  }

/* =========================================
   TAMAÑOS PERSONALIZADOS POR ICONO
   ========================================= */

   .promo-landing-flow .promo-icon-ball{
    width:90px;
  }

  .promo-landing-flow .promo-icon-medal{
    width:70px;
  }

  .promo-landing-flow .promo-icon-trophy{
    width:45px;
  }

/* =========================================
   GAME LAYOUT HEIGHT FIX
   ========================================= */

   .promo-landing-flow [data-promo-screen="game"] .row.align-items-center{
    align-items:stretch !important;
  }

  .promo-landing-flow [data-promo-screen="game"] .col-lg-7,
  .promo-landing-flow [data-promo-screen="game"] .col-lg-5{
    display:flex;
    flex-direction:column;
  }

  .promo-landing-flow .promo-penalty-game{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:100%;
  }

  .promo-landing-flow .promo-goal-pro{
    flex:1;
  }

  .promo-landing-flow .promo-field-pro{
    min-height:220px;
  }

  .gol-left{
    position:absolute;
    left:0;
    bottom: 0;
    z-index:0;
    width:350px;
    max-width:42vw;
    pointer-events:none;
    transition:
    top .45s ease,
    transform .45s ease,
    opacity .35s ease;
  }

  .gol-right{
    position:absolute;
    right:0;
    bottom: 0;
    z-index:0;
    width:350px;
    max-width:42vw;
    pointer-events:none;
    transition:
    top .45s ease,
    transform .45s ease,
    opacity .35s ease;
  }

  .mundial-game-section .container{
    position:relative;
    z-index:2;
  }

  /* Pantalla minijuego */
  .mundial-game-section[data-active-screen="game"] .gol-left .gol-right{
    bottom: 0;
    transform:translateY(0);
  }

  /* Pantalla felicitaciones */
  .mundial-game-section[data-active-screen="congrats"] .gol-left .gol-right{
    bottom: 0;
    transform:translateY(0);
  }

  /* Pantalla cupón listo */
  .mundial-game-section[data-active-screen="ready"] .gol-left .gol-right{
    bottom: 0;
    transform:translateY(0);
  }

  @media(max-width:991.98px){
    .gol-left{
      opacity:.18;
      left:-260px;
      max-width:80vw;
    }

    .gol-right{
      opacity:.18;
      right:-260px;
      max-width:80vw;
    }
  }

  @media(max-width:575.98px){
    .gol-left{
      display:none;
    }

    .gol-right{
      display:none;
    }
  }

/* =========================================
   FIX MOBILE · PORTERÍA + PORTERO VISIBLE
   ========================================= */

   @media (max-width: 767.98px){

    .promo-landing-flow .promo-penalty-game{
      padding: 14px;
      border-radius: 24px;
      min-height: auto;
      height: auto;
      display: block;
    }

    .promo-landing-flow .promo-stadium-board{
      margin-bottom: 14px;
    }

    .promo-landing-flow .promo-goal-pro{
      height: 230px !important;
      min-height: 230px !important;
      flex: none !important;
      border-width: 7px;
      border-radius: 22px 22px 0 0;
    }

    .promo-landing-flow .promo-net-pro{
      background-size: 24px 24px;
    }

    .promo-landing-flow .promo-keeper-pro{
      width: 96px;
      height: 126px;
      bottom: 10px;
      z-index: 8;
    }

    .promo-landing-flow .promo-keeper-head{
      width: 32px;
      height: 36px;
    }

    .promo-landing-flow .promo-keeper-neck{
      top: 34px;
    }

    .promo-landing-flow .promo-keeper-torso{
      top: 44px;
      width: 48px;
      height: 54px;
    }

    .promo-landing-flow .promo-keeper-arm{
      top: 52px;
      width: 44px;
      height: 13px;
    }

    .promo-landing-flow .promo-keeper-arm--left{
      right: 60px;
    }

    .promo-landing-flow .promo-keeper-arm--right{
      left: 60px;
    }

    .promo-landing-flow .promo-keeper-leg{
      top: 94px;
      height: 34px;
    }

    .promo-landing-flow .promo-field-pro{
      height: 170px !important;
      min-height: 170px !important;
      flex: none !important;
    }

    .promo-landing-flow .promo-direction-arrow{
      bottom: 78px;
    }

    .promo-landing-flow .promo-ball-pro{
      bottom: 12px;
    }
  }

/* =========================================
   TABLET FIX · TEXTO CONTAINER
   ========================================= */

   @media (min-width: 768px) and (max-width: 1199.98px){

    .promo-congrats-textbox{
      position: relative;
      z-index: 5;

      width: fit-content;
      max-width: 720px;

      margin: 24px auto 0;
      padding: 22px 28px;

      border-radius: 24px;

      background: rgba(245,247,250,.82);
      backdrop-filter: blur(10px);

      box-shadow:
      0 12px 38px rgba(0,0,0,.06);

      border: 1px solid rgba(255,255,255,.75);
    }

    .promo-congrats-textbox .promo-congrats-copy{
      color: #2b2b2b !important;
      text-shadow: none;
    }

    .promo-congrats-textbox .promo-congrats-copy b{
      color: #2b2b2b !important;
    }

    .mundial-game-section[data-active-screen="congrats"] .gol{
      opacity: .28;
    }
  }

  /* COLUMNAS FLEX */
  .promo-screen[data-promo-screen="ready"] .row.justify-content-center > .col-lg-3{
    display: flex;
  }

  /* CARDS MISMA ALTURA */
  .promo-rule-card{
    width: 100%;
    height: 100%;
    min-height: 165px;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .promo-rule-card span{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* =========================================
   FORM VALIDATION · SPACING FIX
   ========================================= */

   .captly-promo-modal .promo-form .input-group{
    margin-bottom: 8px !important;
  }

  .captly-promo-modal .promo-field-error{
    margin-top: -2px !important;
    margin-bottom: 12px !important;
    padding-left: 2px;
    font-size: 15px;
    line-height: 1.25;
  }

  .captly-promo-modal .promo-form .form-control.is-invalid,
  .captly-promo-modal .promo-form .form-control.is-invalid:focus{
    border-color: #ef3340;
    box-shadow: 0 0 0 .2rem rgba(239, 51, 64, .08);
  }

  .captly-promo-modal .promo-form .input-group:has(.form-control.is-invalid) .input-group-text{
    border-color: #ef3340;
  }

  /* =========================================
   MODAL INDEX · BACKGROUND RESTORE
   ========================================= */

   .captly-promo-modal:not(.promo-landing-flow) .modal-content{
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 28px;
    background:
    radial-gradient(circle at 10% 10%, rgba(0,194,168,.28), transparent 30%),
    radial-gradient(circle at 88% 32%, rgba(255,107,0,.18), transparent 28%),
    radial-gradient(circle at 78% 92%, rgba(143,92,255,.16), transparent 32%),
    linear-gradient(145deg, #06131c, #091923 62%, #07121b);
    box-shadow: 0 30px 90px rgba(0,0,0,.62);
    color: #fff;
  }

  .captly-promo-modal:not(.promo-landing-flow) .modal-body{
    padding: clamp(28px, 4vw, 44px);
  }

  .captly-promo-modal:not(.promo-landing-flow) .promo-title,
  .captly-promo-modal:not(.promo-landing-flow) .promo-copy{
    color: #fff;
  }

  .captly-promo-modal:not(.promo-landing-flow) .promo-copy{
    color: rgba(255,255,255,.78);
  }

  .captly-promo-modal:not(.promo-landing-flow) .promo-copy span{
    color: #fff;
  }

  .mundial-faq-section{
    background:#f5f7fa;
    padding:80px 0 0;
  }

  .mundial-faq .accordion-item{
    border:1px solid rgba(0,194,168,.22);
    border-radius:18px;
    overflow:hidden;
    margin-bottom:14px;
    background:#fff;
    box-shadow:0 14px 35px rgba(6,19,28,.05);
  }

  .mundial-faq .accordion-button{
    padding:22px 24px;
    font-size:18px;
    font-weight:bolder;
    color:#2b2b2b;
    background:#fff;
    box-shadow:none;
  }

  .mundial-faq .accordion-button:not(.collapsed){
    color:#00c2a8;
    background:rgba(0,194,168,.06);
  }

  .mundial-faq .accordion-button:focus{
    box-shadow:none;
    border-color:transparent;
  }

  .mundial-faq .accordion-body{
    padding:20px 20px 20px;
    color:#5b6470;
    font-size:16px;
    line-height:1.65;
  }

  .mundial-faq .accordion-button::after{
    filter:grayscale(1);
  }

  .mundial-faq .accordion-button:not(.collapsed)::after{
    filter:none;
  }

  .btn-terms-link{
    border:none;
    background:transparent;
    color:#00c2a8;
    font-weight:700;
    font-size:15px;
    transition:.25s ease;
  }

  .btn-terms-link:hover{
    color:#009f8b;
    transform:translateY(-2px);
  }

  .promo-terms-modal{
    border:none;
    border-radius:24px;
    overflow:hidden;
  }

  .promo-terms-modal .modal-header{
    border-bottom:1px solid rgba(0,194,168,.15);
  }

  .promo-terms-modal .modal-title{
    font-weight:800;
  }

  .promo-terms-modal .modal-body{
    line-height:1.8;
    color:#5c6470;
  }

  .promo-terms-modal h6{
    color:#00c2a8;
    font-weight:800;
    margin-top:1.25rem;
  }

/* ================================
   MODAL TÉRMINOS · PREMIUM
   ================================ */

   .promo-terms-modal{
    border: 0;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 34px 90px rgba(6,19,28,.32);
  }

  .promo-terms-header{
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 26px 30px 22px;
    border: 0;
    background:
    linear-gradient(135deg, #06131c, #0a2230 62%, #06201d);
    color: #fff;
  }

  .promo-terms-pill{
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(0,194,168,.38);
    background: rgba(0,194,168,.12);
    color: #dffefa;
    font-size: 12px;
    font-weight: 900;
  }

  .promo-terms-header .modal-title{
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -.4px;
  }

  .promo-terms-header p{
    margin: 4px 0 0;
    color: rgba(255,255,255,.68);
    font-size: 15px;
  }

  .promo-terms-close{
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    transition: .25s ease;
  }

  .promo-terms-close:hover{
    background: rgba(255,255,255,.16);
    transform: rotate(90deg);
  }

  .promo-terms-modal .modal-body{
    padding: 28px 30px;
    color: #5c6470;
    font-size: 15.5px;
    line-height: 1.75;
  }

  .promo-terms-modal h6{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 26px 0 8px;
    color: #06131c;
    font-size: 18px;
    font-weight: 700;
  }

  .promo-terms-modal h6::before{
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #00c2a8;
    box-shadow: 0 0 0 5px rgba(0,194,168,.12);
  }

  .promo-terms-modal h6:first-child{
    margin-top: 0;
  }

  .promo-terms-modal p{
    margin-bottom: 12px;
  }

  .promo-terms-modal .premios img{
    width: 55%;
    max-width: 100%;
    margin-bottom: 12px;
    transition: transform .3s ease;
  }

  .promo-terms-modal .premios img:hover{
    transform: scale(1.02);
  }

  @media (max-width: 991.98px){
    .promo-terms-modal .premios img{
      width: 100%;
    }
  }

  .promo-terms-modal li{
    margin: 6px 0;
    font-weight: 700;
    color: #2b2b2b;
  }

  .promo-terms-footer{
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 18px 30px;
    border: 0;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(14px);
    box-shadow: 0 -18px 35px rgba(6,19,28,.06);
  }

  /* Scroll más pro */
  .promo-terms-modal .modal-body::-webkit-scrollbar{
    width: 8px;
  }

  .promo-terms-modal .modal-body::-webkit-scrollbar-track{
    background: #edf2f4;
  }

  .promo-terms-modal .modal-body::-webkit-scrollbar-thumb{
    background: #00c2a8;
    border-radius: 999px;
  }

  /* FIX · BOTÓN CERRAR MODAL TÉRMINOS */
  .promo-terms-header{
    position: relative;
    padding-right: 86px;
  }

  .promo-terms-close{
    position: absolute;
    top: 28px;
    right: 28px;
    z-index: 10;
  }

  @media (max-width: 575.98px){
    .promo-terms-header{
      padding-right: 70px;
    }

    .promo-terms-close{
      top: 22px;
      right: 20px;
    }
  }

  body:not(.aos-ready) [data-aos]{
    opacity: 0;
  }

  body.aos-ready [data-aos]{
    opacity: initial;
  }