/* Jurassic: jungle, obsidian and lava. Decorative layers never receive input. */
:root{--noche:#070e12;--panel:#101d23;--linea:rgba(144,178,171,.22);--radio:10px;--volcano:#ff774a;--mist:#a0c7be}
body{background:#070e12}
body::before{z-index:-2;background:linear-gradient(180deg,rgba(4,12,15,.88),rgba(4,12,15,.95)),url(../img/jurassic-volcanic-jungle-hero.webp) center/cover}
.cabecera{background:rgba(5,13,16,.9);border-bottom-color:rgba(222,163,101,.2)}
.panel{background:linear-gradient(145deg,rgba(29,44,45,.93),rgba(7,17,22,.96));border-color:rgba(137,170,157,.22)}
.hero{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:55px max(var(--gutter),calc((100vw - 1160px)/2)) 28px;min-height:700px;isolation:isolate;border-bottom:1px solid #704332;background:#081217}
.hero::before{inset:-2%;opacity:1;filter:none;mask-image:none;background:linear-gradient(90deg,rgba(4,13,18,.64),rgba(4,13,18,.13) 58%),url(../img/jurassic-volcanic-jungle-hero.webp) center/cover;transform:translate(calc(var(--pointer-x,0px) * -.45),calc(var(--pointer-y,0px) * -.45)) scale(1.025);transition:transform .6s ease-out}
.hero::after{z-index:-1;background:linear-gradient(0deg,#071116 0%,rgba(7,17,22,.7) 8%,transparent 45%),linear-gradient(90deg,rgba(3,12,17,.48),transparent 62%)}
.hero-in{position:relative;min-height:490px;grid-template-columns:1.05fr 1fr;gap:0;z-index:2;align-items:center}
.hero-copy{position:relative;z-index:4;padding:15px 0 35px;max-width:580px}
.hero-liga{font-size:12px;letter-spacing:.35em;display:flex;align-items:center;gap:12px;color:#d4e1d9}
.hero-liga::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff9d5b;box-shadow:0 0 18px #ff6738}
.hero-word{width:min(540px,100%);margin:12px 0 0}
.hero-title{font-family:var(--f-display);font-size:clamp(58px,6.8vw,94px);line-height:.91;font-weight:400;letter-spacing:.01em;margin:16px 0 0;text-shadow:0 5px 30px #02080c}
.hero-title em{font-style:normal;color:#ff9867}
.hero-lema{font-size:20px;max-width:370px;line-height:1.45;margin:20px 0 26px;color:#e3dfcf;text-shadow:0 2px 8px #02080c}
.hero-acciones .btn{min-height:50px;border-radius:6px;font-size:16px}
.hero-acciones .btn:first-child{background:linear-gradient(115deg,#f77940,#c33929);box-shadow:0 8px 32px #ed4c333f}
.hero-acciones .btn.sec{background:#09171cbb;border-color:#a6bdb66b;backdrop-filter:blur(8px)}
.hero-note{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#b4c4bc;margin-top:17px}
.hero .rex{position:absolute;right:-6%;top:-16px;width:min(610px,53vw);aspect-ratio:1;z-index:2;pointer-events:none;transform:translate(var(--pointer-x,0px),var(--pointer-y,0px));transition:transform .6s ease-out}
.hero .rex :is(img,.creature-rig){border-radius:0;mask-image:none;object-fit:contain;filter:drop-shadow(-12px 20px 28px #030709bb) drop-shadow(3px 0 2px #ef5c3533);animation:rex-awake 7s ease-in-out infinite;transform-origin:65% 75%}
.rex-halo{inset:13% -9% 3% 0;background:radial-gradient(ellipse,rgba(255,95,32,.3),transparent 65%);filter:blur(22px)}
.rex-anillo,.rex-ojos{display:none}
.rex-spark{position:absolute;left:54%;top:21%;width:4%;height:4%;border-radius:50%;background:#ff572233;filter:blur(8px);animation:latido 5s ease-in-out infinite;mix-blend-mode:screen}
.hero-foreground{position:absolute;inset:0;z-index:3;pointer-events:none;background:url(../img/jurassic-jungle-frame.webp) center/100% 100% no-repeat;opacity:.63;transform:translate(calc(var(--pointer-x,0px) * 1.3),calc(var(--pointer-y,0px) * 1.3)) scale(1.04);transition:transform .7s ease-out;mask-image:linear-gradient(90deg,#000,transparent 24%,transparent 78%,#000)}
.hero-mist{position:absolute;inset:43% -20% -15%;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 30% 80%,#aac9c21c,transparent 55%),radial-gradient(ellipse at 80% 70%,#e9764126,transparent 40%);filter:blur(24px);animation:drifting-mist 19s ease-in-out infinite alternate}
.hero canvas{z-index:1}
.hero .kpis{position:relative;z-index:4;margin:8px auto 0;gap:0;border-top:1px solid #b7b79d40;border-bottom:1px solid #b7b79d26;background:linear-gradient(90deg,#081319c9,#08131955);backdrop-filter:blur(10px)}
.hero .kpi{border:0;border-right:1px solid #b7b79d26;border-radius:0;background:none;backdrop-filter:none;padding:20px 24px}
.hero .kpi:last-child{border-right:0}.hero .kpi b{font-size:46px;color:#f4e9d4}.hero .kpi span{color:#b4c4bc;letter-spacing:.22em}
.motion-toggle{position:relative;z-index:4;display:block;margin:13px 0 0 auto;border:1px solid #9fb6ae55;background:#071217bb;color:#c7d2c9;border-radius:4px;min-height:36px;padding:6px 12px;font-size:13px;cursor:pointer;letter-spacing:.04em}
.motion-toggle:disabled{opacity:.7;cursor:default}
.club-parade{position:relative;margin:0 calc(-1 * var(--gutter));padding:29px var(--gutter) 32px;overflow:hidden;background:linear-gradient(180deg,#081419,#0c191b);border-bottom:1px solid #c6b28a2e}
.club-parade-head{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:21px}
.club-parade-head h2{font:400 28px/1 var(--f-display);margin:0;letter-spacing:.03em}.club-parade-head h2 span{color:#ff9867}.club-parade-head a{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#c4d2c7;text-decoration:none}
.club-track{display:flex;width:max-content;animation:club-march var(--march-time,48s) linear infinite}
.club-track-group{display:flex;align-items:stretch;gap:12px;padding-right:12px}
.club-token{width:138px;min-height:125px;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;gap:10px;text-decoration:none;background:linear-gradient(145deg,#20343277,#08141755);border:1px solid #9db6a72b;border-radius:4px;padding:15px 10px;transition:border-color .2s,background .2s}
.club-token:hover{border-color:#ee835b;background:#24382d}.club-token strong{font:400 19px/1.1 var(--f-display);text-align:center;max-width:120px;overflow-wrap:anywhere}.club-token small{font-size:11px;color:#aabdb3;letter-spacing:.15em;text-transform:uppercase}
.club-parade:hover .club-track,.club-parade:focus-within .club-track{animation-play-state:paused}
.club-static{display:none}
.seccion-cab h2{color:#f1e6cf}.seccion-cab h2::before{content:"";display:inline-block;width:4px;height:.72em;background:#ed7246;margin-right:11px;transform:skew(-12deg);box-shadow:0 0 14px #ed724644}
.matchday{background:linear-gradient(90deg,rgba(109,38,25,.7),rgba(7,20,23,.84) 38%,rgba(7,20,23,.84) 62%,rgba(34,70,73,.7)),url(../img/jurassic-volcanic-jungle-hero.webp) center 60%/cover}
.titulo-vista{position:relative;isolation:isolate;padding-bottom:30px;border-bottom:1px solid #bd967b2b;margin-bottom:22px}.titulo-vista::before{content:"";position:absolute;z-index:-1;inset:0 calc(-1 * var(--gutter));background:linear-gradient(90deg,#07111680,#071116cc),url(../img/jurassic-volcanic-jungle-hero.webp) center 42%/cover;opacity:.5;mask-image:linear-gradient(#000,transparent)}
.pie{background:linear-gradient(#071116cc,#071116dd),url(../img/jurassic-volcanic-jungle-hero.webp) center 80%/cover}
@keyframes rex-awake{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}
@keyframes drifting-mist{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
@keyframes club-march{to{transform:translateX(-50%)}}
@media(min-width:1500px){.hero .rex{right:-4%;width:650px;top:-28px}.hero-in{min-height:520px}}
@media(max-width:900px){.hero{padding-top:26px;min-height:0}.hero-in{grid-template-columns:1fr;min-height:500px}.hero-copy{max-width:60%;padding:10px 0 30px}.hero .rex{top:12px;right:-12%;width:62vw;order:0}.hero-title{font-size:65px}.hero-word{width:340px}.hero .kpi{padding:17px}.hero .kpi b{font-size:38px}}
@media(max-width:600px){
 .hero{padding-top:22px;padding-bottom:18px}.hero::before{background-position:62% center;opacity:.82}.hero::after{background:linear-gradient(0deg,#071116 2%,rgba(7,17,22,.2) 65%),linear-gradient(90deg,#03101788,transparent)}
 .hero-in{min-height:490px;align-items:start}.hero-copy{max-width:none;width:100%;padding-top:0;padding-bottom:0}.hero-liga{font-size:10px;letter-spacing:.23em}.hero-word{width:65%;max-width:320px;margin-top:14px}
 .hero-title{font-size:clamp(48px,12.5vw,70px);max-width:70%;margin-top:13px;line-height:.95;position:relative;z-index:3}.hero-title em{display:block}
 .hero-lema{margin:17px 0 20px;font-size:17px;line-height:1.4;max-width:55%;min-height:91px}.hero .rex{width:65vw;right:-24%;top:77px;z-index:2;opacity:.98}.hero .rex :is(img,.creature-rig){filter:drop-shadow(-12px 16px 20px #03070999)}
 .hero-acciones{position:relative;z-index:5;gap:10px}.hero-acciones .btn{padding:12px 16px;font-size:14px;min-height:48px;justify-content:center}.hero-note{font-size:10px;letter-spacing:.1em;max-width:95%}
 .hero-foreground{opacity:.4;background-size:auto 100%;mask-image:linear-gradient(90deg,#000,transparent 12%,transparent 92%,#000)}
 .hero .kpis{margin-top:0;grid-template-columns:repeat(4,minmax(0,1fr))}.hero .kpi{padding:15px 4px;text-align:center}.hero .kpi b{font-size:30px}.hero .kpi span{font-size:9px;letter-spacing:.09em}.motion-toggle{font-size:11px;min-height:34px}
 .club-parade{padding-top:24px;padding-bottom:25px}.club-parade-head h2{font-size:24px}.club-parade-head a{font-size:11px}.club-token{width:112px;min-height:116px}.club-token strong{font-size:17px}.club-token .escudo{--t:44px!important}
 .titulo-vista h1{font-size:48px}.seccion{margin-top:34px}.seccion-cab h2{font-size:30px}.panel-in{padding:16px}
}
@media(max-width:360px){.hero-title{font-size:45px}.hero-lema{font-size:16px;max-width:57%}.hero-acciones .btn{font-size:12px;padding:12px}.hero .rex{top:90px}.hero-in{min-height:474px}}
.motion-paused *, .motion-paused *::before,.motion-paused *::after,.page-hidden *, .page-hidden *::before,.page-hidden *::after,.atmosphere-offscreen *{animation-play-state:paused!important}
.motion-paused .club-track{animation:none;transform:none;flex-wrap:wrap;width:100%}.motion-paused .club-track-group{flex-wrap:wrap;width:100%;justify-content:center;padding:0}.motion-paused .club-track-group[aria-hidden]{display:none}
@media(prefers-reduced-motion:reduce){.hero .rex,.hero::before,.hero-foreground{transform:none!important}.club-track{animation:none;transform:none;flex-wrap:wrap;width:100%}.club-track-group{flex-wrap:wrap;width:100%;justify-content:center;padding:0}.club-track-group[aria-hidden]{display:none}.hero-mist{display:none}}
/* Spatial layers: background recedes, atmosphere drifts, Rex advances, foliage frames. */
.hero{perspective:1400px;perspective-origin:50% 40%;--scroll-depth:0px}
.hero::before{transform:translate(calc(var(--pointer-x,0px) * -.45),calc(var(--pointer-y,0px) * -.45 + var(--scroll-depth))) scale(1.035)}
.hero .rex{transform:translate3d(var(--pointer-x,0px),calc(var(--pointer-y,0px) - var(--scroll-depth) * .23),35px)}
.hero-foreground{transform:translate3d(calc(var(--pointer-x,0px) * 1.3),calc(var(--pointer-y,0px) * 1.3 - var(--scroll-depth) * .52),50px) scale(1.04)}
.seccion,.titulo-vista{transform:perspective(1200px) translateY(var(--section-depth,0px)) rotateX(var(--section-tilt,0deg));transform-origin:center top;transition:transform .13s linear}
.hero-lava{position:absolute;inset:0;pointer-events:none;z-index:0;mix-blend-mode:screen;opacity:.72;background:radial-gradient(ellipse 13% 8% at 87% 27%,#ff8c3177,transparent 75%),radial-gradient(ellipse 20% 5% at 78% 73%,#ff571833,transparent 75%),radial-gradient(ellipse 12% 18% at 91% 47%,#f039192b,transparent 70%);animation:lava-flow 5s ease-in-out infinite alternate}
.hero-lava::after{content:"";position:absolute;inset:0;background:linear-gradient(158deg,transparent 65%,#ff733411 67%,transparent 71%);animation:lava-current 6s ease-in-out infinite alternate}
.hero-smoke{position:absolute;top:0;right:4%;width:34%;height:65%;z-index:1;pointer-events:none;overflow:visible}
.hero-smoke i{position:absolute;bottom:5%;left:30%;width:80%;height:42%;border-radius:47%;background:radial-gradient(ellipse,#cbb9a53d,#8b9f9e26 35%,transparent 67%);filter:blur(18px);animation:volcanic-smoke 35s ease-in-out infinite;mix-blend-mode:screen;opacity:0}
.hero-smoke i:nth-child(2){animation-delay:-4.3s;left:17%;width:90%;height:48%}.hero-smoke i:nth-child(3){animation-delay:-8.6s;left:37%}
@keyframes volcanic-smoke{0%{transform:translate3d(0,20%,0) scale(.8);opacity:0}30%{opacity:.18}70%{opacity:.12}100%{transform:translate3d(-12%,-75%,0) scale(1.3);opacity:0}}
@keyframes lava-flow{0%{opacity:.35;transform:scale(1)}45%{opacity:.85}100%{opacity:.55;transform:scale(1.035)}}
@keyframes lava-current{from{transform:translateY(-6px);opacity:.3}to{transform:translateY(15px);opacity:1}}
@media(max-width:600px){.hero-smoke{right:-3%;width:58%;height:48%}.hero-lava{background:radial-gradient(ellipse 35% 14% at 90% 18%,#ff773344,transparent 75%),radial-gradient(ellipse 45% 10% at 80% 58%,#ff571822,transparent 75%)}}
@media(prefers-reduced-motion:reduce){.seccion,.titulo-vista{transform:none}.hero-smoke{display:none}.hero-lava{animation:none;opacity:.3}}
/* Two scroll beats on large screens; mobile stays in the document flow. */
.hero-second-beat{display:none}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
 .hero-journey{position:relative;min-height:1040px;margin:0 calc(-1 * var(--gutter))}
 .hero-journey .hero{position:sticky;top:64px;margin-left:calc(50% - 50vw);padding-top:36px;min-height:670px}
 .hero-journey .hero-in{min-height:460px}
 .hero-story{opacity:clamp(0,calc(1 - var(--journey-progress,0) * 1.7),1);transform:translateY(calc(var(--journey-progress,0) * -45px));filter:blur(calc(var(--journey-progress,0) * 2px))}
 .hero-second-beat{display:block;position:absolute;left:0;top:38px;max-width:480px;pointer-events:none;opacity:clamp(0,calc((var(--journey-progress,0) - .35) * 2),1);transform:translateY(calc((1 - var(--journey-progress,0)) * 45px));font:400 clamp(60px,6vw,88px)/.93 var(--f-display);color:#f6e9cd;text-shadow:0 4px 24px #000}
 .hero-second-beat em{font-style:normal;color:#ff9867;display:block}.hero-second-beat small{font:500 19px/1.4 var(--f-texto);display:block;margin-top:20px;color:#d5ded1;max-width:330px}
 .hero-journey .rex{transform:translate3d(calc(var(--pointer-x,0px) + var(--journey-progress,0) * 26px),calc(var(--pointer-y,0px) - var(--journey-progress,0) * 25px),calc(35px + var(--journey-progress,0) * 85px)) rotateY(calc(var(--journey-progress,0) * -9deg))}
 .hero-journey .hero::before{transform:translateY(calc(var(--scroll-depth,0px) * .4)) scale(calc(1.035 + var(--journey-progress,0) * .07))}
 .motion-paused .hero-journey{min-height:0}.motion-paused .hero-journey .hero{position:relative;top:auto}.motion-paused .hero-story{opacity:1;transform:none;filter:none}.motion-paused .hero-second-beat{display:none}
}
.territories{margin-top:42px;margin-bottom:54px}.territories .seccion-cab{margin-bottom:36px}.territories .kicker{font-size:10px;letter-spacing:.28em;margin-bottom:12px}.territory-hint{font-size:14px;color:#aabcb2}
.territory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;perspective:1200px}
.territory{position:relative;isolation:isolate;display:block;min-height:420px;text-decoration:none;transform-style:preserve-3d;border:1px solid #91b1a440;border-radius:9px;background:linear-gradient(155deg,#253b32,#071319 65%);transition:transform .5s,border-color .5s,box-shadow .5s;box-shadow:0 18px 24px #0004}
.territory-index{position:absolute;z-index:5;top:19px;left:22px;font-size:10px;letter-spacing:.22em;color:#b3c7b4;font-weight:700}
.territory-land{position:absolute;inset:0;border-radius:8px;overflow:hidden;z-index:-1;background:linear-gradient(0deg,#061217 5%,#07151b88 70%),url(../img/jurassic-volcanic-jungle-hero.webp) 30% 60%/auto 100%;opacity:.8}
.territory-land::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 28%,#c5b77b33,transparent 60%)}
.territory :is(img,.creature-rig){position:absolute;z-index:2;width:116%;max-width:none;height:245px;object-fit:contain;left:-8%;top:29px;pointer-events:none;filter:drop-shadow(2px 22px 12px #0008);transform:translateZ(35px);transition:transform .7s ease;animation:creature-breathe 8s ease-in-out infinite}
.territory-copy{position:relative;z-index:3;padding:226px 25px 24px;transform:translateZ(25px)}
.territory-copy h3{font:400 48px/.93 var(--f-display);color:#eee5cf;margin:0 0 12px;text-shadow:0 4px 14px #081319}
.territory-copy p{font-size:15px;color:#c1cec1;margin:0 0 20px}.territory-copy>span{display:flex;justify-content:space-between;align-items:center;color:#ffac77;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;border-top:1px solid #b6aa8c3a;padding-top:14px}.territory-copy b{font-size:24px;font-weight:400}
.territory-raptor{background:linear-gradient(155deg,#25444a,#071319 65%)}.territory-raptor :is(img,.creature-rig){animation-delay:-2s;top:36px}.territory-raptor .territory-land{background-position:50% 60%}.territory-pterosaur .territory-land{background-position:90% 60%}.territory-pterosaur :is(img,.creature-rig){top:7px;width:122%;left:-11%;animation:creature-glide 9s ease-in-out infinite}
@media(hover:hover){.territory:hover{transform:translateY(-9px) rotateX(3deg);border-color:#ef9b6277;box-shadow:0 25px 45px #0007}.territory:hover :is(img,.creature-rig){transform:translateZ(55px) scale(1.06)}}
@keyframes creature-breathe{0%,100%{translate:0 0;rotate:-.3deg}50%{translate:0 -5px;rotate:.4deg}}
@keyframes creature-glide{0%,100%{translate:0 0;rotate:-2deg}50%{translate:6px -12px;rotate:1deg}}
@media(max-width:900px){.territory-grid{gap:14px}.territory-copy{padding-left:18px;padding-right:18px}.territory-copy h3{font-size:42px}.territory :is(img,.creature-rig){height:220px}.territory-copy{padding-top:213px}.territory{min-height:398px}}
@media(max-width:600px){.territory-grid{grid-template-columns:1fr;gap:25px}.territories .seccion-cab{margin-bottom:26px}.territory-hint{display:none}.territory{min-height:260px}.territory :is(img,.creature-rig){width:66%;left:39%;top:23px;height:195px}.territory-copy{padding:63px 20px 20px;width:100%}.territory-copy h3{font-size:43px;position:relative;z-index:4}.territory-copy p{max-width:47%;font-size:14px;min-height:42px}.territory-copy>span{margin-top:15px;font-size:12px}.territory-pterosaur :is(img,.creature-rig){left:36%;top:13px;width:72%}.territory-index{left:20px}.territories{margin-bottom:36px}}
@media(prefers-reduced-motion:reduce){.territory,.territory:hover,.territory :is(img,.creature-rig),.territory:hover :is(img,.creature-rig){transform:none;animation:none}}
/* Each creature has a different weight and motion signature. */
.territory-triceratops :is(img,.creature-rig){animation:triceratops-weight 8s ease-in-out infinite;transform-origin:65% 85%}
.territory-raptor :is(img,.creature-rig){animation:raptor-stalk 7s ease-in-out infinite;transform-origin:68% 75%}
.territory-pterosaur :is(img,.creature-rig){animation:pterosaur-flight 9s ease-in-out infinite;transform-origin:50% 50%}
@keyframes triceratops-weight{0%,100%{translate:-3px 1px;rotate:-.6deg;scale:1}35%{translate:5px -3px;rotate:.7deg;scale:1.025}60%{translate:7px 2px;rotate:.2deg;scale:1.02}}
@keyframes raptor-stalk{0%,100%{translate:-9px 2px;rotate:-1.2deg;scale:.99}45%{translate:9px -5px;rotate:1deg;scale:1.035}65%{translate:7px -2px;rotate:.2deg;scale:1.03}}
@keyframes pterosaur-flight{0%,100%{translate:-10px 5px;rotate:-3deg;scale:.98}48%{translate:10px -17px;rotate:2deg;scale:1.045}}
@media(max-width:600px){.territory-triceratops :is(img,.creature-rig){animation-duration:10s}.territory-raptor :is(img,.creature-rig){animation-duration:9s}.territory-pterosaur :is(img,.creature-rig){animation-duration:10s}}
@media(prefers-reduced-motion:reduce){.territory :is(img,.creature-rig){animation:none!important;translate:none;rotate:none;scale:none}}
/* Continuous landscape camera and independent foreground vegetation planes. */
.hero::before{animation:world-camera 24s ease-in-out infinite alternate;transform-origin:76% 38%}
.hero-foreground{animation:canopy-sway 13s ease-in-out infinite alternate;transform-origin:50% 0}
.hero-smoke i{background:radial-gradient(ellipse at 43% 48%,#81908c60 0%,#5c686052 22%,#6c574341 40%,transparent 69%);filter:blur(12px);mix-blend-mode:screen}
.hero-smoke::before{content:"";position:absolute;inset:-20% -20% 5% 0;background:radial-gradient(ellipse at 65% 60%,#0a12142b,transparent 60%);filter:blur(20px);animation:smoke-shadow 30s ease-in-out infinite alternate}
@keyframes world-camera{from{scale:1;translate:0 0}to{scale:1.045;translate:-.5% .35%}}
@keyframes canopy-sway{from{rotate:-.3deg;translate:-.25% 0}to{rotate:.3deg;translate:.25% -.3%}}
@keyframes smoke-shadow{from{translate:8% 6%;scale:.8}to{translate:-8% -16%;scale:1.15}}
/* El canvas WebGL dibuja el paisaje completo. No duplicar la cámara ni el humo al activarlo. */
.hero.living-ready::before{animation:none}
.hero.living-ready .hero-smoke{display:none}
@media(max-width:600px){.hero::before{animation-duration:30s}.hero-foreground{animation-duration:17s}}
@media(prefers-reduced-motion:reduce){.hero::before,.hero-foreground,.hero-smoke::before{animation:none!important;scale:none;translate:none;rotate:none}}
/* Keep the complete desktop navigation visible, including VIP. */
@media(min-width:981px){.cabecera-in{gap:13px}.nav{gap:0;mask-image:none}.nav a{font-size:13px;padding:9px 7px;letter-spacing:.065em}}
@media(min-width:1450px){.nav a{font-size:14px;padding-inline:8px}}
html{overflow-x:clip}
.hero-second-beat .hero-title{margin:0;font-size:inherit;max-width:none}
/* Clip horizontal artwork without creating a scroll container that breaks sticky. */
html{overflow-x:visible}body{overflow-x:clip}

/* Skeletal sprite articulation: independent hinge motions, never whole-image warping. */
.creature-rig{display:block;overflow:visible}.rig-part{transform-box:view-box}
.rig-jaw{animation:rex-bite 5.8s cubic-bezier(.4,0,.4,1) infinite}
.rig-wing-left{animation:wingbeat-left 2.8s ease-in-out infinite}
.rig-wing-right{animation:wingbeat-right 2.8s ease-in-out infinite}
.rig-raptor .rig-leg-front{animation:raptor-step 3.8s ease-in-out infinite}.rig-raptor .rig-leg-back{animation:raptor-step 3.8s ease-in-out infinite;animation-delay:-1.9s}
.rig-triceratops .rig-leg-front{animation:heavy-step 5s ease-in-out infinite}.rig-triceratops .rig-leg-back{animation:heavy-step 5s ease-in-out infinite;animation-delay:-2.5s}
@keyframes rex-bite{0%,20%,100%{transform:rotate(0)}35%{transform:rotate(-8deg)}42%{transform:rotate(-6deg)}58%,76%{transform:rotate(0)}}
@keyframes wingbeat-left{0%,100%{transform:rotate(-2deg) skewY(0deg)}50%{transform:rotate(8deg) skewY(4deg)}}
@keyframes wingbeat-right{0%,100%{transform:rotate(2deg) skewY(0deg)}50%{transform:rotate(-8deg) skewY(-4deg)}}
@keyframes raptor-step{0%,100%{transform:rotate(-2deg)}45%{transform:rotate(3deg)}65%{transform:rotate(1deg)}}
@keyframes heavy-step{0%,100%{transform:rotate(-1deg)}48%{transform:rotate(2deg)}65%{transform:rotate(.5deg)}}
@media(prefers-reduced-motion:reduce){.rig-part{animation:none!important;transform:none!important}}
.wind-debris{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;perspective:600px}.wind-debris i{position:absolute;left:-5%;top:var(--leaf-y);width:calc(var(--leaf-size) * 1.7);height:var(--leaf-size);border-radius:0 85% 0 85%;background:linear-gradient(35deg,#0c1915,#9c6b38);box-shadow:0 1px 2px #ff9c3633;animation:wind-leaf var(--leaf-time) linear infinite;animation-delay:var(--leaf-delay);opacity:0}.wind-debris i:nth-child(3n){background:linear-gradient(35deg,#132d23,#5c8061);filter:blur(.6px)}
@keyframes wind-leaf{0%{translate:0 0;rotate:-50deg;transform:rotateY(0);opacity:0}7%{opacity:.8}40%{translate:42vw -35px;rotate:170deg;transform:rotateY(170deg)}70%{translate:77vw 20px;rotate:320deg;transform:rotateY(300deg);opacity:.65}100%{translate:115vw -60px;rotate:500deg;transform:rotateY(520deg);opacity:0}}
.hero-lava::before{content:"";position:absolute;inset:0;background:url(../img/jurassic-volcanic-jungle-hero.webp) center/cover;mask-image:radial-gradient(ellipse 25% 45% at 90% 38%,#000,transparent 75%);filter:saturate(2) brightness(1.8);animation:molten-light 7s ease-in-out infinite}
@keyframes molten-light{0%,100%{opacity:.15;translate:0 0}40%{opacity:.55;translate:0 2px}65%{opacity:.3;translate:1px 4px}}
@media(prefers-reduced-motion:reduce){.wind-debris{display:none}.hero-lava::before{animation:none;opacity:.2}}
.hero .rex .creature-rig{width:100%;height:100%;aspect-ratio:1}
.territory .creature-rig{width:108%;height:auto;aspect-ratio:3/2;left:-4%}.territory-pterosaur .creature-rig{width:116%;left:-8%}
.rig-jaw{animation:rex-bite-clear 6s cubic-bezier(.4,0,.4,1) infinite;filter:drop-shadow(0 -1px 1px #0008)}
@keyframes rex-bite-clear{0%,29%,100%{transform:rotate(0)}37%{transform:rotate(-15deg)}42%{transform:rotate(-12deg)}46%{transform:rotate(-14deg)}65%,84%{transform:rotate(0)}}
@media(max-width:600px){.territory .creature-rig{width:73%;left:32%;top:36px}.territory-pterosaur .creature-rig{width:78%;left:28%;top:24px}.territory-grid{overflow:clip;padding-top:14px;margin-top:-14px;padding-bottom:14px;margin-bottom:-14px}}
@media(prefers-reduced-motion:reduce){.rig-jaw{animation:none!important}}

/* A genuine skeletal WebGL encounter. The official hero artwork remains untouched. */
.rex-encounter{position:relative;isolation:isolate;min-height:640px;margin:64px 0 80px;border:1px solid #e18a3a42;border-radius:26px;overflow:hidden;background:radial-gradient(ellipse at 75% 80%,#a4482438,transparent 56%),linear-gradient(110deg,#061013e8,#07101696),url('../img/jurassic-volcanic-jungle-hero.webp') center/cover;box-shadow:0 25px 100px #0009,inset 0 0 110px #0008;perspective:1100px}
.rex-encounter:after{content:'';position:absolute;left:35%;right:5%;bottom:8%;height:12%;border-radius:50%;background:#0008;filter:blur(24px);z-index:-1}
.encounter-copy{position:relative;z-index:2;width:42%;padding:100px 0 70px 52px;pointer-events:none}
.encounter-copy h2{font-size:clamp(40px,5vw,70px);line-height:.96;text-transform:uppercase;letter-spacing:-.05em;margin:20px 0;color:#fff6e8}
.encounter-copy h2 em{color:#f6b14b;font-style:normal}.encounter-copy p{color:#c9d4ca;margin:24px 0}.encounter-copy a{pointer-events:auto;display:inline-flex}
.encounter-stage{position:absolute;inset:0 0 0 27%;transform:translateY(25px) scale(.96);transition:transform 1.6s cubic-bezier(.2,.7,.2,1);min-width:0}
.encounter-entered .encounter-stage{transform:translateY(0) scale(1)}
.dinosaur-webgl{position:absolute;inset:0;z-index:1}.dinosaur-webgl canvas{display:block;width:100%;height:100%}
.encounter-poster{width:100%;height:100%;object-fit:contain;opacity:.7}.has-real-3d .encounter-poster{visibility:hidden}
.encounter-credit{position:absolute;right:22px;bottom:18px;z-index:3;color:#d7d2c3;font-size:11px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){.rex-encounter{min-height:660px;margin:36px 0 48px;border-radius:18px}.encounter-copy{width:100%;padding:32px 26px 0}.encounter-copy h2{font-size:43px;margin:15px 0}.encounter-copy p{margin:16px 0}.encounter-stage{inset:255px -22% 12px -22%;}.encounter-credit{font-size:10px;right:16px;bottom:14px}}
@media(prefers-reduced-motion:reduce){.encounter-stage{transition:none;transform:none}}
.motion-paused .encounter-stage{transition:none;transform:none}
.encounter-actions{display:flex;gap:8px;margin:0 0 22px;pointer-events:auto;flex-wrap:wrap}.encounter-actions button{border:1px solid #d8a55966;background:#081718cb;color:#f8dcaa;padding:10px 14px;border-radius:7px;cursor:pointer;font:600 12px sans-serif}.encounter-actions button:hover,.encounter-actions button:focus-visible{background:#73351b;outline:2px solid #e8b35e;outline-offset:2px}.rex-encounter .encounter-stage{inset:0 0 0 27%}
@media(max-width:700px){.rex-encounter{min-height:720px}.rex-encounter .encounter-stage{inset:320px -22% 12px -22%}}

/* Real skeletal raptor lives in its territory card. The illustration is its loading fallback. */
.territory-3d-stage{position:absolute;z-index:2;left:-6%;top:28px;width:112%;height:238px;pointer-events:none}
.territory-3d-stage::before{content:"";position:absolute;left:28%;right:22%;bottom:25px;height:17px;border-radius:50%;background:#000b;filter:blur(7px)}
.territory-raptor.raptor-3d-ready>img{visibility:hidden}
@media(max-width:900px) and (min-width:601px){.territory-3d-stage{height:220px;top:28px}}
@media(max-width:600px){.territory-raptor.raptor-3d-mounted{min-height:425px}.territory-raptor.raptor-3d-mounted .territory-copy{padding-top:240px}.territory-raptor.raptor-3d-mounted .territory-copy p{max-width:none;min-height:0}.territory-3d-stage{top:28px;left:-4%;width:108%;height:230px}.territory-raptor.raptor-3d-mounted .territory-copy h3 br{display:none}}

.territory.creature-3d-ready>:is(img,.creature-rig){visibility:hidden;opacity:0}
.territory-triceratops .dinosaur-webgl,.territory-pterosaur .dinosaur-webgl{filter:contrast(1.12) saturate(1.1) drop-shadow(2px 14px 10px #0009)}
.territory-pterosaur .territory-3d-stage::before{opacity:.2;filter:blur(12px)}
@media(min-width:901px){.territory-triceratops .territory-3d-stage,.territory-pterosaur .territory-3d-stage{top:0;height:260px}}
@media(max-width:600px){.territories .territory.creature-3d-mounted{min-height:289px}.territories .territory.creature-3d-mounted .territory-copy{padding:63px 20px 20px}.territories .territory.creature-3d-mounted .territory-copy p{max-width:47%;min-height:42px}.territories .territory.creature-3d-mounted .territory-copy h3 br{display:inline}.territories .territory.creature-3d-mounted .territory-3d-stage{width:67%;left:34%;top:20px;height:205px}.territories .territory.creature-3d-mounted .territory-3d-stage::before{bottom:18px}}

/* Keep the raptor's complete animated silhouette inside the card's right edge. */
@media(min-width:601px){.territories .territory-raptor .territory-3d-stage{left:0;width:100%}}
@media(max-width:600px){.territories .territory-raptor .territory-3d-stage{left:32%;width:64%}}