.welcome{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:32px;border:0;background-color:#03090c;background-image:radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,.72) 100%),url('lobby-honeycomb.svg'),radial-gradient(ellipse at center,rgba(0,217,223,.16),transparent 75%);background-position:center;background-size:cover,120px 69.282px,cover;background-repeat:no-repeat,repeat,no-repeat;color:var(--white);overflow:auto}
#welcome{background-image:radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,.72) 100%),url('/assets/lobby-honeycomb.svg'),radial-gradient(ellipse at center,rgba(0,217,223,.16),transparent 75%)}
.welcome[open]{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px}
.welcome.lobby-leaving::backdrop{background:transparent!important;backdrop-filter:none!important}
.welcome img{mix-blend-mode:normal;opacity:1;filter:drop-shadow(0 8px 20px #0009);transition:transform .25s ease;cursor:pointer}.welcome img:hover,.welcome img.is-enlarged{transform:scale(1.1)}
.welcome::backdrop{background:#000}.welcome img{width:min(74vw,510px);height:auto;max-height:65dvh;object-fit:contain}.welcome .button{border:0;min-width:190px;cursor:pointer;font-family:inherit;box-shadow:none;transition:transform .25s ease}.welcome .button:hover,.welcome .button:focus-visible,.welcome .button:active{transform:scale(1.08)}.welcome[open]~*{pointer-events:none}body:has(.welcome[open]){overflow:hidden}
.hero{padding-bottom:0;background:#000}.hero .hero-content{min-height:680px;margin-top:24px;grid-template-columns:1fr 1.2fr;gap:0;isolation:isolate}.hero-copy{z-index:2;padding:40px 0 90px}.hero h1{font-size:clamp(5rem,10vw,9rem)}
.hero-feature{border:0;width:calc(100% + 6vw);max-width:none;max-height:780px;height:100%;object-fit:cover;object-position:center 20%;align-self:stretch;mask-image:linear-gradient(to right,transparent,#000 16%),linear-gradient(to bottom,#000 80%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 16%),linear-gradient(to bottom,#000 80%,transparent);-webkit-mask-composite:source-in}
.gallery-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.gallery-toolbar p{color:var(--muted);font-size:.875rem}.gallery-toolbar div{display:flex;gap:8px}.gallery-toolbar button{width:48px;height:44px;border:1px solid var(--border);background:#15171b;color:var(--white);font:inherit;font-size:1.4rem;cursor:pointer}
.tintal-gallery{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-color:var(--accent) #15171b;padding:0 0 16px;cursor:grab;touch-action:pan-x pan-y;overscroll-behavior-x:contain}.tintal-gallery .tintal-photo{flex:0 0 min(78%,520px);scroll-snap-align:start;user-select:none;cursor:inherit}.tintal-gallery .tintal-photo:first-child{align-self:stretch}.tintal-gallery img{pointer-events:none}.tintal-gallery.dragging{scroll-snap-type:none;cursor:grabbing}.tintal-gallery:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.tintal-videos{max-width:100%}
.slide-stage{display:grid;aspect-ratio:4/5;background:#000;overflow:hidden}.gallery-open .slide-stage img{grid-area:1/1;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;min-height:0}.gallery-open .slide-stage img.next-slide{opacity:0}.gallery-open .slide-stage{padding:0}
.welcome .button[hidden]{display:none}.welcome.entering{gap:0}.welcome.entering img{transform:scale(1.2)}.welcome.entering .welcome-slogan{display:none}.welcome-slogan{display:none;font:800 clamp(1.4rem,4vw,2rem) 'Barlow Condensed',Arial,sans-serif;letter-spacing:.13em;margin:0;text-shadow:0 2px 12px #000;color:#fff}
.hero-slogan{display:block;color:var(--accent);font:800 clamp(1.6rem,3vw,2.5rem) 'Barlow Condensed',Arial,sans-serif;letter-spacing:.07em;margin:0 0 24px}
.tintal-gallery.coverflow{position:relative;display:block;height:clamp(280px,46vw,480px);overflow:hidden;perspective:1200px;touch-action:pan-y;scroll-snap-type:none;padding:0}
.tintal-gallery.coverflow .tintal-photo{position:absolute;width:68%;max-width:580px;left:50%;top:50%;margin:0;transform:translate(calc(-50% + var(--offset)*28%),-50%) scale(calc(1 - var(--depth)*.15));transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s;box-shadow:0 16px 36px #0009;will-change:transform;cursor:grab}
.training-position{text-align:center;color:var(--muted);font-size:.875rem;margin:8px 0 0}
.advanced-category,.category-group{display:flex;flex-direction:column}.team-card{height:100%;container-type:inline-size}.team-photo{aspect-ratio:auto!important;height:calc((100cqw - 26px)*1.25 + 94px);min-height:0;padding:16px;box-sizing:border-box}.advanced-category h4{min-height:2.3em}.teams-grid--four{grid-template-columns:repeat(3,minmax(0,1fr))}
/* BELLATOR visual language continues beyond the hero: a quiet cyan honeycomb texture and framed sections. */
.intro,.tintal,.level,.contact,.enroll{position:relative;isolation:isolate;background-color:#080d10;background-image:linear-gradient(115deg,rgba(0,217,223,.08),transparent 42%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='156' viewBox='0 0 180 156'%3E%3Cg fill='none' stroke='%2300d9df' stroke-opacity='.12' stroke-width='1.5'%3E%3Cpath d='M45 1h90l45 77-45 77H45L0 78zM-45 1h90l45 77-45 77h-90L-90 78zM90 78h90l45 77-45 77H90L45 155z'/%3E%3C/g%3E%3C/svg%3E");background-size:auto,180px 156px}
.intro,.tintal,.level{border-top:1px solid rgba(0,217,223,.18);border-bottom:1px solid rgba(0,217,223,.08)}
.level{padding-top:42px;padding-bottom:42px}.intro{border-radius:8px;padding:clamp(32px,5vw,64px) clamp(24px,6vw,92px);grid-template-columns:minmax(0,1fr);gap:20px;justify-items:center;text-align:center}.intro>div{width:100%;max-width:680px}.intro h2{margin:12px 0 0;text-wrap:balance}.intro p{margin:0;text-wrap:pretty}
.tintal{border-radius:8px;padding-left:clamp(24px,6vw,92px);padding-right:clamp(24px,6vw,92px)}
.contact{background-color:#06090b;background-image:linear-gradient(90deg,rgba(0,217,223,.14),transparent 55%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='156' viewBox='0 0 180 156'%3E%3Cg fill='none' stroke='%2300d9df' stroke-opacity='.11' stroke-width='1.5'%3E%3Cpath d='M45 1h90l45 77-45 77H45L0 78zM-45 1h90l45 77-45 77h-90L-90 78zM90 78h90l45 77-45 77H90L45 155z'/%3E%3C/g%3E%3C/svg%3E")}
@media(max-width:1000px){.teams-grid--four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.teams-grid--four{grid-template-columns:1fr}.tintal-gallery.coverflow{height:330px}.tintal-gallery.coverflow .tintal-photo{width:78%;flex-basis:auto}.team-photo{aspect-ratio:4/5}.advanced-category h4{min-height:0}}
@media(prefers-reduced-motion:reduce){.tintal-gallery.coverflow .tintal-photo{transition:none}}
@media(max-width:720px){.hero .hero-content{display:flex;flex-direction:column;min-height:0;gap:0}.hero-feature{order:0;width:100%;height:auto;max-height:660px;object-fit:contain;object-position:center;align-self:center;margin-inline:auto;mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 85%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 85%,transparent)}.hero-copy{order:1;margin-top:-30px;padding:0 0 50px;align-self:start}.hero h1{font-size:5.5rem}.welcome img{width:min(90vw,460px)}.gallery-toolbar{align-items:center}.tintal-gallery .tintal-photo{flex-basis:88%}
.location-arrow,.tintal-photo>span>span[aria-hidden="true"]{display:none}
.tintal-gallery.coverflow .tintal-photo{touch-action:pan-y pinch-zoom;transform:translate(calc(-50% + var(--offset)*28% + var(--drag-x,0px)),-50%) scale(calc(1 - var(--depth)*.15))}
.tintal-gallery.coverflow.dragging .tintal-photo{transition:none}
}
#entrenamos>.label,#entrenamos>h2{text-align:center}
.slide-stage img{transform-origin:left center;backface-visibility:hidden}.slide-stage{perspective:1200px}
/* Original SVG photograph and cutout sandwich the live headline. */
.hero .hero-content.hero-layered{display:block;position:relative;isolation:isolate;min-height:760px;overflow:hidden;margin-top:24px}
.hero-layered .hero-scene{position:absolute;right:-4%;bottom:0;width:76%;height:100%;object-fit:cover;object-position:center top;pointer-events:none;mask-image:linear-gradient(to right,transparent,#000 28%);-webkit-mask-image:linear-gradient(to right,transparent,#000 28%)}
.hero-layered .hero-scene-back{z-index:0;opacity:.7}
.hero-layered::before{content:"";position:absolute;inset:0 0 0 57%;z-index:1;pointer-events:none;background:url('bellator-bordado-tela.png') center center/cover no-repeat;mask-image:linear-gradient(to right,transparent,#000 24%);-webkit-mask-image:linear-gradient(to right,transparent,#000 24%)}
@media(max-width:720px){.hero-layered::before{inset:0 0 auto 48%;height:580px;background-position:62% center;mask-image:linear-gradient(to right,transparent,#000 30%),linear-gradient(to bottom,#000 80%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 30%),linear-gradient(to bottom,#000 80%,transparent);-webkit-mask-composite:source-in}}
.hero-layered .hero-scene-front{z-index:3;mask-image:url('empresarial-layer-1.png');mask-mode:luminance;mask-size:cover;mask-position:center top;-webkit-mask-image:url('empresarial-layer-1.png');-webkit-mask-size:cover;-webkit-mask-position:center top}
.hero-layered .hero-copy{position:relative;z-index:auto;padding:100px 0 64px}
.hero-layered .hero-copy>h1,.hero-layered .hero-copy>.eyebrow{position:relative;z-index:2}
.hero-layered .hero-copy h1{font-size:clamp(110px,17vw,224px);line-height:.95;max-width:100%;margin-bottom:28px}
.hero-layered .hero-copy h1>span{display:block}
.hero-layered .hero-copy h1>.hero-title-second{font-size:.76em;line-height:1.1}
@media(min-width:721px){.hero-layered .hero-scene{right:10%}}
.hero-layered .hero-copy>p,.hero-layered .hero-actions{position:relative;z-index:5;max-width:40%}
.hero-layered .hero-actions{flex-wrap:wrap}
@media(min-width:721px){.hero-layered .hero-copy>p{max-width:31%;font-size:clamp(14px,1.2vw,17px)}}
@media(max-width:720px){.hero .hero-content.hero-layered{min-height:760px;display:block}.hero-layered .hero-scene{right:-24%;width:125%;height:580px;top:0;bottom:auto;object-fit:contain;mask-image:linear-gradient(to bottom,#000 80%,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent)}.hero-layered .hero-copy{padding:46px 0 28px;margin-top:0}.hero-layered .hero-copy h1{font-size:clamp(72px,17vw,122px);max-width:100%;margin-top:16px}.hero-layered .hero-copy>p{margin-top:300px;max-width:100%}.hero-layered .hero-actions{max-width:100%}}
/* Photo-only coverflow: a clear central image with angled neighbouring cards. */
@media(max-width:720px){.hero-layered .hero-scene{right:-12%}}
.hero-layered::after{content:"";position:absolute;inset:0 -4% 0 auto;width:76%;z-index:4;pointer-events:none;background:linear-gradient(to bottom,#000 0%,transparent 13%,transparent 78%,#000 100%),linear-gradient(to left,#000 0%,transparent 14%);mask-image:linear-gradient(to right,transparent,#000 42%);-webkit-mask-image:linear-gradient(to right,transparent,#000 42%)}
.hero-layered .hero-scene-back{mask-image:linear-gradient(to right,transparent 0%,#00000008 8%,#00000040 20%,#000000b3 32%,#000 44%,#000 85%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 80%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent 0%,#00000008 8%,#00000040 20%,#000000b3 32%,#000 44%,#000 85%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 80%,transparent);-webkit-mask-composite:source-in}
@media(max-width:720px){.hero-layered::after{width:125%;right:-24%;height:580px;bottom:auto}}
@media(max-width:720px){.hero-layered .hero-scene-front{mask-image:url('empresarial-layer-1.png');-webkit-mask-image:url('empresarial-layer-1.png');mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-mode:luminance}}
/* Self-contained SVG applies the original luminance mask on iOS too. */
.hero-layered .hero-scene-front{mask:none;-webkit-mask:none}
@media(max-width:720px){
  .hero-layered .hero-scene{top:150px;height:440px;width:100%;right:0;object-fit:contain}
  .hero-layered .hero-copy{padding-top:12px}
  .hero-layered .hero-copy>.eyebrow{font-size:11px;max-width:100%}
  .hero-layered .hero-copy h1{font-size:clamp(62px,17vw,100px);position:relative;z-index:5;margin-bottom:0}
  .hero-layered .hero-copy>p{margin-top:390px}
  .hero-layered::before{top:150px;height:440px;left:44%}
  .hero-layered::after{top:150px;height:440px;width:100%;right:0}
}
#tintal{margin-top:70px;padding-top:26px}
#tintal .tintal-videos-title{margin-top:38px!important}
#tintal .tintal-gallery.coverflow{height:clamp(184px,34.4vw,392px)}
#tintal .tintal-gallery.coverflow .tintal-photo{width:48%;max-width:464px;clip-path:inset(0 round 22px)}
#tintal .tintal-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at center,transparent 25%,#001012b8 100%);opacity:1;transition:opacity .6s}
#tintal .tintal-photo[data-offset="0"]::after{opacity:0}
.tintal-video .minimal-video{position:relative;overflow:hidden;border:1px solid #22545b;border-radius:18px;background:#020b0e}
.minimal-video video{display:block;width:100%;border:0;border-radius:0}
.minimal-video-controls{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#051b20;color:#eaffff}
.minimal-video-controls button{flex:none;width:44px;height:40px;padding:0;border:1px solid #22545b;border-radius:10px;background:transparent;color:#00d9df;font:20px Arial;cursor:pointer}
.minimal-video-controls input{flex:1;min-width:24px;accent-color:#00cbd2;cursor:pointer}
.minimal-video-controls output{font:12px Arial;white-space:nowrap;font-variant-numeric:tabular-nums}
.minimal-video-controls :focus-visible{outline:2px solid #00d9df;outline-offset:2px}
.minimal-video:fullscreen{display:flex;flex-direction:column;justify-content:center;background:#000}
.minimal-video:fullscreen video{max-height:calc(100dvh - 64px);object-fit:contain}
@media(max-width:720px){#tintal{margin-top:45px}#tintal .tintal-gallery.coverflow{height:clamp(168px,51.2vw,320px)}#tintal .tintal-gallery.coverflow .tintal-photo{width:61%;clip-path:inset(0 round 16px)}.minimal-video-controls{gap:5px;padding:8px}.minimal-video-controls button{width:36px}.minimal-video-controls output{font-size:10px}}
@media(prefers-reduced-motion:reduce){#tintal .tintal-photo::after{transition:none}}
.gallery-toolbar{justify-content:flex-end}
.gallery-toolbar>p,.tintal-photo>span{display:none}
.gallery-toolbar button{border-radius:50%;background:#073239;border-color:#22545b}
.tintal-gallery.coverflow{height:clamp(230px,43vw,490px);perspective:1100px}
.tintal-gallery.coverflow .tintal-photo{width:60%;max-width:580px;border-radius:22px;border:1px solid #a9e5e56b;transform:translate(calc(-50% + var(--offset)*43% + var(--drag-x,0px)),-50%) rotateY(calc(var(--offset)*-14deg)) scale(calc(1 - var(--depth)*.13));box-shadow:0 20px 40px #0008;backface-visibility:hidden;touch-action:pan-y pinch-zoom}
.tintal-gallery.coverflow .tintal-photo img{aspect-ratio:4/3;object-fit:contain}
.tintal-gallery.coverflow.dragging .tintal-photo{transition:none}
.training-position{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:720px){.tintal-gallery.coverflow{height:clamp(210px,64vw,400px)}.tintal-gallery.coverflow .tintal-photo{width:76%;border-radius:16px;transform:translate(calc(-50% + var(--offset)*31% + var(--drag-x,0px)),-50%) rotateY(calc(var(--offset)*-14deg)) scale(calc(1 - var(--depth)*.13))}}
