:root{
  --asf-bg:#070a12;
  --asf-panel:rgba(255,255,255,.06);
  --asf-stroke:rgba(255,255,255,.10);
  --asf-text:#eaf0ff;
  --asf-muted:rgba(234,240,255,.70);
  --asf-glow:rgba(120,255,191,.24);
}

.asf-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial; color:var(--asf-text);}
.asf-wrap *{box-sizing:border-box;}

.asf-hero{
  background:
    radial-gradient(1200px 420px at 50% 0%, rgba(120,255,191,.18), transparent 55%),
    radial-gradient(900px 500px at 20% 40%, rgba(0,183,255,.12), transparent 55%),
    radial-gradient(900px 500px at 80% 50%, rgba(255,0,153,.12), transparent 55%),
    linear-gradient(180deg, #050713 0%, #0b1021 50%, #070a12 100%);
  border:1px solid var(--asf-stroke);
  border-radius:22px;
  padding:28px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  overflow:hidden;
  position:relative;
}
.asf-hero:before{
  content:"";
  position:absolute; inset:-2px;
  background:radial-gradient(600px 180px at 50% 0%, rgba(255,255,255,.08), transparent 70%);
  pointer-events:none;
}

.asf-brand{position:relative; z-index:2; text-align:center; margin-bottom:22px;}
.asf-logo{font-weight:800; letter-spacing:.14em; font-size:30px; text-transform:uppercase;}
.asf-subtitle{color:var(--asf-muted); margin-top:6px; font-size:14px;}

/* Carousel (Portada) */
.asf-carousel{
  position:relative;
  margin:18px auto 0;
  max-width:840px;
  padding:0 44px;
}

/* Cuando usas imágenes 2:3 (tus cards), dejamos que se vean EXACTAS y más grandes */
.asf-carousel.asf-carousel-image{max-width:620px; padding:0 18px;}
/* En modo imagen, NO dejamos ver el slide vecino (tapaba el swipe en móvil). */
.asf-carousel.asf-carousel-image .asf-carousel-track{overflow:hidden; border-radius:22px;}
.asf-carousel.asf-carousel-image .asf-slide{
  padding:12px 0 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.asf-carousel-track{
  display:flex;
  overflow:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  border-radius:26px;
}
.asf-slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  position:relative;
  padding:6px 0;
}
.asf-slide:before{
  content:"";
  position:absolute;
  inset:-10px;
  background-image:var(--asf-bg-image);
  background-size:cover;
  background-position:center;
  opacity:.38;
  filter:saturate(1.18) contrast(1.08);
  transform:scale(1.02);
  pointer-events:none;
}
.asf-slide:after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 220px at 70% 22%, rgba(255,255,255,.12), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,0) 35%, rgba(0,0,0,.28));
  pointer-events:none;
}

/* Slide "imagen completa" (sin capas encima, para que la tarjeta se vea EXACTA) */
.asf-slide.asf-slide-image:before,
.asf-slide.asf-slide-image:after{display:none;}

.asf-hero-card{
  position:relative;
  z-index:3;
  max-width:520px;
  margin:0 auto;
  border-radius:0;
  overflow:visible;
  box-shadow:none;
  border:none;
  background:transparent;
}
.asf-hero-img{display:block; width:100%; height:auto; border-radius:0; filter:drop-shadow(0 28px 70px rgba(0,0,0,.65));}
.asf-hero-actions{position:relative; z-index:3; display:flex; justify-content:center; margin-top:14px;}
.asf-hero-actions{width:100%;}
.asf-hero-buy{
  padding:14px 28px;
  border-radius:18px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* Botones premium por plan */
.asf-hero-buy-pass{
  background:linear-gradient(180deg, #ff2a55 0%, #c30026 55%, #8f001a 100%);
  border:1px solid rgba(255,210,150,.62);
  box-shadow:0 18px 42px rgba(0,0,0,.58), 0 0 26px rgba(255,46,86,.25);
}
.asf-hero-buy-temporal{
  background:linear-gradient(180deg, #ffd24a 0%, #ffad18 55%, #e27a00 100%);
  border:1px solid rgba(255,245,190,.65);
  box-shadow:0 18px 42px rgba(0,0,0,.58), 0 0 24px rgba(255,200,70,.22);
}

/* Micro-interacción premium (hover/active) */
.asf-hero-buy-pass:hover,.asf-hero-buy-temporal:hover{filter:brightness(1.05); transform:translateY(-1px);}
.asf-hero-buy-pass:active,.asf-hero-buy-temporal:active{filter:brightness(.98); transform:translateY(0);}

/* Checkout éxito */
.asf-checkout-success{display:flex; justify-content:center;}
.asf-success-box{
  width:min(520px, 92vw);
  border-radius:18px;
  padding:20px 18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  text-align:center;
}
.asf-success-title{font-weight:900; font-size:22px; letter-spacing:.04em;}
.asf-success-sub{margin-top:10px; color:var(--asf-muted);}
.asf-success-box .asf-btn{margin-top:16px;}
.asf-carousel .asf-card{
  width:100%;
  margin:0;
}
.asf-carousel-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.35);
  color:var(--asf-text);
  font-size:18px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  cursor:pointer;
  z-index:5;
}
.asf-carousel-nav:disabled{opacity:.35; cursor:default;}
.asf-prev{left:8px;}
.asf-next{right:8px;}

.asf-carousel-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:12px;
  opacity:.9;
}
.asf-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.30);
  background:rgba(255,255,255,.12);
}
.asf-dot.is-active{
  background:rgba(120,255,191,.32);
  border-color:rgba(120,255,191,.55);
}


.asf-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; position:relative; z-index:2;}

.asf-card{
  display:block;
  border-radius:26px;
  padding:22px;
  text-decoration:none;
  color:var(--asf-text);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.asf-card:hover{transform:translateY(-2px); box-shadow:0 26px 70px rgba(0,0,0,.55); filter:saturate(1.05);}

.asf-card-top{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:14px;}
.asf-rating{font-size:50px; font-weight:900; letter-spacing:-.04em; line-height:1;}
.asf-position{font-weight:800; letter-spacing:.10em; opacity:.9;}

.asf-card-title{font-size:34px; font-weight:900; letter-spacing:.06em; margin-top:6px;}
.asf-card-meta{margin-top:10px; color:rgba(255,255,255,.85);}

.asf-card-cta{
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.22);
}

.asf-card-pass{
  background:
    radial-gradient(600px 220px at 70% 15%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(135deg, #7c0a18 0%, #b11724 35%, #5b0710 100%);
}
.asf-card-temporal{
  background:
    radial-gradient(600px 220px at 70% 15%, rgba(255,255,255,.20), transparent 60%),
    linear-gradient(135deg, #c8a64a 0%, #f1d37a 35%, #a97e20 100%);
  color:#111;
}
.asf-card-temporal .asf-card-cta{background:rgba(255,255,255,.55); border-color:rgba(0,0,0,.12);}
.asf-card-temporal .asf-card-meta{color:rgba(0,0,0,.75);}

.asf-card:after{
  content:"";
  position:absolute; right:-70px; top:-40px;
  width:220px; height:220px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 65%);
  opacity:.75;
}

/* Pages */
.asf-pagehead{margin:18px 0 16px; text-align:center;}
.asf-pagehead h2{margin:0; font-size:30px; letter-spacing:.08em; text-transform:uppercase;}
.asf-pagehead p{margin:8px 0 0; color:var(--asf-muted);}

.asf-products{display:flex; flex-direction:column; gap:12px; margin-top:16px;}
.asf-product{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.asf-product-title{font-weight:800; font-size:18px;}
.asf-product-sub{color:var(--asf-muted); margin-top:3px; font-size:13px;}
.asf-product-price{font-weight:900; font-size:18px;}

.asf-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--asf-text);
  background:linear-gradient(135deg, rgba(120,255,191,.22), rgba(0,183,255,.18));
  border:1px solid rgba(120,255,191,.26);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.asf-btn:hover{filter:brightness(1.08);}

/* Asegura que los botones del hero (PASS/TEMPORAL) SIEMPRE ganen a .asf-btn */
.asf-btn.asf-hero-buy{padding:14px 28px; border-radius:18px; font-weight:900; letter-spacing:.10em; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.35); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;}
.asf-btn.asf-hero-buy-pass{
  background:linear-gradient(180deg, #ff2a55 0%, #c30026 55%, #8f001a 100%);
  border:1px solid rgba(255,210,150,.62);
  box-shadow:0 18px 42px rgba(0,0,0,.58), 0 0 26px rgba(255,46,86,.25);
}
.asf-btn.asf-hero-buy-temporal{
  background:linear-gradient(180deg, #ffd24a 0%, #ffad18 55%, #e27a00 100%);
  border:1px solid rgba(255,245,190,.65);
  box-shadow:0 18px 42px rgba(0,0,0,.58), 0 0 24px rgba(255,200,70,.22);
}

.asf-empty,.asf-hint{
  margin-top:18px;
  padding:16px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px dashed rgba(255,255,255,.16);
  color:var(--asf-muted);
}

.asf-sports{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:14px 0 10px;}
.asf-sportcard{
  display:block;
  padding:16px;
  border-radius:18px;
  text-decoration:none;
  color:var(--asf-text);
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  position:relative;
  overflow:hidden;
}
.asf-sportcard:hover{filter:brightness(1.06);}
.asf-sportbadge{display:inline-flex; font-weight:900; letter-spacing:.12em; font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.14);} 
.asf-sportname{margin-top:10px; font-size:18px; font-weight:900;}
.asf-sportmeta{margin-top:4px; color:var(--asf-muted); font-size:12px;}

.asf-sectiontag{margin:12px 0 6px; text-align:center; color:var(--asf-muted);}
.asf-sectiontag strong{color:var(--asf-text);}

/* Checkout */
.asf-checkout{display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; margin-top:16px;}
.asf-summary{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  padding:16px;
}
.asf-summary-row{display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.10);} 
.asf-summary-row:last-child{border-bottom:none;}
.asf-wallets{margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.10);} 
.asf-wallet-title{font-weight:900; letter-spacing:.06em; text-transform:uppercase; font-size:12px; margin-bottom:10px; color:var(--asf-muted);} 
.asf-wallets ul{margin:0; padding-left:18px;}
.asf-wallets li{margin:8px 0; color:rgba(234,240,255,.88);} 
.asf-wallets code{display:inline-block; max-width:100%; overflow:auto; padding:4px 6px; border-radius:10px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.14);} 

.asf-form{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  padding:16px;
}
.asf-form-row{display:flex; flex-direction:column; gap:8px; margin-bottom:12px;}
.asf-form-row label{font-weight:800; color:rgba(234,240,255,.85);} 
.asf-form-row input{
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.30);
  color:var(--asf-text);
  padding:0 12px;
  outline:none;
}
.asf-form-row input:focus{border-color:rgba(120,255,191,.44); box-shadow:0 0 0 3px rgba(120,255,191,.12);} 
.asf-form-actions{margin-top:8px;}

.asf-msg{margin:14px 0; padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.14);}
.asf-msg-ok{background:rgba(120,255,191,.12);}
.asf-msg-bad{background:rgba(255,67,95,.10);} 

/* Responsive */
@media (max-width: 860px){
  .asf-carousel{padding:0 10px;}
  .asf-carousel-nav{display:none;}

  .asf-cards{grid-template-columns:1fr;}
  .asf-card-title{font-size:30px;}
  .asf-checkout{grid-template-columns:1fr;}
  .asf-sports{grid-template-columns:1fr;}
}

.asf-toast{
  position:fixed;
  left:50%;
  bottom:26px;
  transform:translateX(-50%) translateY(10px);
  background:rgba(0,0,0,.75);
  border:1px solid rgba(255,255,255,.16);
  color:var(--asf-text);
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.02em;
  opacity:0;
  transition:all .22s ease;
  z-index:99999;
}
.asf-toast-show{opacity:1; transform:translateX(-50%) translateY(0);} 


.asf-products-chooser{margin-top:12px;}


/* ===== v1.1.1 Premium / Mobile ===== */

/* Checkout: botón X */
.asf-pagehead{position:relative; padding-right:44px;}
.asf-close{
  position:absolute;
  right:0; top:0;
  width:38px; height:38px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  font-size:26px; line-height:1;
  color:rgba(234,240,255,.92);
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 22px rgba(0,0,0,.45);
}
.asf-close:hover{filter:brightness(1.08);}

/* Portada: tarjetas más altas (2:3) */
.asf-carousel{padding:0 18px;}
.asf-carousel-track{border-radius:34px;}
.asf-slide{
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.asf-carousel .asf-card{
  width:100%;
  max-width:540px;
  aspect-ratio:2/3;
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.asf-carousel .asf-card-top{margin-bottom:0;}
.asf-carousel .asf-rating{font-size:62px;}
.asf-carousel .asf-card-title{font-size:40px; margin-top:10px;}
.asf-carousel .asf-card-meta{font-size:16px; margin-top:10px;}
.asf-carousel .asf-card-cta{
  margin-top:auto;
  padding:16px 18px;
  font-size:16px;
  border-radius:18px;
}

/* Marco premium */
.asf-carousel .asf-card{
  border:1px solid rgba(220,190,120,.42);
  box-shadow:
    inset 0 0 0 2px rgba(220,190,120,.12),
    0 26px 90px rgba(0,0,0,.66);
}
.asf-carousel .asf-card:before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  pointer-events:none;
}
.asf-carousel .asf-card-pass{
  background:
    radial-gradient(720px 320px at 60% 18%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.55) 55%, rgba(0,0,0,.72)),
    linear-gradient(135deg, #0a1021 0%, #2a0b13 35%, #7c0a18 80%, #2a0b13 100%);
}
.asf-carousel .asf-card-pass .asf-card-cta{
  background:rgba(255,23,51,.20);
  border-color:rgba(220,190,120,.35);
  box-shadow:0 0 26px rgba(255,23,51,.18);
}
.asf-carousel .asf-card-temporal{
  color:var(--asf-text);
  background:
    radial-gradient(720px 320px at 60% 18%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.55) 55%, rgba(0,0,0,.72)),
    linear-gradient(135deg, #0a1021 0%, #1b1605 35%, #c8a64a 80%, #1b1605 100%);
}
.asf-carousel .asf-card-temporal .asf-card-cta{
  background:rgba(255,200,55,.18);
  border-color:rgba(220,190,120,.38);
  box-shadow:0 0 26px rgba(255,200,55,.16);
}

/* Mobile tweaks */
@media (max-width: 520px){
  .asf-hero{padding:18px;}
  .asf-carousel{padding:0 10px;}
  .asf-carousel .asf-card{max-width:460px; padding:22px;}
  .asf-carousel .asf-card-title{font-size:36px;}
}

/* ===== v1.1.3.2 Live Card Effects (requested) ===== */

/* 1) Make image cards larger on mobile (better vertical presence) */
@media (max-width: 860px){
  .asf-carousel.asf-carousel-image{max-width: 96vw; padding:0 6px;}
  .asf-carousel.asf-carousel-image .asf-slide{padding:10px 0 18px;}
  .asf-carousel.asf-carousel-image .asf-hero-card{max-width: 92vw;}
  .asf-carousel.asf-carousel-image .asf-hero-img{width:100%; height:auto; max-height: 80vh;}
  .asf-carousel.asf-carousel-image .asf-hero-actions{margin-top:16px;}
  .asf-carousel.asf-carousel-image .asf-hero-buy{width:min(92vw, 420px);}
}

/* 2) "Viva/Premium" effects: shimmer + floating + tilt/parallax */
.asf-hero-card.asf-live{
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
  animation: asfFloat 6.5s ease-in-out infinite;
}

/* Shimmer sweep */
.asf-hero-card.asf-live::before{
  content:"";
  position:absolute;
  inset:-6px;
  pointer-events:none;
  background:linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.12) 22%,
    rgba(255,255,255,0) 48%,
    rgba(255,255,255,0) 100%);
  transform:translateX(-60%) skewX(-12deg);
  filter:blur(0.2px);
  opacity:.55;
  mix-blend-mode:screen;
  animation: asfShimmer 3.8s ease-in-out infinite;
}

/* Pointer highlight that follows cursor/finger */
.asf-hero-card.asf-live::after{
  content:"";
  position:absolute;
  inset:-10px;
  pointer-events:none;
  background:
    radial-gradient(220px 220px at var(--asf-mx,50%) var(--asf-my,30%), rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
    radial-gradient(420px 240px at 50% 10%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%);
  opacity:.85;
  mix-blend-mode:screen;
}

.asf-hero-card.asf-live .asf-hero-img{
  display:block;
  transform:
    perspective(980px)
    rotateX(var(--asf-rx, 0deg))
    rotateY(var(--asf-ry, 0deg))
    translateZ(18px);
  transition:transform .12s ease;
}

/* On hover, slightly stronger */
.asf-hero-card.asf-live:hover .asf-hero-img{
  transform:
    perspective(980px)
    rotateX(var(--asf-rx, 0deg))
    rotateY(var(--asf-ry, 0deg))
    translateZ(26px);
}

@keyframes asfFloat{
  0%{transform:translateY(0px)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0px)}
}

@keyframes asfShimmer{
  0%{transform:translateX(-70%) skewX(-12deg)}
  55%{transform:translateX(120%) skewX(-12deg)}
  100%{transform:translateX(120%) skewX(-12deg)}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .asf-hero-card.asf-live{animation:none;}
  .asf-hero-card.asf-live::before{animation:none; opacity:.25;}
  .asf-hero-card.asf-live .asf-hero-img{transition:none;}
}