@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/barlow-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/barlow-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/barlow-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/barlow-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/barlow-800.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/barlow-condensed-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/barlow-condensed-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/barlow-condensed-800.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face { font-family: 'Luckiest Guy'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/luckiest-guy-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
body{margin:0;background:#fff}
a{color:#F26A1B}a:hover{color:#FF8A3D}
.toon{font-family:'Luckiest Guy',sans-serif;color:#fff;-webkit-text-stroke:2px #141010;paint-order:stroke fill;text-shadow:4px 4px 0 #141010;letter-spacing:1px;line-height:1.02}
.cond{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:1.5px}
.photo{display:block;width:100%;height:100%;object-fit:cover}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;font-size:16px;text-decoration:none;border:2px solid #141010;box-shadow:4px 4px 0 #141010;box-sizing:border-box}
.btn-o{background:#F26A1B;color:#141010}.btn-o:hover{background:#FF8A3D;color:#141010}
.btn-g{background:#6CC417;color:#141010}.btn-g:hover{background:#86DB2F;color:#141010}
.btn-d{background:#141010;color:#fff;box-shadow:4px 4px 0 #F26A1B}.btn-d:hover{background:#2A1F17;color:#fff}
.btn-w{background:#fff;color:#141010}.btn-w:hover{background:#FFF1E4;color:#141010}
.navlink{color:#141010;text-decoration:none;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;font-size:16px;padding:12px 4px}
.navlink:hover{color:#C2410C}
.tag{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;font-size:15px;padding:4px 12px;border:2px solid #141010}
/* ===== Movimiento ===== */
html{scroll-behavior:smooth}
@keyframes heroFade{0%{opacity:0;transform:scale(1.12)}7%{opacity:1}33%{opacity:1}40%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes barFill{0%{transform:scaleX(0)}33%{transform:scaleX(1);opacity:1}34%{opacity:0}100%{transform:scaleX(1);opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes popIn{0%{opacity:0;transform:scale(.4) rotate(-20deg)}70%{transform:scale(1.08) rotate(4deg)}100%{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(6deg)}}
@keyframes pulse{0%{box-shadow:4px 4px 0 #fff,0 0 0 0 rgba(242,106,27,.7)}70%{box-shadow:4px 4px 0 #fff,0 0 0 18px rgba(242,106,27,0)}100%{box-shadow:4px 4px 0 #fff,0 0 0 0 rgba(242,106,27,0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bounceBall{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg) scale(1.04)}75%{transform:rotate(3deg) scale(1.04)}}
@keyframes spinIn{from{transform:rotate(-180deg) scale(.3);opacity:0}to{transform:none;opacity:1}}

.slide{position:absolute;inset:0;opacity:0;animation:heroFade 18s infinite both;will-change:opacity,transform}
.slide.s2{animation-delay:6s}.slide.s3{animation-delay:12s}
.bars{display:flex;gap:8px}
.bars span{position:relative;width:48px;height:5px;background:rgba(255,255,255,.35);overflow:hidden}
.bars span i{position:absolute;inset:0;background:#F26A1B;transform-origin:left;animation:barFill 18s infinite linear both}
.bars span:nth-child(2) i{animation-delay:6s}.bars span:nth-child(3) i{animation-delay:12s}

.hero-copy > *{animation:fadeUp .9s cubic-bezier(.2,.8,.2,1) both}
.hero-copy > :nth-child(1){animation:popIn .9s cubic-bezier(.2,.8,.2,1) both}
.hero-copy > :nth-child(2){animation-delay:.15s}.hero-copy > :nth-child(3){animation-delay:.3s}
.hero-copy > :nth-child(4){animation-delay:.45s}.hero-copy > :nth-child(5){animation-delay:.6s}.hero-copy > :nth-child(6){animation-delay:.75s}
.float{animation:popIn .9s both,floaty 4s ease-in-out 1s infinite}
.pulse{animation:pulse 2s infinite}
.ball{display:inline-block;animation:bounceBall 1.1s ease-in-out infinite}

.marquee{display:flex;width:max-content;animation:marquee 26s linear infinite}
.marquee:hover{animation-play-state:paused}
.marquee > div{display:flex;align-items:center;gap:40px;padding-right:40px}

.btn{transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 #141010}
.btn-d:hover{box-shadow:7px 7px 0 #F26A1B}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 #141010}
.navlink{position:relative}
.navlink::after{content:"";position:absolute;left:4px;right:4px;bottom:6px;height:3px;background:#F26A1B;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.navlink:hover::after{transform:scaleX(1)}
.brand-logo{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
a:hover .brand-logo{transform:rotate(360deg)}

.toon{transition:transform .2s}
h2.toon:hover{animation:wobble .5s ease-in-out}
#logros article > div:first-child, #entrenadores article > div:first-child, #categorias article > div:first-child, .g-grid > div, #cancha .photo-box, #inscripcion > div > div:first-child{overflow:hidden}
#logros article > div:first-child{position:relative}
#logros article, #entrenadores article, #categorias article > div:first-child{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
#logros article:hover, #entrenadores article:hover{transform:translateY(-10px) rotate(-1deg) !important}
#categorias article:hover > div:first-child{transform:translateY(-8px)}
#logros article img, #entrenadores article img, #categorias article img, .g-grid img, #cancha .photo-box img, #inscripcion img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
#logros article:hover img, #entrenadores article:hover img, #categorias article:hover img, .g-grid > div:hover img, #cancha .photo-box:hover img, #inscripcion > div:hover img{transform:scale(1.08)}
.g-grid > div{transition:transform .3s, box-shadow .3s}
.g-grid > div:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 #F26A1B}
#categorias article .toon{display:inline-block;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
#categorias article:hover .toon{transform:scale(1.15) rotate(-4deg)}

/* ===== Animaciones por scroll ===== */
.scroll-progress{position:absolute;left:0;right:0;bottom:-4px;height:4px;background:#6CC417;transform:scaleX(0);transform-origin:left;pointer-events:none}
.roll-ball{display:none}
@keyframes sUp{from{opacity:0;translate:0 60px}to{opacity:1;translate:0 0}}
@keyframes sLeft{from{opacity:0;translate:-90px 0;rotate:-6deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes sRight{from{opacity:0;translate:90px 0;rotate:6deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes sPop{0%{opacity:0;scale:.6;rotate:-4deg}70%{opacity:1;scale:1.06}100%{opacity:1;scale:1;rotate:0deg}}
@keyframes sZoom{from{opacity:0;scale:.75}to{opacity:1;scale:1}}
@keyframes sFlip{from{opacity:0;transform:perspective(900px) rotateX(35deg) translateY(60px)}to{opacity:1;transform:perspective(900px) rotateX(0) translateY(0)}}
@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes heroOut{to{opacity:0;translate:0 -140px}}
@keyframes heroSink{to{scale:1.15}}
@keyframes headerShrink{to{padding-top:4px;padding-bottom:4px}}
@keyframes logoShrink{to{width:44px;height:44px}}
@keyframes roll{from{translate:-140px 0;rotate:0deg}to{translate:calc(100vw + 40px) 0;rotate:1080deg}}
@keyframes marqueeTilt{from{rotate:0deg}to{rotate:-2deg}}

@supports (animation-timeline: view()){
  /* barra de progreso y header que se encoge */
  .scroll-progress{animation:progress linear both;animation-timeline:scroll(root)}
  header > div{animation:headerShrink linear both;animation-timeline:scroll(root);animation-range:0 220px}
  header .brand-logo{animation:logoShrink linear both;animation-timeline:scroll(root);animation-range:0 220px}

  /* hero: el texto sube y se desvanece, las fotos se acercan */
  .hero-inner{animation:heroOut linear both;animation-timeline:scroll(root);animation-range:0 85vh}
  .hero-shade{animation:heroSink linear both;animation-timeline:scroll(root);animation-range:0 100vh}

  /* franja que se inclina al bajar */
  .marquee-wrap{animation:marqueeTilt linear both;animation-timeline:view();animation-range:entry 0% exit 100%}

  /* balón que rueda por la misión */
  .mission{view-timeline-name:--mission}
  .roll-ball{display:block;position:absolute;top:24px;left:0;width:84px;height:84px;animation:roll linear both;animation-timeline:--mission;animation-range:entry 10% exit 90%}

  /* títulos y textos de sección */
  section h2{animation:sPop linear both;animation-timeline:view();animation-range:entry 5% cover 30%}
  section h2 + p, section h2 ~ p, .sec-intro{animation:sUp linear both;animation-timeline:view();animation-range:entry 10% cover 35%}

  /* categorías: entran alternando izquierda y derecha */
  #categorias article{animation:sLeft linear both;animation-timeline:view();animation-range:entry 0% cover 32%}
  #categorias article:nth-child(even){animation-name:sRight}

  /* logros: se voltean hacia arriba */
  #logros article{animation:sFlip linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  #logros article:nth-child(2){animation-range:entry 8% cover 42%}
  #logros article:nth-child(3){animation-range:entry 16% cover 50%}

  /* entrenadores: uno desde cada lado */
  #entrenadores article{animation:sLeft linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  #entrenadores article:nth-child(2){animation-name:sRight}

  /* galería: las fotos aparecen con zoom escalonado */
  .g-grid > div{animation:sZoom linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
  .g-grid > div:nth-child(even){animation-range:entry 10% cover 40%}

  /* cancha e inscripción */
  #cancha > div > div:first-child{animation:sLeft linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  #cancha > div > div:last-child{animation:sRight linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  #inscripcion > div{animation:sPop linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important}.slide.s1{opacity:1}}

/* ===== Navegación ===== */
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.menu-btn{display:none;align-items:center;justify-content:center;width:48px;height:48px;background:#F26A1B;color:#141010;border:2px solid #141010;box-shadow:3px 3px 0 #141010;cursor:pointer;padding:0}
.menu-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #141010}
@keyframes menuDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

/* ===== Responsive ===== */
@media (max-width:1180px){.brand-text{display:none}.navlink{font-size:15px}}
@media (max-width:900px){
  .brand-text{display:inline;font-size:21px !important}
  .menu-btn{display:inline-flex}
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 0 16px}
  .nav.open{display:flex;animation:menuDown .25s ease both}
  .nav .navlink{font-size:20px;padding:14px 4px;border-bottom:2px solid #F3E3D3}
  .nav .navlink::after{display:none}
  .nav .nav-cta{margin-top:16px;min-height:52px !important;font-size:18px}
  section{padding-top:64px !important;padding-bottom:64px !important}
  #inicio{padding:0 !important;min-height:calc(100svh - 80px) !important;align-items:flex-end !important}
  .hero-inner{padding:48px 20px 72px !important}
  .hero-shade{background:linear-gradient(0deg,rgba(20,16,16,.92) 0%,rgba(20,16,16,.7) 45%,rgba(20,16,16,.15) 80%) !important}
  .hero-copy .float{width:84px !important;height:84px !important}
  .hero-copy p{font-size:17px !important}
}
@media (max-width:760px){
  .toon-xl{font-size:56px !important}.toon-l{font-size:40px !important}
  .g-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;grid-auto-rows:150px !important;gap:10px !important}
  .g-grid > div{grid-column:auto !important;grid-row:auto !important}
  .g-grid > div:first-child{grid-column:span 2 !important;grid-row:span 2 !important}
  .g-grid > div:nth-child(4),.g-grid > div:nth-child(5){grid-column:span 2 !important}
  #categorias > div:last-child{grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;gap:36px !important}
  #categorias article > div:first-child > div{height:280px !important}
  #logros article > div:first-child{height:240px !important}
  #entrenadores article > div:first-child{min-height:320px !important}
  #entrenadores h3{font-size:32px !important}
  #cancha .photo-box{height:170px !important}
  #cancha .photo-box:first-child{height:356px !important}
  .insc-img{border-right:0 !important;border-bottom:4px solid #141010;min-height:340px !important}
  .insc-copy{padding:32px 20px !important}
  #inscripcion > div{box-shadow:8px 8px 0 #141010 !important}
  .btn{min-height:50px}
  footer > div{flex-direction:column;align-items:flex-start !important}
}
@media (max-width:420px){
  .toon-xl{font-size:48px !important}.toon-l{font-size:36px !important}
  .brand-text{font-size:18px !important}
  .hero-copy > div{width:100%}
  .hero-copy > div .btn{flex:1 1 100%}
  #logros article, #entrenadores article{box-shadow:6px 6px 0 #141010}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:#141010;color:#fff;padding:12px 18px;font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;text-decoration:none}
.skip-link:focus{top:12px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #141010;outline-offset:3px;box-shadow:0 0 0 6px #FFC72C}
.faq details{background:#fff;border:3px solid #141010;box-shadow:5px 5px 0 #141010;margin:0 0 18px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:1px;min-height:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:32px;line-height:1;color:#C2410C;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:3px solid #141010;background:#FFC72C}
.faq details p{margin:0;padding:18px 22px;font-size:18px;line-height:1.6;color:#3B2A1E}
section[id]{scroll-margin-top:72px}
footer a{display:inline-block;padding:8px 0}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none}
.foot-links a{color:#5A4636;font-weight:600;font-size:15px;padding:8px 0;display:inline-block}
.menu-btn .ic-close{display:none}.menu-btn.is-open .ic-open{display:none}.menu-btn.is-open .ic-close{display:block}