/* ---------- Variables y reset ---------- */
    :root{
      /* Paleta neon inspirada en tus piezas */
      --bg-0:#070b17;           /* navy casi negro */
      --bg-1:#0d1328;           /* navy */
      --neon-cyan:#37d6ff;      /* cian */
      --neon-pink:#ff4fa3;      /* magenta */
      --neon-violet:#7a3cff;    /* violeta de acento */
      --ink:#e6f6ff;            /* texto claro */
      --muted:#9bb6c7;          
      --gold-1:#FFD86A;         /* título LEYENDS */
      --gold-2:#CBA135;
      --card:#10162b;           /* carta base */
      --card-edge:#2a335c;      /* borde carta */
      --glow-strong: 0 0 18px rgba(55,214,255,.65), 0 0 36px rgba(255,79,163,.35);
      --glow-soft: 0 0 8px rgba(55,214,255,.45);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
      color:var(--ink);
      background:
        radial-gradient(1000px 400px at 10% -10%, rgba(122,60,255,.22), transparent 60%),
        radial-gradient(900px 400px at 110% 10%, rgba(255,79,163,.18), transparent 60%),
        linear-gradient(180deg, var(--bg-1), var(--bg-0));
      background-attachment: fixed;
    }
    /* Texturas opcionales: si querés sumar un PNG granulado, reemplazá url() abajo */
    body:before{
      content:"";
      position:fixed; inset:0;
      background-image: url(''); /* 👉 Agregá aquí una textura de grano/suciedad en PNG con alpha */
      background-size:cover; opacity:.08; pointer-events:none;
    }
    .container{width:min(1200px, 92%); margin-inline:auto}

    /* ---------- utilidades ---------- */
    .btn{display:inline-block; padding:14px 22px; border-radius:12px; text-decoration:none; font-weight:800; letter-spacing:.4px}
    .btn-primary{
      color:#061018; background:linear-gradient(90deg,var(--neon-pink),var(--neon-cyan));
      box-shadow: 0 6px 24px rgba(255,79,163,.45), 0 0 0 2px rgba(55,214,255,.15) inset;
      transition:.25s transform ease, .25s filter ease;
    }
    .btn-primary:hover{ transform: translateY(-2px); filter:brightness(1.08)}
    .eyebrow{font: 800 12px/1 Orbitron, sans-serif; letter-spacing:.28em; text-transform:uppercase; color:var(--muted)}
    .title{font: 900 clamp(28px,5vw,64px)/1 Orbitron, sans-serif; letter-spacing:.06em; text-transform:uppercase}
    .neon-cyan{color:var(--neon-cyan); text-shadow:var(--glow-soft)}
    .neon-pink{color:var(--neon-pink); text-shadow:var(--glow-soft)}

    /* ---------- hero ---------- */
    .hero{position:relative; padding: clamp(80px, 10vw, 140px) 0 80px; overflow:hidden}
    .hero .scanlines{position:absolute; inset:0; background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 2px, transparent 4px); opacity:.06; pointer-events:none}
    .hero .glow{position:absolute; inset:0; background: radial-gradient(600px 220px at 60% 40%, rgba(55,214,255,.18), transparent 60%), radial-gradient(500px 200px at 30% 70%, rgba(255,79,163,.26), transparent 60%)}
    .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:38px; align-items:center}
    @media (max-width: 900px){ .hero-grid{grid-template-columns:1fr} }
    .hero-copy h1{margin:0 0 16px}
    .hero-copy p{margin:0 0 26px; color:var(--muted); font-size:clamp(16px,1.6vw,18px)}
    .badge{display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(55,214,255,.25); border-radius:999px; padding:8px 12px; backdrop-filter: blur(6px); background:rgba(10,18,36,.45)}
    .badge .dot{width:8px; height:8px; border-radius:50%; background:var(--neon-cyan); box-shadow:0 0 12px rgba(55,214,255,.8)}
    .hero-art{
      position:relative; min-height:300px; border-radius:22px; background: linear-gradient(135deg, #0f1733, #0a1226);
      box-shadow: var(--glow-strong); border:1px solid rgba(122,60,255,.25);
    }
    /* espacio para un poster/imagen */
    .hero-art:after{content:""; position:absolute; inset:0; background: url('./imagenes/portada.png') center/cover no-repeat; opacity:1}
    .hero-cta{display:flex; gap:12px; flex-wrap:wrap}

    /* ---------- secciones ---------- */
    section{padding:72px 0}
    .section-title{font:900 clamp(22px,4vw,40px)/1.1 Orbitron, sans-serif; letter-spacing:.08em; text-transform:uppercase; margin:0 0 26px}

/* UX suave */
html { scroll-behavior: smooth; }

/* Fade-in de secciones/cards */
.reveal { 
  opacity: 0; 
  transform: translateY(16px); 
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* Skeleton shimmer para imágenes */
.skeleton {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #111831 20%, #162143 30%, #111831 40%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* Tarjetas más suaves al pasar */
.m-card { transition: transform .25s ease, box-shadow .25s ease; }
.m-card:hover { transform: translateY(-4px); }

/* Para usar skeleton superponiendo a la imagen */
.m-art { position: relative; overflow: hidden; }



    
    /* ---------- highlights (por qué venir) ---------- */
    .highlights{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
    @media (max-width: 900px){ .highlights{grid-template-columns:1fr 1fr} }
    @media (max-width: 640px){ .highlights{grid-template-columns:1fr} }
    .h-card{position:relative; padding:24px; border-radius:18px; background:linear-gradient(180deg,rgba(255,79,163,.08),rgba(55,214,255,.06)); border:1px solid rgba(55,214,255,.18)}
    .h-card h3{margin:8px 0 6px; font-weight:800}
    .h-card p{margin:0; color:var(--muted)}
    .icon{width:28px; height:28px; filter: drop-shadow(0 0 8px rgba(55,214,255,.6))}

    /* ---------- carrusel ---------- */
    .carousel{position:relative}
    .carousel-viewport{position:relative; height:360px; border-radius:18px; overflow:hidden; border:1px solid rgba(55,214,255,.2); background:#0c1328}
    .slide{position:absolute; inset:0; opacity:0; transition:opacity .6s ease}
    .slide.active{opacity:1}
    .slide img{width:100%; height:100%; object-fit:cover; display:block}
    .skeleton{position:absolute; inset:0; background:linear-gradient(100deg, #111831 20%, #162143 30%, #111831 40%); background-size:200% 100%; animation: shimmer 1.2s infinite}
    @keyframes shimmer{to {background-position: -200% 0}}
    .car-nav{position:absolute; inset:auto 0 10px 0; display:flex; justify-content:center; gap:8px}
    .dot{width:9px; height:9px; border-radius:50%; background:#23305f; border:1px solid rgba(55,214,255,.35); cursor:pointer}
    .dot.active{background:var(--neon-cyan); box-shadow:0 0 10px rgba(55,214,255,.9)}
    .car-btn{position:absolute; top:50%; transform:translateY(-50%); border:none; background:rgba(6,16,32,.55); color:var(--ink); width:44px; height:44px; border-radius:50%; cursor:pointer; backdrop-filter: blur(3px); border:1px solid rgba(55,214,255,.25)}
    .car-btn:hover{filter:brightness(1.1)}
    .car-btn.prev{left:10px;
    z-index: 9999;}
    .car-btn.next{right:10px}

    /* ---------- LEYENDS (estética Magic) ---------- */
    .legends-header{display:flex; align-items:end; justify-content:space-between; gap:20px; flex-wrap:wrap}
    .legends-title{font:900 clamp(26px,5vw,54px)/1 Orbitron, sans-serif; letter-spacing:.1em; text-transform:uppercase; background: linear-gradient(90deg, var(--gold-1), var(--gold-2)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 18px rgba(203,161,53,.25)}
 .legend-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
@media (max-width:1200px){ .legend-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:960px){ .legend-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .legend-grid{grid-template-columns:1fr} }
  .m-card{
  position:relative;
  border-radius:18px;
  background:linear-gradient(180deg,#0e1633,#0a1126);
  border:2px solid var(--card-edge);
  box-shadow:0 10px 40px rgba(0,0,0,.45), 0 0 30px rgba(55,214,255,.15) inset;
  overflow:hidden;
  max-width:520px;   /* limita ancho y permite layout horizontal interno */
  margin:auto;
}
.m-card:before{
  content:"";
  position:absolute; inset:-2px; border-radius:20px;
  background:conic-gradient(from 180deg at 50% 50%,
    rgba(255,79,163,.6), rgba(55,214,255,.6), rgba(122,60,255,.6), rgba(255,79,163,.6));
  filter:blur(14px); opacity:.35; z-index:0;
}
.m-card:after{
  content:"";
  position:absolute; inset:0; border-radius:18px;
  background:
    radial-gradient(120% 80% at 10% -10%, rgba(122,60,255,.15), transparent 50%),
    radial-gradient(120% 80% at 110% 110%, rgba(255,79,163,.12), transparent 50%);
  z-index:0;
}
.m-card > *{ position:relative; z-index:1; }
.m-head{
  padding:12px 14px;
  border-bottom:2px solid var(--card-edge);
  font:800 14px Orbitron, sans-serif;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--neon-cyan);
  text-shadow:0 0 10px rgba(55,214,255,.6);
}
.m-art{ aspect-ratio:4/3; position:relative; overflow:hidden; }
.m-art img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.05); }
.m-body{ padding:14px 14px 18px; }
.m-meta{ font-size:12px; color:var(--muted); margin-bottom:8px; }
.m-desc{ font-size:14px; color:#cfe7ff; }

/* Layout interno “horizontal” en pantallas anchas, manteniendo card vertical */
@media (min-width:560px){
  /* .m-card{ display:grid; grid-template-columns: 1.1fr 1fr; } */
  .m-head{ grid-column:1 / -1; }
}
    /* ---------- Reglamento (visual) ---------- */
    .rules{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
    @media (max-width: 900px){ .rules{grid-template-columns:1fr 1fr} }
    @media (max-width: 600px){ .rules{grid-template-columns:1fr} }
    .rule{display:flex; gap:14px; align-items:flex-start; padding:18px; border:1px solid rgba(55,214,255,.18); border-radius:16px; background:linear-gradient(180deg, rgba(55,214,255,.06), rgba(255,79,163,.06))}
    .rule svg{flex:0 0 28px}
    .rule h4{margin:0 0 6px; font-weight:800}
    .rule p{margin:0; color:var(--muted)}

    /* ---------- Prizes & CTA ---------- */
    .prize{
      display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:center;
      background:linear-gradient(90deg, rgba(255,79,163,.1), rgba(55,214,255,.08)); border:1px solid rgba(55,214,255,.18); border-radius:18px; padding:24px;
    }
    @media (max-width: 800px){ .prize{grid-template-columns:1fr} }

    /* ---------- Video ---------- */
    .video-wrap{position:relative; padding-top:56.25%; border-radius:18px; overflow:hidden; border:1px solid rgba(55,214,255,.2); box-shadow: var(--glow-soft)}
    .video-wrap iframe, .video-wrap video{position:absolute; inset:0; width:100%; height:100%}

    /* ---------- Footer ---------- */
    footer{padding:40px 0 60px; color:var(--muted); font-size:14px}
    .footer-grid{display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:space-between}

    /* ---------- Sponsors ---------- */
    .sponsors-wrap {
      position: relative;
      overflow: hidden;
      padding: 20px 0;
      background: var(--surface);
      border-radius: 8px;
      margin: 20px 0;
    }

    .sponsors-track {
      display: flex;
      animation: scroll 30s linear infinite;
    }

    .sponsors-group {
      display: flex;
      gap: 40px;
      padding: 0 20px;
      flex-shrink: 0;
    }

    .sponsors-group img {
      height: 102px;
      object-fit: contain;
      filter: grayscale(1) brightness(1.5);
      opacity: 0.7;
      transition: all 0.3s ease;
    }

    .sponsors-group img:hover {
      filter: grayscale(0) brightness(1);
      opacity: 1;
    }

    @keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    /* Pausa animación al hacer hover */
    .sponsors-wrap:hover .sponsors-track {
      animation-play-state: paused;
    }