:root{
    --navy-deep:#070c1f;
    --navy:#0d1a3c;
    --navy-panel:#122558;
    --blue:#1f6fb2;
    --cyan:#3ec6ff;
    --gold:#ffcb05;
    --gold-dark:#c98f00;
    --pitch-1:#1f6b33;
    --pitch-2:#2c8a44;
    --red:#e6483c;
    --white:#f4f8ff;
    --notch:10px;
    --frame-border:6px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  body{
    margin:0;
    background:var(--navy-deep);
    color:var(--white);
    font-family:'VT323', monospace;
    font-size:1.35rem;
    line-height:1.4;
    overflow-x:hidden;
    cursor:default;
  }

  h1,h2,h3,.pixel-font,.btn,.hud,.menu a,.eyebrow,.tag,.stat-label,.card-name,.badge,.dialogue b{
    font-family:'Press Start 2P', monospace;
  }

  ::selection{background:var(--gold);color:var(--navy-deep);}

  /* focus visibility */
  a:focus-visible, button:focus-visible{
    outline:3px dashed var(--cyan);
    outline-offset:3px;
  }

  /* ---------- scanline / crt overlay ---------- */
  .crt{
    pointer-events:none;
    position:fixed;
    inset:0;
    z-index:999;
    background:repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.15) 0px,
      rgba(0,0,0,0.15) 1px,
      transparent 2px,
      transparent 3px
    );
    mix-blend-mode:overlay;
  }
  .vignette{
    pointer-events:none;
    position:fixed;
    inset:0;
    z-index:998;
    background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
  }

  /* ---------- pixel stepped frame system ---------- */
  .pixel-box{
    clip-path:polygon(
      0 var(--notch), var(--notch) var(--notch), var(--notch) 0,
      calc(100% - var(--notch)) 0, calc(100% - var(--notch)) var(--notch), 100% var(--notch),
      100% calc(100% - var(--notch)), calc(100% - var(--notch)) calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
      var(--notch) 100%, var(--notch) calc(100% - var(--notch)), 0 calc(100% - var(--notch))
    );
    background:var(--frame-color, var(--cyan));
    padding:var(--frame-border);
    display:inline-block;
  }
  .pixel-box__inner{
    clip-path:inherit;
    background:var(--panel-color, var(--navy-panel));
    display:block;
    height:100%;
  }
  .pixel-box.block{display:block;}

  /* ---------- HUD ---------- */
  .hud{
    position:fixed;
    top:0; left:0; right:0;
    z-index:500;
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px 16px;
    background:var(--navy-deep);
    border-bottom:4px solid var(--navy-panel);
    font-size:0.55rem;
  }
  .hud-logo{color:var(--gold); white-space:nowrap;}
  .hud-bar-track{
    flex:1;
    height:14px;
    background:var(--navy);
    border:2px solid var(--cyan);
    position:relative;
    overflow:hidden;
  }
  .hud-bar-fill{
    height:100%;
    width:0%;
    background:repeating-linear-gradient(90deg, var(--gold) 0 6px, var(--gold-dark) 6px 12px);
    transition:width 0.15s linear;
  }
  .hud-stage{white-space:nowrap; color:var(--cyan); font-size:0.5rem;}
  .sound-toggle{
    background:var(--navy-panel);
    border:2px solid var(--cyan);
    color:var(--white);
    cursor:pointer;
    padding:6px 8px;
    font-size:0.7rem;
    line-height:1;
  }
  .sound-toggle:hover{background:var(--blue);}

  /* ---------- level select side dots ---------- */
  .level-nav{
    position:fixed;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    z-index:400;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .level-nav a{
    width:16px;height:16px;
    background:var(--navy-panel);
    border:2px solid var(--cyan);
    display:block;
    position:relative;
  }
  .level-nav a::after{
    content:attr(data-label);
    position:absolute;
    right:26px;
    top:50%;
    transform:translateY(-50%);
    font-family:'Press Start 2P',monospace;
    font-size:0.5rem;
    background:var(--navy-panel);
    border:2px solid var(--cyan);
    padding:4px 6px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.15s;
  }
  .level-nav a:hover::after, .level-nav a:focus-visible::after{opacity:1;}
  .level-nav a.active{background:var(--gold); border-color:var(--gold);}
  @media (max-width:900px){ .level-nav{display:none;} }

  /* ---------- generic stage/section ---------- */
  .stage{
    position:relative;
    padding:110px 20px 90px;
    overflow:hidden;
  }
  .stage-inner{
    max-width:1100px;
    margin:0 auto;
    position:relative;
    z-index:2;
  }
  .eyebrow{
    display:inline-block;
    color:var(--navy-deep);
    background:var(--gold);
    font-size:0.55rem;
    padding:6px 10px;
    margin-bottom:18px;
  }
  h2{
    font-size:clamp(1.4rem, 4vw, 2.4rem);
    color:var(--white);
    margin:0 0 14px;
    line-height:1.3;
    text-shadow:3px 3px 0 var(--navy-deep);
  }
  .lead{
    font-size:1.4rem;
    max-width:640px;
    color:#c9d6f5;
    margin-bottom:46px;
  }
  .stars{
    position:absolute; inset:0;
    background-image:
      radial-gradient(2px 2px at 20px 30px, #fff, transparent),
      radial-gradient(2px 2px at 120px 80px, #fff, transparent),
      radial-gradient(1.5px 1.5px at 200px 20px, #fff, transparent),
      radial-gradient(1.5px 1.5px at 300px 120px, #fff, transparent),
      radial-gradient(2px 2px at 400px 60px, #fff, transparent),
      radial-gradient(1.5px 1.5px at 480px 10px, #fff, transparent),
      radial-gradient(2px 2px at 560px 140px, #fff, transparent),
      radial-gradient(1.5px 1.5px at 640px 40px, #fff, transparent),
      radial-gradient(2px 2px at 720px 100px, #fff, transparent),
      radial-gradient(1.5px 1.5px at 60px 160px, #fff, transparent);
    background-repeat:repeat;
    background-size:800px 200px;
    opacity:0.5;
    animation:twinkle 3s infinite steps(2);
  }
  @keyframes twinkle{ 50%{opacity:0.2;} }

  /* ============ HERO ============ */
  #hero{
    padding-top:70px;
    min-height:100vh;
    display:flex;
    align-items:center;
    background:
      linear-gradient(to bottom, #0a1f52 0%, #123b7a 40%, #1f6fb2 62%, #bfe4ff 78%, #bfe4ff 100%);
  }
  .floodlight{
    position:absolute;
    top:-40px;
    width:220px;height:220px;
    background:radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.15) 45%, transparent 70%);
    filter:blur(1px);
  }
  .floodlight.left{left:-60px;}
  .floodlight.right{right:-60px;}
  .pitch-strip{
    position:absolute;
    left:0; right:0; bottom:0;
    height:130px;
    background:repeating-linear-gradient(90deg, var(--pitch-1) 0 60px, var(--pitch-2) 60px 120px);
    border-top:6px solid #fff;
  }
  .hero-inner{
    position:relative;
    z-index:3;
    max-width:760px;
    margin:0 auto;
    text-align:center;
    padding:0 20px;
  }
  .logo{
    font-size:clamp(2.4rem, 9vw, 4.6rem);
    line-height:1.05;
    letter-spacing:2px;
    margin:0;
  }
  .logo .line1{
    color:var(--gold);
    -webkit-text-stroke:3px var(--navy-deep);
    text-shadow:4px 4px 0 var(--blue), 8px 8px 0 var(--navy-deep);
    display:block;
  }
  .logo .line2{
    color:var(--cyan);
    -webkit-text-stroke:3px var(--navy-deep);
    text-shadow:4px 4px 0 var(--gold-dark), 8px 8px 0 var(--navy-deep);
    display:block;
    margin-top:6px;
  }
  .subtitle{
    font-family:'Press Start 2P', monospace;
    font-size:clamp(0.6rem, 2vw, 0.85rem);
    color:var(--white);
    margin:22px 0 34px;
    letter-spacing:1px;
  }
  .press-start{
    font-family:'Press Start 2P', monospace;
    font-size:0.75rem;
    color:var(--gold);
    margin-bottom:26px;
    animation:blink 1.1s steps(1) infinite;
  }
  @keyframes blink{ 50%{opacity:0;} }

  .menu{
    list-style:none;
    padding:0;
    margin:0 auto;
    max-width:360px;
    text-align:left;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .menu a{
    display:block;
    color:var(--white);
    text-decoration:none;
    font-size:0.75rem;
    padding:14px 18px;
    background:rgba(7,12,31,0.55);
    border:2px solid transparent;
    transition:transform 0.1s, border-color 0.1s, background 0.1s;
  }
  .menu a::before{content:"▸ "; color:var(--gold);}
  .menu a:hover, .menu a:focus-visible{
    border-color:var(--cyan);
    background:rgba(7,12,31,0.85);
    transform:translateX(6px);
  }
  .ball{
    width:34px;height:34px;
    margin:34px auto 0;
    background:
      radial-gradient(circle at 35% 30%, #fff 0 35%, #ddd 36% 100%);
    border-radius:50%;
    position:relative;
    box-shadow:inset -4px -4px 0 rgba(0,0,0,0.25);
    animation:bounce 1.6s ease-in-out infinite;
  }
  .ball::before{
    content:"";
    position:absolute; inset:6px;
    background:
      conic-gradient(#111 0 20deg, transparent 20deg 160deg, #111 160deg 180deg, transparent 180deg 340deg, #111 340deg 360deg);
    border-radius:50%;
    opacity:0.85;
  }
  @keyframes bounce{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }

  /* ---------- coach dialogue box ---------- */
  .dialogue{
    display:flex;
    align-items:stretch;
    gap:14px;
    max-width:720px;
    margin:46px auto 0;
    text-align:left;
  }
  .dialogue-avatar{
    flex:0 0 auto;
    width:64px;height:64px;
    background:var(--navy);
  }
  .dialogue-avatar svg{display:block;width:100%;height:100%;}
  .dialogue-text{
    flex:1;
    font-size:1.3rem;
    color:var(--white);
    padding:10px 4px;
  }
  .dialogue-text b{font-size:0.85em; color:var(--cyan); display:block; margin-bottom:2px;}

  /* ============ LOADING DIVIDER ============ */
  #loading{
    background:var(--navy-deep);
    padding:70px 20px;
    text-align:center;
  }
  .loading-title{
    font-size:0.9rem;
    color:var(--cyan);
    margin-bottom:22px;
    letter-spacing:2px;
  }
  .loading-track{
    max-width:420px;
    margin:0 auto 18px;
    height:24px;
    background:var(--navy);
    border:3px solid var(--cyan);
    padding:3px;
  }
  .loading-fill{
    height:100%;
    width:0%;
    background:repeating-linear-gradient(90deg, var(--cyan) 0 8px, #1a4a73 8px 16px);
  }
  .loading-fill.animate{
    animation:fillbar 1.6s steps(20) forwards;
  }
  @keyframes fillbar{ to{width:100%;} }
  .loading-caption{
    font-family:'Press Start 2P',monospace;
    font-size:0.6rem;
    color:#8fa6d6;
  }

  /* ============ TEACHERS ============ */
  #teachers{background:linear-gradient(180deg, var(--navy-deep), var(--navy) 60%, var(--navy-deep));}
  .team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:26px;
  }
  .teacher-card{ --frame-color:var(--cyan); }
  .teacher-card .pixel-box__inner{
    padding:18px 16px 22px;
    display:flex;
    flex-direction:column;
    gap:12px;
    height:100%;
  }
  .teacher-card.red{--frame-color:var(--red);}
  .teacher-card.purple{--frame-color:#8a5cff;}
  .teacher-card.pink{--frame-color:#ff5cb8;}
  .card-avatar{
    width:100%;
    aspect-ratio:1/1;
    background:var(--navy-deep);
  }
  .card-avatar svg{display:block;width:100%;height:100%;}
  .card-name{font-size:0.85rem; color:var(--white);}
  .card-role{
    display:inline-block;
    font-family:'Press Start 2P',monospace;
    font-size:0.5rem;
    padding:5px 8px;
    color:var(--navy-deep);
    background:var(--gold);
    width:fit-content;
  }
  .card-quote{font-size:1.15rem; color:#c9d6f5; min-height:60px;}
  .stat{display:flex; align-items:center; gap:8px; font-size:0.9rem;}
  .stat-label{font-size:0.45rem; width:80px; color:#9db4e8; flex:0 0 auto;}
  .stat-track{flex:1; height:10px; background:var(--navy-deep); border:2px solid #29407a;}
  .stat-fill{height:100%; background:var(--gold);}

  /* ============ STAGE SELECT (schedule) ============ */
  #horarios{background:var(--navy-deep);}
  .stage-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:22px;
  }
  .stage-card{
    --frame-color:var(--cyan);
    cursor:pointer;
  }
  .stage-card .pixel-box__inner{padding:0; overflow:hidden;}
  .stage-thumb{
    height:150px;
    position:relative;
    display:flex; align-items:center; justify-content:center;
  }
  .stage-thumb.morning{background:linear-gradient(180deg,#ffb44f,#ff7043 55%, #4a2a3a);}
  .stage-thumb.afternoon{background:linear-gradient(180deg,#4fa8ff,#1f6fb2 55%, #123b7a);}
  .stage-thumb.night{background:linear-gradient(180deg,#0a1030,#141e50 60%, #1c2b6b);}
  .stage-thumb.custom{background:radial-gradient(circle at 60% 30%, #3a2a6b, #0a0a1f 70%);}
  .stage-thumb .icon{font-size:2.6rem;}
  .stage-thumb .starfx{position:absolute; inset:0; opacity:0.6;}
  .stage-label{
    padding:14px 14px 18px;
  }
  .stage-name{font-size:0.75rem; color:var(--white); margin-bottom:6px;}
  .stage-time{font-size:1.1rem; color:var(--cyan);}

  /* ============ VS SECTION ============ */
  #metodo{
    background:linear-gradient(180deg, #0a1330, #14245a 55%, #0a1330);
    text-align:center;
  }
  .vs-title{
    font-size:1rem;
    color:var(--cyan);
    letter-spacing:2px;
    margin-bottom:8px;
  }
  .vs-wrap{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:18px;
    align-items:start;
    text-align:left;
    margin-top:34px;
  }
  .vs-badge{
    align-self:center;
    font-size:1rem;
    color:var(--gold);
    background:var(--navy-deep);
    border:3px solid var(--gold);
    padding:14px 10px;
    writing-mode:horizontal-tb;
  }
  .vs-col{--frame-color:var(--red);}
  .vs-col.talker{--frame-color:var(--cyan);}
  .vs-col .pixel-box__inner{padding:20px;}
  .vs-col-title{
    font-size:0.85rem;
    margin-bottom:16px;
    display:block;
  }
  .vs-col.talker .vs-col-title{color:var(--cyan);}
  .vs-col:not(.talker) .vs-col-title{color:var(--red);}
  .vs-item{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin-bottom:16px;
    font-size:1.15rem;
  }
  .vs-item .mark{font-family:'Press Start 2P',monospace; font-size:0.8rem; flex:0 0 auto;}
  .vs-col:not(.talker) .mark{color:var(--red);}
  .vs-col.talker .mark{color:var(--cyan);}
  .vs-item small{display:block; color:#9db4e8; font-size:0.95rem;}
  @media (max-width:700px){
    .vs-wrap{grid-template-columns:1fr; text-align:center;}
    .vs-item{text-align:left;}
  }

  /* ============ PRICING ============ */
  #planes{background:linear-gradient(180deg, var(--navy-deep), #0e1b42);}
  .pack-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:26px;
    max-width:760px;
  }
  .pack-card{--frame-color:var(--cyan);}
  .pack-card.flex{--frame-color:var(--gold);}
  .pack-card .pixel-box__inner{padding:26px 22px;}
  .pack-tag{
    font-size:0.5rem;
    color:var(--navy-deep);
    background:var(--cyan);
    padding:5px 8px;
    display:inline-block;
    margin-bottom:14px;
  }
  .pack-card.flex .pack-tag{background:var(--gold);}
  .pack-name{font-size:1.1rem; margin:0 0 4px;}
  .pack-count{color:#9db4e8; font-size:1.2rem; margin-bottom:18px;}
  .pack-feats{list-style:none; padding:0; margin:0 0 24px;}
  .pack-feats li{
    font-size:1.15rem;
    padding-left:24px;
    position:relative;
    margin-bottom:10px;
  }
  .pack-feats li::before{
    content:"✓";
    position:absolute; left:0; top:0;
    color:var(--gold);
    font-family:'Press Start 2P',monospace;
    font-size:0.7rem;
  }

  /* ---------- pixel button ---------- */
  .btn{
    --notch:6px;
    display:inline-block;
    font-size:0.7rem;
    color:var(--navy-deep);
    background:var(--gold);
    border:none;
    padding:14px 20px;
    text-decoration:none;
    cursor:pointer;
    clip-path:polygon(
      0 var(--notch), var(--notch) var(--notch), var(--notch) 0,
      calc(100% - var(--notch)) 0, calc(100% - var(--notch)) var(--notch), 100% var(--notch),
      100% calc(100% - var(--notch)), calc(100% - var(--notch)) calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
      var(--notch) 100%, var(--notch) calc(100% - var(--notch)), 0 calc(100% - var(--notch))
    );
    box-shadow:4px 4px 0 var(--navy-deep);
    transition:transform 0.08s, box-shadow 0.08s;
  }
  .btn:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--navy-deep);}
  .btn:active{transform:translate(4px,4px); box-shadow:0 0 0 var(--navy-deep);}
  .btn.ghost{background:transparent; color:var(--cyan); border:2px solid var(--cyan); box-shadow:4px 4px 0 var(--navy);}
  .btn-row{margin-top:6px;}

  /* ============ FINAL / VICTORY ============ */
  #anotate{
    background:
      radial-gradient(ellipse at top, #16306b 0%, #0a1330 55%, #060a1c 100%);
    text-align:center;
    padding-bottom:120px;
  }
  .team-row{
    display:flex;
    justify-content:center;
    gap:6px;
    margin-bottom:30px;
    flex-wrap:wrap;
  }
  .team-row svg{width:64px;height:64px;}
  .jumbo{
    --frame-color:var(--cyan);
    max-width:640px;
    margin:0 auto 34px;
  }
  .jumbo .pixel-box__inner{padding:26px 22px;}
  .jumbo-eyebrow{font-size:0.55rem; color:var(--white); margin-bottom:10px;}
  .jumbo h2{
    font-size:clamp(1.2rem,4.4vw,1.9rem);
    margin:0 0 18px;
  }
  .jumbo h2 .accent{color:var(--gold);}
  .badges{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:10px;
  }
  .badge{
    font-size:0.5rem;
    color:var(--cyan);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    max-width:110px;
  }
  .badge .ico{font-size:1.6rem;}

  .cta-big{margin-top:38px;}
  .cta-note{margin-top:16px; color:#9db4e8; font-size:1.05rem;}

  /* ============ FOOTER ============ */
  footer{
    background:var(--navy-deep);
    border-top:4px solid var(--navy-panel);
    padding:34px 20px 40px;
    text-align:center;
    color:#7d90c2;
    font-size:1.05rem;
  }
  .footer-brand{
    font-family:'Press Start 2P',monospace;
    color:var(--gold);
    font-size:0.7rem;
    margin-bottom:10px;
  }
  .social-row{display:flex; gap:14px; justify-content:center; margin:16px 0;}
  .social-row a{
    color:var(--white);
    text-decoration:none;
    border:2px solid var(--cyan);
    padding:8px 12px;
    font-size:1rem;
  }
  .social-row a:hover{background:var(--cyan); color:var(--navy-deep);}

  /* scroll reveal */
  .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity 0.5s ease, transform 0.5s ease;
  }
  .reveal.in{opacity:1; transform:translateY(0);}

  /* pixelated scrollbar (webkit) */
  ::-webkit-scrollbar{width:14px;}
  ::-webkit-scrollbar-track{background:var(--navy-deep);}
  ::-webkit-scrollbar-thumb{background:var(--navy-panel); border:3px solid var(--navy-deep);}