:root{--sky:#8EEEFF;--sky-deep:#7FD3EE;--grass:#96D64B;--grass-deep:#7CC63A;--orange:#F5943B;--orange-deep:#E27C24;--ink:#5A3320;--ink-soft:#8A6449;--cream:#FFFCF0;--paper:#8EEEFF;--card:#FFFFFF;--joy:#F5C542;--sad:#5FBBD1;--frus:#F0725F;--fear:#B08CE0;--imp:#F5943B;--comp:#8CCF4E;--accent:var(--joy);--wash:color-mix(in srgb, var(--accent) 7%, var(--paper));--tint:color-mix(in srgb, var(--accent) 26%, #fff);--r-lg:38px;--r-md:26px;--r-sm:16px;--clay:0 8px 0 rgba(90,51,32,.10);--clay-lg:0 14px 0 rgba(90,51,32,.10);--maxw:1140px}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-size:17px;line-height:1.65;transition:background-color .7s ease;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.14;letter-spacing:0;margin:0}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:10px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{font-family:var(--font-display);font-weight:600;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-deep);margin:0 0 .7rem}

.topbar{position:sticky;top:0;z-index:60;padding:12px 0;background:linear-gradient(var(--wash) 60%,transparent);transition:background-color .7s ease}
.brand{flex:0 0 auto;border:0;background:transparent;padding:0}
.brand img{height:46px;width:auto;filter:drop-shadow(0 3px 0 rgba(90,51,32,.12))}
.nav{margin-left:auto;display:flex}
.nav a,.nav button{border:0;background:transparent;border-radius:999px;font-family:var(--font-display);transition:background-color .25s,color .25s;white-space:nowrap}

.langs{display:flex;gap:2px;background:var(--card);padding:5px;border-radius:999px;box-shadow:var(--clay);flex:0 0 auto}
.langs button{border:0;background:transparent;border-radius:999px;font-family:var(--font-display);font-weight:600;letter-spacing:.04em;transition:background-color .25s,color .25s}
.langs button:hover{color:var(--ink)}

.view[hidden]{display:none}
.view{animation:rise .45s cubic-bezier(.2,.8,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
section{padding:56px 0}
.sec-head h2{margin-bottom:.35em}
.sec-head p{color:var(--ink-soft)}

.btn{border:0;text-decoration:none;display:inline-flex;align-items:center;gap:9px;padding:15px 26px;border-radius:999px;font-family:var(--font-display);font-weight:600;background:var(--card);color:var(--ink);box-shadow:0 5px 0 rgba(90,51,32,.18);transition:transform .15s,box-shadow .15s,background-color .4s}
.btn.accent{background:var(--orange);color:#fff;text-shadow:0 1px 0 rgba(90,51,32,.2)}
.btn.accent:hover{box-shadow:0 3px 0 var(--orange-deep)}

.wheel-stage{position:relative;display:grid;place-items:center;min-height:430px;margin-top:2px}
.wheel{position:relative;width:min(620px,94vw);aspect-ratio:1.45;--mood-size:74px;--rx:44%;--ry:86%}
.mood .lbl{position:absolute;left:50%;bottom:-19px;transform:translateX(-50%);opacity:0;transition:opacity .2s;pointer-events:none;font-family:var(--font-display);font-weight:600;font-size:.72rem;color:var(--ink);background:rgba(255,255,255,.85);padding:1px 8px;border-radius:999px;white-space:nowrap}
.mood:hover .lbl,.mood:focus-visible .lbl,.mood[aria-pressed="true"] .lbl{opacity:1}
.mood[aria-pressed="true"] .lbl{background:var(--ink);color:#fff}
#ugaBody{position:absolute;left:0;right:0;bottom:0;height:77%;display:grid;place-items:end center;pointer-events:none}
.uga-hero{height:100%;width:auto;filter:drop-shadow(0 14px 12px rgba(90,51,32,.22));pointer-events:none}

.band{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--clay-lg);margin:8px 0 0}
.band img{width:100%;display:block}
.band-cta{position:absolute;left:0;right:0;bottom:0;padding:56px 26px 22px;text-align:center;background:linear-gradient(transparent,rgba(90,51,32,.55))}
.band-cta p{color:#fff;font-family:var(--font-display);font-weight:600;font-size:1.1rem;margin:0 0 12px;text-shadow:0 2px 6px rgba(90,51,32,.5)}

.card{background:var(--card);border-radius:var(--r-lg);padding:32px;box-shadow:var(--clay)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.grid-6{display:grid;grid-template-columns:repeat(6,1fr)}

.emo-card{border-radius:var(--r-md);text-align:center}
.emo-card svg{margin:0 auto 8px}
.emo-card h3{margin-bottom:.25em}
.emo-card p{font-size:.9rem;color:var(--ink-soft);margin:0;line-height:1.5}

.media-card{background:var(--card);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--clay);display:flex;flex-direction:column}
.media-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.media-card .body{padding:28px 30px 32px}

.steps{counter-reset:s;display:grid;gap:14px}
.step{display:flex;gap:18px;align-items:flex-start;background:var(--card);padding:22px 24px}
.step::before{counter-increment:s;content:counter(s);flex:0 0 auto;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;transition:background-color .5s}
.step h3{margin-bottom:.2em}
.step p{margin:0;color:var(--ink-soft);font-size:.97rem}

.qbox{background:var(--ink);color:var(--cream);padding:38px}
.qbox h3{font-size:1.5rem;margin-bottom:.7em}
.qlist{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.qlist li{background:rgba(255,255,255,.10);border-radius:var(--r-sm);padding:14px 18px;font-family:var(--font-display);font-weight:600;font-size:1.05rem}

.chars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.char{background:var(--card);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--clay)}
.char-art{overflow:hidden;background:var(--sky)}
.char-art img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.char:hover .char-art img{transform:scale(1.05)}
.char-role{font-family:var(--font-display);font-weight:600;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-deep)}
.char-body p{color:var(--ink-soft);font-size:.97rem;margin:0}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tag{background:color-mix(in srgb, var(--grass) 16%, #fff);border-radius:999px;padding:5px 13px;font-size:.82rem;font-weight:700;color:var(--ink-soft);transition:background-color .5s}
.char.wide{grid-column:1/-1}
.char.wide .char-art{aspect-ratio:auto;max-height:210px}
.char.wide .char-art img{object-position:center 38%}

.player{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--clay-lg);background:#000;aspect-ratio:16/9}
.player iframe{width:100%;height:100%;border:0;display:block}
.poster{position:relative;width:100%;height:100%;border:0;padding:0;background:var(--sky);display:block;cursor:pointer;overflow:hidden}
.poster img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.poster:hover img{transform:scale(1.03)}
.play{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px;border-radius:50%;transition:transform .2s}
.play::after{content:"";position:absolute;left:36px;top:27px;border-style:solid;border-width:19px 0 19px 30px;border-color:transparent transparent transparent #fff}
.poster:hover .play{transform:scale(1.08)}
.poster-label{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-family:var(--font-display);font-weight:600;color:#fff;font-size:1.05rem;background:rgba(90,51,32,.55);padding:7px 20px;border-radius:999px;white-space:nowrap}
.ep-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ep-pick{border:0;border-radius:999px;padding:10px 18px;font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--ink-soft);box-shadow:var(--clay)}
.ep-pick[aria-current="true"]{color:#fff}
.ep-note{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:22px}

.game{background:var(--card);border-radius:var(--r-lg);padding:32px;box-shadow:var(--clay);margin-bottom:24px}
.game-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.game-head .age{font-family:var(--font-display);font-weight:600;border-radius:999px;transition:background-color .5s}
.game>p.intro{color:var(--ink-soft);margin-bottom:22px}

.situation{background:var(--wash);border-radius:var(--r-md);padding:28px;text-align:center;font-family:var(--font-display);font-weight:600;font-size:1.3rem;line-height:1.35;transition:background-color .5s}
.situation .scene{font-size:2.6rem;display:block;margin-bottom:8px;line-height:1}
.answers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.answer{border:0;background:var(--wash);border-radius:var(--r-md);padding:14px 8px;display:grid;justify-items:center;gap:6px;font-family:var(--font-display);font-weight:600;font-size:.92rem;transition:transform .18s,background-color .25s}
.answer svg{width:58px;height:58px}
.answer:hover{transform:translateY(-3px)}
.answer.right{background:color-mix(in srgb,var(--comp) 30%,#fff)}
.answer.other{background:color-mix(in srgb,var(--sad) 22%,#fff)}
.feedback{margin-top:16px;min-height:3em;color:var(--ink-soft)}
.feedback b{font-family:var(--font-display);color:var(--ink)}

.memory{display:grid}
.mcard{aspect-ratio:1;perspective:700px;border:0;background:transparent;padding:0}
.mcard-in{display:block;position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.mcard[data-state="up"] .mcard-in,.mcard[data-state="done"] .mcard-in{transform:rotateY(180deg)}
.mface{display:block;position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;overflow:hidden}
.mback{display:grid;place-items:center}
.mback img{width:74%;opacity:.9}
.mfront{transform:rotateY(180deg);transition:background-color .5s}
.mfront svg{width:84%}
.memory-status{margin-top:14px;font-weight:700;color:var(--ink-soft)}

.breathe{display:grid;place-items:center;gap:16px;padding:10px 0 4px}
.bubble{width:150px;height:150px;display:grid;place-items:center}
.bubble svg{width:100%;height:100%;filter:drop-shadow(0 8px 0 rgba(90,51,32,.14))}
.bubble.on{animation:breathe 10s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.7)}40%{transform:scale(1.2)}60%{transform:scale(1.2)}}
.breathe-label{font-family:var(--font-display);font-weight:600;font-size:1.15rem;min-height:1.4em}

.sheets{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sheet{background:var(--wash);border-radius:var(--r-md);padding:16px;text-align:center;transition:background-color .5s}
.sheet .paperbox{background:#fff;border-radius:var(--r-sm);padding:10px;margin-bottom:12px}
.sheet svg{width:100%;height:auto}
.sheet h4{margin:0 0 8px;font-size:1.05rem}

.grass{height:96px;margin-top:0;background:linear-gradient(180deg,#8FD44B,#7CC63A);position:relative}
footer{background:var(--ink);color:#FFFDF7;padding:50px 0 34px;margin-top:0}
footer a{color:#FFFDF7}
.foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.foot-grid img{height:56px;width:auto;margin-bottom:10px}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;font-family:var(--font-display);font-weight:600}
footer .foot-grid p{color:#FFFDF7;opacity:.96 !important}
footer .foot-links a{opacity:1;text-shadow:0 1px 0 rgba(45,22,10,.22)}
footer .legal{color:#FFFDF7;opacity:.86;font-size:.86rem;margin:26px 0 0}

@media (max-width:1080px){
  .nav a,.nav button{padding:9px 12px;font-size:.88rem}
}
@media (max-width:960px){
  .hero-grid,.grid-2{grid-template-columns:1fr}
  .chars{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-6{grid-template-columns:repeat(3,1fr)}
  .sheets{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nav{position:fixed;left:14px;right:14px;bottom:14px;margin:0;justify-content:space-between;padding:6px;box-shadow:0 8px 30px rgba(90,51,32,.25)}
  .nav a,.nav button{padding:10px 8px;font-size:.8rem}
  body{padding-bottom:78px}
  .grid-3,.chars{grid-template-columns:1fr}
  .answers{grid-template-columns:1fr 1fr}
  .wheel{--mood-size:52px;--rx:38%;--ry:82%}
  .wheel-stage{min-height:300px}
  .card,.game,.qbox{padding:24px}
  .topbar .wrap{justify-content:space-between}
  .brand img{height:40px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

section{padding:62px 0}
.sec-head{max-width:56ch;margin:0 auto 38px;text-align:center}
.sec-head h2{font-size:clamp(2rem,4.4vw,3rem)}
.sec-head h2::after{content:"";display:block;border-radius:99px;margin:16px auto 0}

.card,.media-card,.char,.game,.qbox{border-radius:36px}
.card h3{font-size:1.34rem}

.band-grass .eyebrow{color:var(--ink)}

.grid-6{gap:18px}
.emo-card{background:transparent;box-shadow:none;padding:4px}
.emo-card svg{filter:drop-shadow(0 8px 0 rgba(90,51,32,.15))}
.emo-card h3{font-size:1.2rem;margin-top:6px}

.char-body{position:relative;padding:0 26px 30px;text-align:center}
.char-body h3{position:relative;top:-24px;display:inline-block;background:var(--orange);color:#fff;padding:9px 22px;border-radius:999px;box-shadow:0 5px 0 var(--orange-deep)}
.char-role{margin:-14px 0 12px}
.char-body p{text-align:left}
.tags{justify-content:center}

.game-a{background:color-mix(in srgb,var(--joy) 18%,#fff)}
.game-b{background:color-mix(in srgb,var(--sad) 15%,#fff)}
.game-c{background:color-mix(in srgb,var(--comp) 15%,#fff)}
.game-d{background:color-mix(in srgb,var(--imp) 14%,#fff)}
.game .situation,.game .answer,.game .sheet,.game .mfront{background:rgba(255,255,255,.78)}
.game .age{background:rgba(255,255,255,.7)}
.step::before{width:52px;height:52px;font-size:1.3rem}
.step h3{font-size:1.18rem}

@media (max-width:720px){
  .sec-head h2{font-size:clamp(1.7rem,7vw,2.2rem)}
}

.view section{position:relative;max-width:1180px;margin:0 auto 30px;padding:52px 0 56px;background:var(--panel,#fff);border:5px solid var(--ink);border-radius:52px;box-shadow:0 12px 0 rgba(90,51,32,.22)}

.card,.media-card,.char,.game,.step,.qbox,.player,.band,.hero,.sheet .paperbox{border:4px solid var(--ink)}
.hero,.player,.band{border-width:5px}
.btn,.nav,.langs,.ep-pick{border:3px solid var(--ink)}
.tag,.game-head .age{border:2px solid rgba(90,51,32,.35)}
.emo-card{border:0}
.mood[aria-pressed="true"] .lbl{border:2px solid var(--ink)}

.sec-head h2,.hero h1{color:var(--orange);text-shadow:
    3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink),
    0 8px 0 rgba(90,51,32,.3)}
.sec-head h2::after{border:3px solid var(--ink)}
.game-head h3,.card h3,.step h3{color:var(--ink)}

@media (max-width:760px){
  .view section{margin-bottom:22px}
  .sec-head h2,.hero h1{text-shadow:
    2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink),
    0 5px 0 rgba(90,51,32,.3)}
}

html{background:var(--wash)}
html::before{content:"";position:fixed;inset:0;z-index:-3;background:#A7E2F7}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:rgba(255,255,255,.18)}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:var(--accent);opacity:.11;transition:background-color .7s ease}
.topbar{background:none}

.view section,.card,.media-card,.char,.game,.step,.qbox,.player,.band,
.sheet .paperbox,.btn,.nav,.langs,.ep-pick,.tag,.game-head .age,
.mood[aria-pressed="true"] .lbl,.poster{border:0}

.view section{border-radius:64px;margin:0 auto 34px;padding:56px 0 60px;box-shadow:0 18px 44px rgba(90,51,32,.16)}
.view section:nth-of-type(5n+1){--panel:rgba(255,243,212,.93)}
.view section:nth-of-type(5n+2){--panel:rgba(223,244,214,.93)}
.view section:nth-of-type(5n+3){--panel:rgba(219,241,252,.93)}
.view section:nth-of-type(5n+4){--panel:rgba(255,228,216,.93)}
.view section:nth-of-type(5n+5){--panel:rgba(240,229,252,.93)}

.card,.media-card,.char,.game{border-radius:40px;box-shadow:0 12px 30px rgba(90,51,32,.13)}
.grid-3>.card:nth-child(odd),.grid-3>.card:nth-child(even),.card{transform:none}
.card{transition:transform .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 38px rgba(90,51,32,.17)}
.step{border-radius:34px;box-shadow:0 8px 22px rgba(90,51,32,.1)}
.qbox{border-radius:44px}
.player,.band{border-radius:44px}
.btn{box-shadow:0 7px 18px rgba(90,51,32,.18)}
.btn:hover{transform:translateY(2px);box-shadow:0 4px 12px rgba(90,51,32,.18)}
.btn.accent{box-shadow:0 7px 18px rgba(226,124,36,.42)}
.nav,.langs{box-shadow:0 8px 24px rgba(90,51,32,.14)}

.sec-head h2,.hero h1{color:var(--ink);text-shadow:none}
.sec-head h2::after{height:10px;width:96px;background:var(--orange);opacity:.9}
.sec-head .eyebrow{color:var(--orange-deep)}

@media (max-width:760px){
  .view section{border-radius:40px}
  html::before{background-position:center 20%}
}

.sec-plate{position:relative;top:-92px;margin-bottom:-68px;display:inline-block;background:linear-gradient(180deg,#F9A24E,var(--orange));padding:16px 42px 20px;border-radius:46px;box-shadow:0 14px 30px rgba(226,124,36,.45)}
.sec-plate .eyebrow{margin-bottom:.35rem}
.sec-plate h2::after{display:none}

.view section:nth-of-type(odd){transform:rotate(-.5deg)}
.view section:nth-of-type(even){transform:rotate(.5deg)}
.grid-2>.card,.media-card{transform:rotate(.8deg)}
.grid-2>.media-card{transform:rotate(-.8deg)}
.chars>.char:nth-child(odd){transform:rotate(-1deg)}
.chars>.char:nth-child(even){transform:rotate(1deg)}
.chars>.char.wide{transform:rotate(-.4deg)}
.game:nth-of-type(odd){transform:rotate(-.6deg)}
.game:nth-of-type(even){transform:rotate(.6deg)}
.steps>.step:nth-child(odd){transform:rotate(-.7deg)}
.steps>.step:nth-child(even){transform:rotate(.7deg)}
.card,.char,.media-card,.game,.step{transition:transform .3s ease,box-shadow .3s ease}

@media (max-width:760px){
  .sec-plate{top:-70px;margin-bottom:-52px;padding:12px 26px 16px;border-radius:34px}
  .view section{padding-top:48px}
  .view section:nth-of-type(odd),.view section:nth-of-type(even){transform:none}
}

html::before,body::before,body::after{display:none}

#view-inicio>.wrap:first-child{max-width:none;padding:0}
.hero-inner>.wrap,.hero-top,.wheel-stage{position:relative;z-index:2}

.view section{max-width:none;margin:0;padding:104px 0 108px;border-radius:0;box-shadow:none;transform:none;background:var(--band);position:relative}
.view section:first-of-type{margin-top:0}
.view section:nth-of-type(5n+1){--band:#FFE58A}
.view section:nth-of-type(5n+2){--band:#B6E77A}
.view section:nth-of-type(5n+3){--band:#A9EEFB}
.view section:nth-of-type(5n+4){--band:#FFC3AC}
.view section:nth-of-type(5n+5){--band:#D9C8F7}

.view section::before{content:"";position:absolute;top:-34px;left:0;right:0;height:36px;background:radial-gradient(circle at 36px 36px, var(--band) 35px, transparent 36px) repeat-x;background-size:72px 72px;pointer-events:none}

.sec-plate{position:static;margin:0 auto 24px;padding:14px 38px 18px}

.card,.media-card,.char,.game,.step{background:#fff;box-shadow:0 10px 26px rgba(90,51,32,.16)}
.grid-3>.card:nth-child(odd){transform:rotate(-1deg)}
.grid-3>.card:nth-child(even){transform:rotate(1deg)}
.game{background:#fff}
.game-a,.game-b,.game-c,.game-d{background:#fff}
.game .situation{background:color-mix(in srgb,var(--accent) 16%,#fff)}
.game .answer,.game .sheet{background:#FFF8EC}
.tag,.game-head .age{background:rgba(90,51,32,.08)}

.chars{gap:28px}
.char-art{aspect-ratio:1}
.char-body h3{font-size:1.5rem}

.emo-card svg{width:118px;height:118px}

@media (max-width:760px){
  .view section{padding:74px 0 80px}
  .view section::before{top:-24px;height:26px;background:radial-gradient(circle at 26px 26px, var(--band) 25px, transparent 26px) repeat-x;background-size:52px 52px}
}
.big-claim{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3.6vw,2.4rem);text-align:center;color:var(--ink);max-width:20ch;margin:0 auto 34px}
.screen-q{max-width:620px;margin:0 auto}
.screen-q h3{text-align:center}

.view section{background-color:var(--band)}
.qlist li{position:relative;padding-left:54px}
.qlist li::before{content:"";position:absolute;left:17px;top:50%;transform:translateY(-50%) rotate(-12deg);width:26px;height:26px;background:url("../img/uga-paw.svg?v=108") center/contain no-repeat;opacity:.75}
footer{overflow:hidden}
footer::after{content:"";position:absolute;z-index:0;right:-30px;bottom:-40px;width:230px;height:230px;background:color-mix(in srgb,var(--ink) 88%,#fff 12%);-webkit-mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;transform:rotate(14deg);pointer-events:none}
footer>.wrap{position:relative;z-index:1}

h1,h2,h3,h4,.nav a,.nav button,.btn,.langs button,.feels,.big-claim,.sec-plate .eyebrow{font-weight:800}

@media (max-width:760px){
}

/* El contenedor de impresión no puede ir en display:none: una
   imagen dentro de un elemento oculto así no se descarga, y la
   hoja salía sin dibujo. Se saca de la vista dejándolo
   "presente" para el navegador. */
#print-area{
  position:absolute;
  left:-9999px;
  top:0;
  width:794px;          /* ancho de un A4 a 96 ppp */
  opacity:0;
  pointer-events:none;
}
@media print{
  body{background:#fff}
  body>*{display:none!important}
  #print-area{display:block!important}
  #print-area svg{width:100%;height:auto;page-break-inside:avoid}
  #print-area h1{font-family:sans-serif;font-size:20pt;text-align:center;margin-bottom:12pt}
  #print-area .credit{text-align:center;font-family:sans-serif;font-size:9pt;color:#666;margin-top:14pt}
}
@media (max-width:760px){
}

:root{--home-pink:#ff727b;--home-pink-deep:#ef5f69;--home-blue:#3aaeea;--home-blue-deep:#2797d0;--home-yellow:#ffc738}
.uga-wordmark .u{color:#f06d68;transform:rotate(-2deg)}
.uga-wordmark .g{color:#f6b638;transform:translateY(7px) rotate(2deg)}
.uga-wordmark .a{color:#5cc778;transform:translateY(3px) rotate(-1deg)}
.uga-wordmark-footer{font-size:3.35rem;margin-bottom:20px}

.topbar{position:absolute;top:0;left:0;right:0;z-index:100;padding:24px 0 10px;background:transparent;pointer-events:none}
.topbar .wrap{max-width:1480px;padding:0 54px}
.topbar .brand,.topbar .nav,.topbar .langs{pointer-events:auto}
.brand{justify-self:start}
.nav{backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1)}
.nav a,.nav button{min-width:104px;color:#39424e}
.langs{backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1)}
.langs button{color:#3d4651}

#view-inicio .home-values-section,
#view-inicio .home-conversation-section{transform:none!important}
#view-inicio .home-values-section::after,
#view-inicio .home-conversation-section::after{display:none}
#view-inicio .home-values-section{padding-top:105px}
#view-inicio .home-values-section .band img{max-height:360px;object-fit:cover}

.view:not(#view-inicio){padding-top:116px}

.foot-grid>div:first-child{display:flex;flex-direction:column;align-items:flex-start}

@media (max-width:1100px){
  .topbar .wrap{padding:0 28px;gap:14px}
  .nav a,.nav button{min-width:auto}
}

@media (max-width:760px){
  .topbar{position:absolute;padding:14px 0 0}
  .topbar .wrap{display:flex;padding:0 18px;justify-content:space-between;gap:10px}
  .langs{margin-left:auto}
  .langs button{padding:7px 9px;font-size:.73rem}
  .nav{position:fixed;z-index:110;left:12px;right:12px;bottom:12px;justify-self:auto;justify-content:space-between;gap:1px;padding:6px;background:rgba(255,255,255,.94);box-shadow:0 10px 34px rgba(62,73,63,.22)}
  .nav a,.nav button{font-size:.72rem;padding:9px 6px;min-width:0}
  .nav a[aria-current="page"],.nav button[aria-current="page"]{border-radius:999px}
  #view-inicio .home-values-section{padding-top:84px}
  .view:not(#view-inicio){padding-top:78px}
}

@media (max-width:430px){
  .langs button{padding:6px 7px}
}

.topbar .brand .brand-logo{height:62px;width:auto;filter:drop-shadow(0 3px 0 rgba(90,51,32,.14))}

@media (max-width:1100px){
}
@media (max-width:760px){
}
@media (max-width:430px){
}

h1,h2,h3,h4,.nav a,.nav button,.btn,.langs button,.feels,.big-claim,.sec-plate .eyebrow{font-weight:800;letter-spacing:.005em}

.topbar .brand .brand-logo{height:92px;width:auto;filter:drop-shadow(0 4px 0 rgba(90,51,32,.16));transition:transform .2s ease}
.topbar .brand:hover .brand-logo{transform:scale(1.04) rotate(-1.5deg)}
.foot-grid .footer-logo{height:74px;width:auto;margin-bottom:14px}

@media (max-width:1100px){
}
@media (max-width:760px){
  .foot-grid .footer-logo{height:62px}
}
@media (max-width:430px){
}

.topbar .wrap{grid-template-columns:250px 1fr 250px}
.topbar .brand{align-items:center}

@media (max-width:1280px){
}
@media (max-width:1100px){
}
@media (max-width:760px){
}
@media (max-width:430px){
}

.topbar{padding:18px 0 6px}

.nav a[aria-current="page"],.nav button[aria-current="page"]{color:var(--orange-deep)}

@media (max-width:1280px){
  .topbar .wrap{grid-template-columns:280px 1fr 180px}
}
@media (max-width:1100px){
  .topbar .wrap{grid-template-columns:230px 1fr 165px}
}
@media (max-width:760px){
  .topbar .brand .brand-logo{height:132px}
  .nav a[aria-current="page"],.nav button[aria-current="page"]{background:var(--orange);color:#fff}
}
@media (max-width:430px){
  .topbar .brand .brand-logo{height:108px}
}

.topbar .brand{overflow:visible}
@media (max-width:760px){
  .topbar .brand .brand-logo{max-width:46vw}
}
@media (max-width:1100px){
}
@media (max-width:760px){
}
@media (max-width:430px){
}

.mem-levels{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.mem-level{border:3px solid var(--ink);background:#fff;color:var(--ink-soft);border-radius:999px;padding:9px 18px;font-family:var(--font-display);font-weight:800;font-size:.95rem;box-shadow:0 4px 0 rgba(90,51,32,.2);transition:transform .14s ease,box-shadow .14s ease,background-color .2s}
.mem-level .mem-size{opacity:.6;font-size:.85em;margin-left:.35em}
.mem-level:hover{transform:translateY(2px);box-shadow:0 2px 0 rgba(90,51,32,.2)}
.mem-level[aria-pressed="true"]{background:var(--orange);color:#fff;box-shadow:0 4px 0 var(--orange-deep);text-shadow:0 1px 0 rgba(90,51,32,.25)}
.mem-level[aria-pressed="true"] .mem-size{opacity:.85}

.memory{grid-template-columns:repeat(var(--mem-cols,4),1fr);gap:16px}
.mcard{border-radius:26px}
.mface{border-radius:26px}
.mback{background:linear-gradient(180deg,#6E4229,var(--ink));border:4px solid #4A2A19;box-shadow:inset 0 -6px 0 rgba(0,0,0,.16)}
.mback::after{content:"";width:56%;height:56%;background:var(--orange);-webkit-mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;transform:rotate(-8deg)}
.mfront{border:4px solid var(--ink)}
.mcard[data-state="down"]:hover .mcard-in{transform:translateY(-3px)}
.mcard[data-state="done"]{opacity:.55}

@media (max-width:960px){
  .memory{grid-template-columns:repeat(var(--mem-cols,4),1fr);gap:12px}
}
@media (max-width:560px){
  .memory{gap:9px}
  .mcard,.mface{border-radius:18px}
  .mback,.mfront{border-width:3px}
  .mem-level{padding:8px 14px;font-size:.86rem}
}

.mem-board{position:relative}
.mem-win{position:absolute;inset:0;z-index:5;display:grid;place-items:center;align-content:center;gap:14px;padding:20px;border-radius:32px;pointer-events:none;opacity:0;transition:opacity .3s ease}
.mem-win.on{opacity:1}
.mem-win-face{width:min(210px,46%);filter:drop-shadow(0 10px 0 rgba(90,51,32,.18));transform:scale(.6) rotate(-8deg);transition:transform .5s cubic-bezier(.2,1.5,.4,1)}
.mem-win.on .mem-win-face{transform:scale(1) rotate(0deg);animation:memWinBounce 2.4s ease-in-out .5s infinite}
.mem-win-face svg{width:100%;height:auto;display:block}
.mem-win-text{margin:0;max-width:22ch;text-align:center;font-family:var(--font-display);font-weight:800;font-size:clamp(1.1rem,2.4vw,1.5rem);line-height:1.2;color:var(--orange-deep);text-shadow:0 2px 0 rgba(255,255,255,.9)}
@keyframes memWinBounce{
  0%,100%{transform:scale(1) rotate(0deg)}
  30%{transform:scale(1.05) rotate(-3deg)}
  60%{transform:scale(1.03) rotate(3deg)}
}
@media (max-width:560px){
  .mem-win-face{width:min(150px,50%)}
  .mem-win{gap:10px;border-radius:22px}
}

.view section:nth-of-type(odd),
.view section:nth-of-type(even),
.grid-3>.card:nth-child(odd),
.grid-3>.card:nth-child(even),
.grid-2>.card,
.media-card,
.grid-2>.media-card,
.chars>.char:nth-child(odd),
.chars>.char:nth-child(even),
.chars>.char.wide,
.game:nth-of-type(odd),
.game:nth-of-type(even),
.steps>.step:nth-child(odd),
.steps>.step:nth-child(even){transform:none}

body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.nav,.langs{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.95)}

.mem-win[hidden]{display:none}
.mem-win{backdrop-filter:none;-webkit-backdrop-filter:none;background:radial-gradient(ellipse at center,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 58%,rgba(255,255,255,.66) 100%)}

:root{--hero-focus-x:50%;--hero-focus-y:center}

@media (max-width:1100px){
  :root{--hero-focus-x:55%}
}

@media (max-width:760px){
  :root{--hero-focus-x:50%;--hero-focus-y:78%}
}

@media (max-width:430px){
  :root{--hero-focus-x:50%;--hero-focus-y:82%}
}

@media (max-width:900px) and (orientation:landscape){
  :root{--hero-focus-x:50%;--hero-focus-y:center}
}

@media (max-width:1100px){
}
@media (max-width:760px){
}
@media (max-width:760px){
}

@media (max-width:1100px){
}
@media (max-width:760px){
}

@media (max-width:1100px){
}
@media (max-width:760px){
}
@media (max-width:760px){
}
@media (max-width:760px){
}
@media (max-width:1100px){
}
@media (max-width:760px){
}

:root{--paper:#FFF7E8;
  --wash-sky:#E3F4FB;
  --wash-grass:#E9F5DA;
  --warm-100:#F5E9D6;
  --warm-200:#E8D7BC}

.view section:nth-of-type(4n+1){--band:var(--paper)}
#view-inicio .home-values-section{background-color:var(--paper)}

.sec-plate{background:var(--ink);box-shadow:0 10px 0 rgba(58,33,19,.28)}

.btn.accent{background:var(--orange);box-shadow:0 5px 0 var(--orange-deep)}
.ep-pick[aria-current="true"]{background:var(--orange);box-shadow:0 4px 0 var(--orange-deep)}
.play{background:var(--orange);box-shadow:0 6px 0 var(--orange-deep)}
.btn{background:#fff;color:var(--ink)}

.tag,.game-head .age{background:var(--warm-100);color:var(--ink-soft)}
.step::before{background:var(--warm-100);border:3px solid var(--ink);color:var(--ink);box-shadow:none}
.ep-pick{background:#fff}
.game .answer,.game .sheet,.sheet{background:var(--warm-100)}
.mfront{background:#FFFDF6}

.card,.media-card,.char,.game,.step{background:#fff;box-shadow:0 8px 0 rgba(90,51,32,.16)}
.card:hover,.char:hover,.game:hover{transform:translateY(-6px)}

#view-inicio .home-values-section{--band:#B6E77A;background-color:var(--band)}
#view-inicio .home-conversation-section{--band:#DCF0C2;background-color:var(--band)}

:root{--sky-1:#E7F6FD;
  --sky-2:#CDEBF9;
  --sky-3:#B4E2F6;}

.view section:nth-of-type(4n+1){--band:var(--sky-1)}

.card,.media-card,.char,.game,.step{box-shadow:0 8px 0 rgba(42,83,102,.16)}
.card:hover,.char:hover,.game:hover{box-shadow:0 14px 0 rgba(42,83,102,.16)}
.player,.band{box-shadow:0 10px 0 rgba(42,83,102,.2)}

:root{--sky-1:#CDEBF9;
  --sky-2:#E2F4FC;
  --sky-3:#B7E4F7;}
body{background:transparent}

:root{--sky-1:#B7E4F7;
  --sky-2:#CFEDF9;
  --sky-3:#A2DBF3;}
html{background:var(--sky-1)}

:root{--plate:#7E4A28}
.sec-plate{background:var(--plate)}
.sec-plate .eyebrow{color:rgba(255,252,240,.76)}

:root{--plate:#A85A22}
.sec-plate{box-shadow:0 10px 0 rgba(116,60,23,.34)}

.menu-toggle{display:none;align-items:center;gap:10px;margin-left:auto;padding:10px 16px;border:3px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:.95rem;box-shadow:0 4px 0 rgba(90,51,32,.22);min-height:48px}
.menu-bars{position:relative;display:block;width:22px;height:2px;border-radius:2px;background:var(--ink)}
.menu-bars::before,.menu-bars::after{content:"";position:absolute;left:0;width:22px;height:2px;border-radius:2px;background:var(--ink);transition:transform .22s ease,opacity .22s ease}
.menu-bars::before{top:-7px}
.menu-bars::after{top:7px}
[aria-expanded="true"] .menu-bars{background:transparent}
[aria-expanded="true"] .menu-bars::before{transform:translateY(7px) rotate(45deg)}
[aria-expanded="true"] .menu-bars::after{transform:translateY(-7px) rotate(-45deg)}

.menu-panel{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;justify-content:center;gap:26px;padding:96px 22px calc(34px + env(safe-area-inset-bottom));opacity:0;transition:opacity .24s ease;overflow-y:auto}
.menu-panel.on{opacity:1}
.menu-panel[hidden]{display:none}
.menu-links{display:flex;flex-direction:column;gap:12px;max-width:520px;width:100%;margin:0 auto}
.menu-links a,.menu-links button{width:100%;min-height:66px;padding:16px 26px;border:3px solid var(--ink);border-radius:26px;background:#fff;color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:1.3rem;text-align:left;box-shadow:0 6px 0 rgba(90,51,32,.2)}
.menu-links a[aria-current="page"],.menu-links button[aria-current="page"]{background:var(--orange);box-shadow:0 6px 0 var(--orange-deep)}
.menu-langs{display:flex;gap:10px;justify-content:center}
.menu-langs button{min-width:74px;min-height:52px;border:3px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-family:var(--font-display);font-weight:800;box-shadow:0 4px 0 rgba(90,51,32,.2)}
.menu-langs button[aria-pressed="true"]{background:var(--orange);color:#fff;box-shadow:0 4px 0 var(--orange-deep)}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tile{flex-direction:column;background:#fff}
.tile-cta{align-self:flex-start;margin-top:6px}

.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none;margin:0;padding:0}
.rail button{display:flex;flex-direction:column;align-items:center;width:100%;padding:0;border:0;background:transparent}
.rail img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:5px solid #fff;box-shadow:0 8px 0 rgba(42,83,102,.16);transition:transform .18s ease}
.rail button:hover img{transform:translateY(-5px) scale(1.02)}
.rail-more{display:flex;justify-content:center;margin-top:26px}

@media (max-width:1024px){
  .nav,.langs{display:none}
  .topbar .wrap{gap:12px;grid-template-columns:none}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr;gap:22px}
  .chars{grid-template-columns:repeat(2,1fr)}
  .grid-6{grid-template-columns:repeat(3,1fr)}
  .wrap{padding:0 28px}
}

@media (max-width:700px){
  .menu-toggle{font-size:.88rem}
  .menu-word{display:none}
  .tile{flex-direction:row;align-items:stretch}
  .tile-art{flex:0 0 38%;aspect-ratio:auto}

  .rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 14px;margin:0 -20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail li{scroll-snap-align:center}

  .grid-3,.chars{grid-template-columns:1fr}
  .grid-6{grid-template-columns:repeat(2,1fr)}
  .wrap{padding:0 20px}

  .btn,.ep-pick,.mem-level,.game .answer{min-height:46px}
}

@media (min-width:1025px){
}

@media (min-width:1025px){
  .topbar{position:sticky}
}

@media (max-width:1024px){
}
@media (max-width:700px){
}

.hero-block{background:var(--sky-1);padding:0;overflow:hidden}
.hero-grid{gap:0}
.hero-card{isolation:isolate;color:var(--cream);text-align:left;transform:none}
.hero-card::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:40px;background:#A85A22;border:2px solid #743C17;box-shadow:0 8px 0 rgba(58,33,19,.22)}
.hero-card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:40px;background:#6E3712;opacity:.22;-webkit-mask:url("../img/uga-paw.svg?v=108") 84% 80%/150px no-repeat;mask:url("../img/uga-paw.svg?v=108") 84% 80%/150px no-repeat}
.hero-card h1{margin:0 0 14px;max-width:14ch;font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,3vw,3rem);line-height:1.08;color:var(--cream);text-shadow:none}
.hero-art{align-self:stretch;overflow:hidden}
.hero-art img{display:block}

@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  .hero-card h1{max-width:none;margin-left:auto;margin-right:auto}
  .hero-card::after{-webkit-mask-size:120px;mask-size:120px}
}
@media (max-width:700px){
  .hero-card{border-radius:32px}
  .hero-card::before,.hero-card::after{border-radius:32px}
  .hero-card h1{font-size:clamp(1.7rem,6.5vw,2.2rem)}
  .hero-card::after{-webkit-mask-size:96px;mask-size:96px}
}

.menu-panel{visibility:hidden;pointer-events:none;transition:opacity .24s ease,visibility 0s linear .24s}
.menu-panel.on{visibility:visible;pointer-events:auto;transition:opacity .24s ease,visibility 0s}
body.menu-open{overflow:visible}

.hero-block{position:relative;overflow:hidden}
.hero-grid{position:relative;display:flex;align-items:center;grid-template-columns:none;max-width:var(--maxw);margin:0 auto;padding:0 22px;min-height:clamp(560px,74vh,720px)}
.hero-art{position:absolute;inset:0;z-index:0;min-height:0;border-radius:0;margin:0;width:100%}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}
.hero-card{position:relative;z-index:2;margin:0 auto 0 0;
  width:min(440px,50%);padding:30px 30px 34px}
.hero-card::after{-webkit-mask-size:132px;mask-size:132px}

@media (max-width:1024px){
  .hero-grid{justify-content:center}
}
@media (max-width:700px){
  .hero-grid{min-height:min(132vw,560px)}
  .hero-card{width:100%;padding:22px 18px 24px}
}

.topbar{padding:4px 0 0}
.view section{padding-top:34px}
.view section:first-of-type{padding-top:18px}
#view-inicio .hero-block{padding-top:0}
#view-inicio section:first-of-type{padding-top:0}

@media (max-width:1024px){
  .view section{padding-top:26px}
  .view section:first-of-type{padding-top:12px}
}
@media (max-width:700px){
  .view section{padding-top:22px;padding-bottom:34px}
  .view section:first-of-type{padding-top:8px}
}

.view:not(#view-inicio) section:first-of-type{padding-top:2px}
@media (max-width:1024px){
  .view:not(#view-inicio) section:first-of-type{padding-top:0}
}

@media (max-width:1024px){
  .hero-block{overflow:visible}
  .hero-grid{display:flex;flex-direction:column;align-items:center;min-height:0}
  .hero-card{order:1;position:relative;z-index:2;width:min(520px,100%)}
  .hero-art{order:2;position:relative;inset:auto;width:100vw;margin-left:calc(50% - 50vw);aspect-ratio:4/3;min-height:0;border-radius:0;overflow:hidden}
  .hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}
}
@media (max-width:700px){
  .hero-card{margin-bottom:14px}
  .hero-art{aspect-ratio:1/1}
}

.menu-toggle{position:relative;z-index:80;touch-action:manipulation}

.topbar{position:sticky;top:0;z-index:60;padding:14px 0 10px;overflow:visible}
.topbar .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;position:relative}
.topbar .brand{position:absolute;left:22px;z-index:3;display:block;line-height:0}
.topbar .brand .brand-logo{width:auto;max-width:none;object-fit:contain}
.nav{grid-column:2;justify-self:center;margin:0;padding:8px;gap:6px;border-radius:999px;background:#fff;box-shadow:0 6px 18px rgba(42,83,102,.18)}
.nav a,.nav button{padding:11px 22px;font-size:1rem;font-weight:800}
.nav a[aria-current="page"],.nav button[aria-current="page"]{background:transparent;color:var(--orange);text-shadow:none}
nav a:hover,nav button:hover{background:rgba(245,148,59,.12);color:var(--orange-deep)}
.langs{grid-column:3;justify-self:end;margin:0;padding:6px;border-radius:999px;background:#fff;box-shadow:0 6px 18px rgba(42,83,102,.18)}
.langs button{padding:9px 13px;font-size:.86rem}
.langs button[aria-pressed="true"]{background:var(--orange);color:#fff;box-shadow:none}

.view section:first-of-type{padding-top:6px}
#view-inicio .hero-block{margin-top:-14px}

@media (max-width:1280px){
}
@media (max-width:1100px){
  .nav a,.nav button{padding:10px 16px;font-size:.92rem}
}

.menu-chk{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.menu-chk:checked ~ .menu-panel{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .24s ease,visibility 0s}
.menu-chk:checked ~ .topbar .menu-bars{background:transparent}
.menu-chk:checked ~ .topbar .menu-bars::before{transform:translateY(7px) rotate(45deg)}
.menu-chk:checked ~ .topbar .menu-bars::after{transform:translateY(-7px) rotate(-45deg)}
.menu-toggle{cursor:pointer;user-select:none;-webkit-user-select:none}

@media (max-width:1024px){
  .topbar .wrap{display:flex;justify-content:space-between}
  .topbar .brand{position:relative;left:auto}
  .menu-toggle{display:inline-flex}
}
@media (max-width:700px){
}

@media (max-width:1024px){
  .hero-grid{padding:38px 20px 0}
  .hero-card{margin:0 auto 26px}
}
@media (max-width:700px){
  .hero-grid{padding:30px 16px 0}
  .hero-card{margin:0 auto 22px}
}

.topbar{padding:34px 0 12px}
.topbar .brand{top:-14px}
.topbar .brand .brand-logo{height:250px}

@media (max-width:1280px){
  .topbar{padding:30px 0 12px}
  .topbar .brand .brand-logo{height:206px}
}
@media (max-width:1100px){
  .topbar{padding:26px 0 10px}
  .topbar .brand .brand-logo{height:172px}
}
@media (max-width:1024px){
  .topbar{padding:20px 0 12px}
  .topbar .brand .brand-logo{height:112px}
}
@media (max-width:700px){
  .topbar{padding:16px 0 10px}
  .topbar .brand .brand-logo{height:86px}
}

#view-inicio .hero-block{margin-top:26px}

.view:not(#view-inicio) section:first-of-type{padding-top:0;margin-top:-18px}
.view:not(#view-inicio) .sec-head{margin-bottom:20px}

@media (max-width:1024px){
  #view-inicio .hero-block{margin-top:14px}
  .view:not(#view-inicio) section:first-of-type{margin-top:-10px}
}
@media (max-width:700px){
  #view-inicio .hero-block{margin-top:6px}
  .view:not(#view-inicio) section:first-of-type{margin-top:-4px}
}

.topbar .brand{top:-34px}
@media (max-width:1024px){ .topbar .brand{top:-8px} }
@media (max-width:700px){ .topbar .brand{top:-6px} }

@media (min-width:1025px){
  :root{--header-h:106px}   

  .topbar{background:none;pointer-events:none}
  .topbar .nav,.topbar .langs,.topbar .brand{pointer-events:auto}

  #view-inicio .hero-block{margin-bottom:0}
  
  #view-inicio .hero-art{inset:0;border-radius:0}
}

#view-inicio .hero-block{padding-bottom:0}
#view-inicio .home-explore-section{padding-top:22px}
@media (max-width:1024px){
  #view-inicio .home-explore-section{padding-top:18px}
}
@media (max-width:700px){
  #view-inicio .home-explore-section{padding-top:14px}
}

.menu-panel,
.menu-toggle,
.menu-chk{display:none !important}

@media (max-width:1024px){

  .topbar .wrap{display:flex;align-items:center;justify-content:space-between}
  .langs{display:flex !important;grid-column:auto;justify-self:auto;margin-left:auto;padding:5px;background:#fff;border-radius:999px;box-shadow:0 6px 18px rgba(42,83,102,.18)}
  .langs button{padding:9px 12px;font-size:.82rem;min-height:42px}

  .nav{display:flex !important;position:fixed;left:0;right:0;bottom:0;z-index:75;margin:0;justify-content:space-around;align-items:stretch;gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -6px 22px rgba(42,83,102,.2)}
  .nav a,.nav button{border-radius:14px;font-weight:800;text-align:center;color:var(--ink-soft)}
  .nav a[aria-current="page"],.nav button[aria-current="page"]{background:var(--orange);color:#fff;text-shadow:none}
  nav a:hover,nav button:hover{background:transparent;color:var(--ink-soft)}
  .nav a[aria-current="page"]:hover,.nav button[aria-current="page"]:hover{background:var(--orange);color:#fff}

  body{padding-bottom:78px}
  footer{padding-bottom:26px}
}

@media (max-width:380px){
  .langs button{padding:8px 9px;font-size:.76rem}
}

@media (max-width:1024px){
  .nav{justify-content:flex-start;gap:4px;padding:7px 8px calc(7px + env(safe-area-inset-bottom));overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav::before,.nav::after{content:"";flex:1 1 auto;min-width:0}
  .nav a,.nav button{flex:0 0 auto;width:auto;min-width:0;padding:11px 13px;font-size:.78rem;line-height:1.2;white-space:nowrap;min-height:46px}
}
@media (max-width:380px){
  .nav{gap:3px;padding-left:6px;padding-right:6px}
  .nav a,.nav button{padding:10px 10px;font-size:.72rem}
}

.menu-chk{display:block !important;position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

@media (max-width:1024px){
  
  .menu-chk ~ .topbar .nav{display:none !important}
  .menu-chk ~ .topbar .menu-toggle{display:inline-flex !important}
  .menu-chk ~ footer{padding-bottom:0}

  .menu-toggle{order:3;margin-left:12px;border:3px solid var(--ink);border-radius:999px;cursor:pointer}

  .menu-panel{display:flex !important;position:fixed;inset:0;z-index:70;flex-direction:column;justify-content:center;gap:22px;padding:120px 20px calc(30px + env(safe-area-inset-bottom));background:var(--sky-1);overflow-y:auto;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility 0s linear .22s}
  .menu-chk:checked ~ .menu-panel{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s ease,visibility 0s}
  
  .menu-chk:checked ~ .topbar{z-index:90}
  .menu-chk:checked ~ .topbar .menu-bars{background:transparent}
  .menu-chk:checked ~ .topbar .menu-bars::before{transform:translateY(7px) rotate(45deg)}
  .menu-chk:checked ~ .topbar .menu-bars::after{transform:translateY(-7px) rotate(-45deg)}

  .menu-links{display:flex;flex-direction:column;gap:14px;width:min(460px,100%);margin:0 auto}
  .menu-links a,.menu-links button{width:100%;min-height:72px;padding:18px 26px;border:3px solid var(--ink);border-radius:28px;background:#fff;color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:1.35rem;text-align:center;box-shadow:0 7px 0 rgba(90,51,32,.2)}
  .menu-links a[aria-current="page"],.menu-links button[aria-current="page"]{background:var(--orange);color:#fff;box-shadow:0 7px 0 var(--orange-deep)}
  .menu-langs{display:flex;gap:12px;justify-content:center;margin-top:6px}
  .menu-langs button{min-width:80px;min-height:56px;border:3px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:1rem;box-shadow:0 5px 0 rgba(90,51,32,.2)}
  .menu-langs button[aria-pressed="true"]{background:var(--orange);color:#fff;box-shadow:0 5px 0 var(--orange-deep)}
}

@media (max-width:700px){
  .menu-panel{padding-top:104px;gap:18px}
  .menu-links a,.menu-links button{min-height:64px;font-size:1.2rem;border-radius:24px}
  .menu-langs button{min-width:70px;min-height:50px}
}
@media (min-width:1025px){
  .menu-panel{display:none !important}
  .menu-toggle{display:none !important}
}

.hero-card::before,
.hero-card::after{display:none !important}

@media (min-width:1025px){
  .hero-grid{justify-content:center;align-items:center;text-align:center}
  .hero-card{margin:0 auto;padding:0;text-align:center;background:none;box-shadow:none}
  .hero-card h1{max-width:none;margin:0 auto 18px;line-height:1.02;color:#fff;text-shadow:0 5px 0 rgba(90,51,32,.22), 0 12px 26px rgba(60,72,50,.3)}
}

@media (max-width:1024px){
  .hero-card{background:none;box-shadow:none;padding:0;text-align:center}
  .hero-card h1{color:var(--ink);text-shadow:none;margin:0 auto 12px}
}

@media (min-width:1025px){
  #view-inicio .hero-block{margin-top:calc(-1 * var(--header-h));padding:0}
  #view-inicio .hero-grid{min-height:100vh;max-width:none;padding:calc(var(--header-h) + 20px) 22px 60px}
  #view-inicio .hero-art{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100vw;border-radius:0}

  .hero-card{width:min(900px,90%)}
  .hero-card h1{font-size:clamp(2.8rem,4.8vw,4.6rem);margin-bottom:34px}
}

@media (max-width:700px){
}

.hero-card h1{max-width:13ch;margin-left:auto;margin-right:auto;text-wrap:balance}

@media (max-width:1024px){

  .menu-chk:checked ~ .menu-panel,
  body:has(.menu-chk:checked) .menu-panel,
  body.nav-open .menu-panel{opacity:1 !important;visibility:visible !important;pointer-events:auto !important;transform:none !important;transition:opacity .22s ease,visibility 0s !important}
  .menu-chk:checked ~ .topbar,
  body:has(.menu-chk:checked) .topbar,
  body.nav-open .topbar{z-index:95}
  .menu-chk:checked ~ .topbar .menu-bars::before,
  body:has(.menu-chk:checked) .menu-bars::before,
  body.nav-open .menu-bars::before{transform:translateY(7px) rotate(45deg)}
  .menu-chk:checked ~ .topbar .menu-bars::after,
  body:has(.menu-chk:checked) .menu-bars::after,
  body.nav-open .menu-bars::after{transform:translateY(-7px) rotate(-45deg)}

  .menu-toggle{display:inline-flex !important;order:3;align-items:center;margin-left:12px;padding:12px 16px;min-height:52px;border:3px solid var(--ink);border-radius:999px;background:#fff;box-shadow:0 5px 0 rgba(90,51,32,.2);cursor:pointer;-webkit-tap-highlight-color:transparent}

  .menu-panel{display:flex !important;position:fixed;inset:0;z-index:70;flex-direction:column;justify-content:center;gap:16px;padding:130px 20px calc(30px + env(safe-area-inset-bottom));background:var(--sky-1);overflow-y:auto;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility 0s linear .22s}

  body:not(:has(.menu-panel)) .nav{display:flex !important;position:fixed;left:0;right:0;bottom:0;z-index:75;justify-content:flex-start;gap:4px;padding:7px 8px calc(7px + env(safe-area-inset-bottom));margin:0;background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -6px 22px rgba(42,83,102,.2);overflow-x:auto}
  body:not(:has(.menu-panel)) .nav::before,
  body:not(:has(.menu-panel)) .nav::after{content:"";flex:1 1 auto;min-width:0}
  body:not(:has(.menu-panel)) .menu-toggle{display:none !important}
  body:has(.menu-panel) .nav{display:none !important}
}

@media (max-width:1024px){
  .topbar .menu-toggle{pointer-events:auto !important}
}

:root{--active-home-image:url("../img/home-background-desktop-clean.webp?v=2")}
@media (max-width:700px){
  :root{--active-home-image:url("../img/home-background-mobile-clean.webp?v=2")}
}

#view-inicio .hero-block,
#view-inicio .hero-grid,
#view-inicio .hero-card,
#view-inicio .hero-art{background-image:none!important}
#view-inicio .hero-block::before,
#view-inicio .hero-block::after,
#view-inicio .hero-grid::before,
#view-inicio .hero-grid::after,
#view-inicio .hero-art::before,
#view-inicio .hero-art::after{content:none!important;display:none!important}

@media (min-width:1025px){
  #view-inicio .hero-block{background:rgb(164,245,249)}
  #view-inicio .hero-grid{align-items:flex-start;padding-top:calc(var(--header-h) + 4px)}
  #view-inicio .hero-card h1{margin-bottom:22px;font-size:clamp(2.5rem,3.8vw,3.5rem)}
  #view-inicio .hero-art{top:100px}
  #view-inicio .hero-art img{object-fit:cover;object-position:center top}
}

@media (min-width:701px) and (max-width:1024px){
  #view-inicio .hero-block{overflow:hidden;background:rgb(164,245,249)}
  #view-inicio .hero-grid{display:block;position:relative;min-height:0;padding:0}
  #view-inicio .hero-card{position:absolute;inset:24px 28px auto;z-index:2;width:auto;margin:0;padding:0}
  #view-inicio .hero-card h1{max-width:100%;margin-bottom:16px;font-size:clamp(2rem,4.4vw,2.5rem);line-height:1.04}
  #view-inicio .hero-art{position:relative;inset:auto;z-index:1;width:100vw;margin:0 0 0 calc(50% - 50vw);aspect-ratio:4/3}
  #view-inicio .hero-art img{top:80px;bottom:auto;height:calc(100% - 80px);object-fit:cover;object-position:center top}
}

@media (max-width:700px){
  #view-inicio .hero-block{overflow:hidden}
  #view-inicio .hero-grid{display:block;position:relative;min-height:0}
  #view-inicio .hero-card{position:absolute;inset:18px 16px auto;z-index:2;margin:0}
  #view-inicio .hero-card h1{max-width:100%;line-height:1.04}
  #view-inicio .hero-art{position:relative;inset:auto;z-index:1;width:100vw;margin:0 0 0 calc(50% - 50vw);aspect-ratio:4/5}
  #view-inicio .hero-art img{object-fit:cover}
}

#view-inicio .hero-block{background:#A3F6FF;padding:0;margin-top:0;overflow:hidden}
#view-inicio .hero-grid{max-width:none;min-height:0;padding:0}

#view-inicio .hero-card{position:relative;z-index:2;width:min(900px,92%);margin:0 auto;padding:calc(var(--header-h,106px) + 34px) 16px 30px;text-align:center;background:none;box-shadow:none}

#view-inicio .hero-art{position:relative;inset:auto;transform:none;width:100%;margin:0;aspect-ratio:auto;min-height:0;border-radius:0;overflow:hidden;line-height:0}
#view-inicio .hero-art img{display:block;
  object-fit:cover}

@media (max-width:1024px){
  #view-inicio .hero-card{padding:calc(var(--header-h,88px) + 22px) 16px 24px}
  #view-inicio .hero-card h1{color:#fff}
  #view-inicio .hero-art img{max-height:64vh}
}
@media (max-width:700px){
  #view-inicio .hero-card{padding:96px 14px 20px;width:min(520px,94%)}
  #view-inicio .hero-art img{max-height:none}
}

#view-inicio .home-explore-section{padding-top:20px}

#view-inicio .hero-block{position:relative;height:100vh;height:100svh;min-height:560px;padding:0;margin:0;background:#A3F6FF;overflow:hidden}
#view-inicio .hero-art{position:absolute;inset:0;z-index:0;width:100%;margin:0;aspect-ratio:auto}
#view-inicio .hero-art picture{display:block;height:100%}
#view-inicio .hero-art img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center bottom;}

#view-inicio .hero-grid{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;max-width:none;min-height:0;padding:calc(var(--header-h,106px) + 18px) 22px 0;pointer-events:none}
#view-inicio .hero-card{pointer-events:auto;width:min(760px,92%);margin:0;padding:0;text-align:center;background:none;box-shadow:none}
#view-inicio .hero-card h1{margin:0 auto 26px;max-width:11ch;font-size:clamp(2.4rem,4.4vw,4rem);line-height:1.06;color:#fff;text-shadow:0 4px 0 rgba(90,51,32,.18), 0 9px 20px rgba(60,72,50,.22)}

@media (max-width:1024px){
  #view-inicio .hero-card h1{font-size:clamp(2.1rem,5.6vw,3.1rem);margin-bottom:22px}
}
@media (max-width:700px){
  #view-inicio .hero-block{height:100svh;min-height:520px}
  #view-inicio .hero-grid{padding:96px 16px 0}
  #view-inicio .hero-card h1{font-size:clamp(1.9rem,8.4vw,2.5rem);margin-bottom:18px}
}

#view-inicio .home-explore-section{padding-top:26px}

:root{--sky-1:#A3F6FF;
  --sky-2:#B8FAFF;
  --sky-3:#86E9FF;}
html,body{background:var(--sky-1)}

.view section:nth-of-type(4n+1){--band:var(--sky-1)}
.view section:nth-of-type(4n+2){--band:var(--sky-2)}
.view section:nth-of-type(4n+3){--band:var(--sky-1)}
.view section:nth-of-type(4n+4){--band:var(--sky-3)}

#view-inicio .hero-block{background:var(--sky-1)}
#view-inicio .home-explore-section{--band:var(--sky-3);background-color:var(--band)}
#view-inicio .home-rail-section{--band:var(--sky-1);background-color:var(--band)}

.menu-panel{background:var(--sky-1)}

#view-inicio{position:relative}

#view-inicio .hero-block{margin-top:calc(-1 * var(--header-total, 150px));height:100vh;height:100svh}
#view-inicio .hero-grid{padding-top:calc(var(--header-total, 150px) + 18px)}

:root{--header-total:150px}   

@media (max-width:1024px){
  :root{--header-total:132px}
  #view-inicio .hero-grid{padding-top:calc(var(--header-total) + 14px)}
}
@media (max-width:700px){
  :root{--header-total:108px}
  #view-inicio .hero-grid{padding-top:calc(var(--header-total) + 10px)}
}

.topbar{background:none !important}
.topbar,.topbar .wrap{position:relative;z-index:60}

#view-inicio .hero-block{overflow:visible}
#view-inicio .hero-art{overflow:hidden;border-radius:0}

#view-inicio .home-explore-section{position:relative}
#view-inicio .home-explore-section::before{content:"" !important;display:block !important;position:absolute;top:-34px;left:0;right:0;height:36px;background:radial-gradient(circle at 36px 36px, var(--band) 35px, transparent 36px) repeat-x;background-size:72px 72px;pointer-events:none;z-index:4}
@media (max-width:700px){
  #view-inicio .home-explore-section::before{top:-24px;height:26px;background:radial-gradient(circle at 26px 26px, var(--band) 25px, transparent 26px) repeat-x;background-size:52px 52px}
}
#view-inicio .hero-card h1{margin-bottom:0}

.visually-hidden{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
#view-inicio .hero-grid{display:none !important}

#view-inicio .hero-grid{display:flex !important}
#view-inicio .hero-card{display:none !important}
#view-inicio .hero-art{display:block !important}

@media (max-width:700px){
}
@media (max-width:430px){
}

@media (max-width:700px){
  #view-inicio .hero-art img{object-position:center bottom}
}
@media (max-width:430px){
  #view-inicio .hero-art img{object-position:center bottom}
}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px}
.tile{position:relative;display:block;padding:0 0 26px;
  background:none;border-radius:0;box-shadow:none;overflow:visible;cursor:pointer;transition:transform .18s ease}
.tile:hover{transform:translateY(-6px);box-shadow:none}

.tile-art{width:100%;aspect-ratio:1;border-radius:34px;overflow:hidden;background:var(--sky-2);border:4px solid #fff;box-shadow:0 10px 0 rgba(42,83,102,.18)}
.tile-art img{width:100%;height:100%;object-fit:cover;display:block}

.tile-cta{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 26px;max-width:92%;
/*--border:0px solid var(--ink);--*/
border-radius:999px;background:var(--orange);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.08rem;line-height:1.1;text-align:center;white-space:nowrap;text-shadow:0 2px 0 rgba(90,51,32,.28);box-shadow:0 6px 0 #C96A16;transition:transform .16s ease,box-shadow .16s ease}
.tile:hover .tile-cta{transform:translateX(-50%) translateY(3px);box-shadow:0 3px 0 #C96A16}

@media (max-width:1024px){
  .tiles{grid-template-columns:repeat(2,1fr);gap:24px 20px}
  .tile-cta{font-size:1rem;padding:11px 20px;min-height:48px}
}
@media (max-width:700px){
  .tiles{grid-template-columns:repeat(2,1fr);gap:20px 14px}
  .tile{padding-bottom:22px}
  .tile-art{border-radius:26px;border-width:3px;box-shadow:0 7px 0 rgba(42,83,102,.18)}
  .tile-cta{font-size:.84rem;padding:9px 12px;min-height:42px;border-width:3px;box-shadow:0 4px 0 #C96A16}
}

.uga-motto{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.35em;margin:0 0 34px;font-family:var(--font-display);font-weight:800;line-height:1.05;text-align:center}
.uga-motto span{white-space:nowrap}

@media (max-width:700px){
  .uga-motto{gap:.25em}
}

.uga-motto{display:flex;justify-content:center;margin:0 0 34px}
.motto-img{display:block;width:min(520px,76%);height:auto;max-width:none}
@media (max-width:1024px){
  .motto-img{width:min(440px,84%)}
}
@media (max-width:700px){
  .uga-motto{margin-bottom:24px}
  .motto-img{width:min(330px,88%)}
}

@media (max-width:1024px){
  .menu-toggle{
    position:relative;
    isolation:isolate;
    justify-content:center;
    width:76px;
    height:76px;
    min-height:76px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
  }
  .menu-word{display:none}
  .menu-toggle::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:var(--orange);
    -webkit-mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;
    mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;
    transform:scaleX(-1);
    transform-origin:center;
    transition:transform .22s cubic-bezier(.2,1.35,.4,1);
  }
  .menu-toggle::after{content:none}
  .menu-bars,
  .menu-bars::before,
  .menu-bars::after{
    width:24px;
    height:3px;
    border-radius:999px;
    background:var(--ink);
  }
  .menu-bars{
    position:relative;
    z-index:1;
    display:block;
    
    transform:translate(-3px,13px);
    transition:background-color .18s ease;
  }
  .menu-bars::before,
  .menu-bars::after{
    content:"";
    position:absolute;
    left:0;
    transition:transform .22s cubic-bezier(.2,1.35,.4,1),background-color .18s ease;
  }
  .menu-bars::before{top:-8px}
  .menu-bars::after{top:8px}

  .menu-chk:checked ~ .topbar .menu-toggle::before,
  body:has(.menu-chk:checked) .menu-toggle::before,
  body.nav-open .menu-toggle::before{transform:scaleX(-1) rotate(5deg) scale(1.04)}
  .menu-chk:checked ~ .topbar .menu-bars,
  body:has(.menu-chk:checked) .menu-bars,
  body.nav-open .menu-bars{background:transparent !important}
  .menu-chk:checked ~ .topbar .menu-bars::before,
  body:has(.menu-chk:checked) .menu-bars::before,
  body.nav-open .menu-bars::before{background:var(--ink);transform:translateY(8px) rotate(45deg)}
  .menu-chk:checked ~ .topbar .menu-bars::after,
  body:has(.menu-chk:checked) .menu-bars::after,
  body.nav-open .menu-bars::after{background:var(--ink);transform:translateY(-8px) rotate(-45deg)}
}
@media (max-width:700px){
  .menu-toggle{width:84px;height:84px;min-height:84px}
  .menu-bars{transform:translate(-3px,14px)}
}

#view-inicio .hero-block{background:#A3F6FF}
#view-inicio .hero-art{background:#A3F6FF}

#view-inicio .hero-art img{will-change:transform;animation:ugaPeek 30s infinite}

@keyframes ugaPeek {

  /* Inicio abajo → squash suave */
  0% {
    transform: translateY(30%) scale(1, 1);
    animation-timing-function: cubic-bezier(.15,.85,.35,1.2);
  }

   1% {
    transform: translateY(30%) scale(1, 1);
    animation-timing-function: cubic-bezier(.15,.85,.35,1.2);
  }

  /* Rebote abajo (más marcado) */
  2% {
    transform: translateY(33%) scale(1.06, 0.99);
    animation-timing-function:  cubic-bezier(.15,.85,.35,1.2);
  }

  /* Overshoot arriba → stretch */
  3% {
    transform: translateY(-2%) scale(0.95, 1.05);
    animation-timing-function:  cubic-bezier(.15,.85,.35,1.2);
  }

  /* Ajuste de elasticidad */
  4% {
    transform: translateY(2%) scale(1.02, 0.98);
    animation-timing-function:  cubic-bezier(.15,.85,.35,1.2);
  }

  /* Neutro */
  5% {
    transform: translateY(0%) scale(1,1);
  }

  /* Mantiene la pose */
  90% {
    transform: translateY(0%) scale(1,1);
  }

  /* Vuelta abajo → squash */
  100% {
    transform: translateY(30%) scale(1,1);
  }
}


@media (max-width:1024px){
  #view-inicio .hero-block,
  #view-inicio .hero-art{background:#98F0FE}
}

@media (prefers-reduced-motion:reduce){
  #view-inicio .hero-art img{animation:none;transform:none}
}

#view-inicio .hero-art{background-image:url("../img/home-hero-2048-sky.webp");background-size:cover;background-position:center bottom;background-repeat:no-repeat;background-color:#A3F6FF}
@media (min-width:1600px){
  #view-inicio .hero-art{background-image:url("../img/home-hero-3840-sky.webp")}
}
@media (max-width:1024px){
  #view-inicio .hero-art{background-image:url("../img/home-hero-tablet-2400-sky.webp");background-color:#98F0FE}
}
@media (max-width:700px){
  #view-inicio .hero-art{background-image:url("../img/home-hero-mobile-1800-sky.webp")}
}

#view-inicio .hero-art img{object-fit:cover;object-position:center bottom;background:none}

@media (min-width:1025px){
  .nav a,.nav button{color:var(--ink);background:transparent;border-radius:999px;transition:background-color .16s ease, color .16s ease}
  nav a:hover,nav button:hover,
  nav a:focus-visible,nav button:focus-visible{background:var(--orange);color:#fff;text-shadow:none}
  .nav a[aria-current="page"],.nav button[aria-current="page"]{background:var(--orange);color:#fff;text-shadow:none}
  .nav a[aria-current="page"]:hover,.nav button[aria-current="page"]:hover{background:var(--orange-deep);color:#fff}

  .langs button{color:var(--ink);background:transparent;transition:background-color .16s ease,color .16s ease}
  .langs button:hover{background:var(--orange);color:#fff}
  .langs button[aria-pressed="true"]{background:var(--orange);color:#fff}
  .langs button[aria-pressed="true"]:hover{background:var(--orange-deep)}
}

.menu-links a,.menu-links button{color:var(--ink)}
.menu-links a[aria-current="page"],.menu-links button[aria-current="page"]{color:#fff}

.mem-board{display:flex;justify-content:center}
.memory{margin-left:auto;margin-right:auto;justify-content:center}
.mem-levels{justify-content:center}
.memory-status{text-align:center}
#resetMemory{display:block;margin-left:auto;margin-right:auto}
.game-b .intro{text-align:center}
@media (max-width:960px){
}

.foot-social{display:flex;gap:14px;align-items:center}
.soc{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--orange);color:#5A3320;
  border:3px solid #5A3320;box-shadow:0 5px 0 #C96A16;transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease}
.soc svg{width:26px;height:26px;display:block}
.soc:hover,
.soc:focus-visible{background:#FFB25E;transform:translateY(3px);box-shadow:0 2px 0 #C96A16}

@media (max-width:900px){
  .foot-social{justify-content:center;margin-top:6px}
}
@media (max-width:700px){
  .soc{width:48px;height:48px;border-width:2px;box-shadow:0 4px 0 #C96A16}
  .soc svg{width:23px;height:23px}
}

.foot-grid{display:grid;grid-template-columns:1.4fr 1fr auto;gap:28px;align-items:start}
@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
  .foot-links{align-items:center}
}

.foot-links{flex-direction:column;gap:10px;align-items:flex-start}
@media (max-width:900px){
  .foot-links{flex-direction:row;justify-content:center;gap:18px}
}

.mem-board{display:block;position:relative;width:min(720px,100%);margin:0 auto}
.memory{width:100%;max-width:none;margin:0}
@media (max-width:960px){
  .mem-board{width:min(560px,100%)}
  .memory{max-width:none}
}

.rail{grid-template-columns:repeat(5,1fr);gap:18px}
.rail button{gap:0;position:relative;padding-bottom:22px}
.rail img{margin-bottom:0}
.rail-name{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;max-width:96%;
/*--border:3px solid var(--ink);--*/
border-radius:999px;background:var(--orange);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.02rem;line-height:1.1;white-space:nowrap;text-shadow:0 2px 0 rgba(90,51,32,.28);box-shadow:0 5px 0 #C96A16;transition:transform .16s ease, box-shadow .16s ease}
.rail button:hover .rail-name{transform:translateX(-50%) translateY(3px);box-shadow:0 2px 0 #C96A16}

@media (max-width:1024px){
  .rail{grid-template-columns:repeat(3,1fr);gap:16px}
  .rail-name{font-size:.94rem;padding:9px 15px;min-height:40px}
}
@media (max-width:700px){
  .rail li{flex:0 0 46%}
  .rail-name{font-size:.86rem;padding:8px 13px;min-height:38px;border-width:2px;box-shadow:0 4px 0 #C96A16}
  .rail button{padding-bottom:18px}
}

.game-e{background:#FFF8EC}
.game-e .lu-layout{margin-top:10px}

.game-head{align-items:center;gap:12px;margin-bottom:14px}
.game-head h3{display:inline-flex;align-items:center;margin:0;padding:12px 24px;border:4px solid var(--ink);border-radius:999px;background:var(--orange);color:#fff !important;font-family:var(--font-display);font-weight:800;font-size:1.72rem;line-height:1.15;text-shadow:0 2px 0 rgba(90,51,32,.28);box-shadow:0 6px 0 #C96A16}
.game-head .age{background:#FFF3E0;color:var(--ink-soft);font-size:.86rem;padding:7px 15px}

@media (max-width:900px){
  .game-head h3{font-size:1.4rem;padding:10px 20px;border-width:3px;box-shadow:0 5px 0 #C96A16}
}
@media (max-width:600px){
  .game-head h3{font-size:1.16rem;padding:9px 16px}
  .game-head .age{font-size:.78rem}
}

.games-menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px 22px}
.gcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border:4px solid var(--ink);border-radius:34px;overflow:hidden;box-shadow:0 10px 0 rgba(42,83,102,.18);transition:transform .18s ease, box-shadow .18s ease}
.gcard:hover,
.gcard:focus-visible{transform:translateY(-6px)}
.gcard-art{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--sky-2)}
.gcard-art img{width:100%;height:100%;object-fit:cover;display:block}
.gcard-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 24px;flex:1}
.gcard-title{font-family:var(--font-display);font-weight:800;font-size:1.32rem;line-height:1.15;color:var(--ink)}
.gcard-text{flex:1;color:var(--ink-soft);font-size:.96rem;line-height:1.5}
.gcard-cta{margin-top:6px;padding:11px 26px;border-radius:999px;background:var(--orange);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.02rem;text-shadow:0 2px 0 rgba(90,51,32,.28);transition:transform .16s ease, box-shadow .16s ease}
.gcard:hover .gcard-cta{transform:translateY(3px);box-shadow:0 2px 0 #C96A16}

@media (max-width:700px){
  .games-menu{grid-template-columns:1fr;gap:20px}
  .gcard{border-radius:26px;border-width:3px}
  .gcard-art{aspect-ratio:16/9;border-bottom-width:3px}
  .gcard-title{font-size:1.16rem}
}

.game-page .game-main{padding-top:8px}
.game-page .game-main > section{padding-top:6px}

.gback{display:inline-flex;align-items:center;gap:11px;margin:0 0 22px;padding:11px 22px 11px 14px;border:3px solid var(--ink);border-radius:999px;text-decoration:none;font-family:var(--font-display);font-weight:800;font-size:1rem;min-height:50px;transition:transform .14s ease, box-shadow .14s ease}
.gback:hover{transform:translateY(3px)}
.gback-arrow{width:26px;height:26px;border-radius:50%;position:relative;flex:0 0 auto}
.gback-arrow::before{content:"";position:absolute;left:10px;top:50%;width:8px;height:8px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:translateY(-50%) rotate(45deg)}

.game-page .game{margin-bottom:0}

.game-page .topbar{padding:16px 0 10px}
.game-page .topbar .wrap{position:relative}

@media (max-width:1280px){ }
@media (max-width:1024px){ }
@media (max-width:700px){
}

.game-page .game-main{padding-top:14px}
.gback{background:var(--orange);color:#fff;border-color:var(--ink);box-shadow:0 5px 0 #C96A16;text-shadow:0 2px 0 rgba(90,51,32,.28);position:relative;z-index:5;margin-bottom:26px}
.gback:hover{box-shadow:0 2px 0 #C96A16}
.gback-arrow{background:#fff}
.gback-arrow::before{border-color:var(--orange)}

.game-page .topbar{padding:34px 0 12px}
.game-page .topbar .brand{position:absolute;left:22px;top:-34px;grid-column:auto;justify-self:auto}
.game-page .topbar .brand .brand-logo{height:250px}

@media (max-width:1280px){
  .game-page .topbar{padding:30px 0 12px}
  .game-page .topbar .brand .brand-logo{height:206px}
}
@media (max-width:1100px){
  .game-page .topbar{padding:26px 0 10px}
  .game-page .topbar .brand .brand-logo{height:172px}
}
@media (max-width:1024px){
  .game-page .topbar{padding:20px 0 12px}
  .game-page .topbar .brand{position:relative;left:auto;top:-8px}
  .game-page .topbar .brand .brand-logo{height:112px}
}
@media (max-width:700px){
  .game-page .topbar{padding:16px 0 10px}
  .game-page .topbar .brand{top:-6px}
  .game-page .topbar .brand .brand-logo{height:86px}
}

.game-page .game-main{padding-top:10px}
.game-page .gback{display:inline-flex;margin-left:auto;margin-right:0}
.game-page .game-main .wrap > .gback{float:right;
  margin-bottom:20px}
.game-page .game-main .wrap > .game{clear:both}

@media (max-width:1024px){
  .game-page .game-main .wrap > .gback{float:none;display:inline-flex;margin-left:0}
  .game-page .game-main .wrap > .game{clear:none}
}

.gcard{border:0;box-shadow:0 10px 0 rgba(42,83,102,.18);text-align:center}
.gcard:hover,
.gcard:focus-visible{box-shadow:0 16px 0 rgba(42,83,102,.18)}
.gcard-art{border-bottom:0}
.gcard-body{align-items:center}
.gcard-title{width:100%}
.gcard-text{width:100%}
.gcard-cta{border:0;box-shadow:0 5px 0 #C96A16}

@media (max-width:700px){
  .gcard{border:0}
  .gcard-art{border-bottom:0}
}

body{font-size:18.5px;line-height:1.68}

.sec-head p{font-size:1.16rem}
.card p,
.media-card .body p,
.char-body p,
.game > p.intro,
.qlist li,
.step p,
.gcard-text{font-size:1.06rem;line-height:1.62}
.big-claim{line-height:1.35}

@media (max-width:900px){
  body{font-size:17.5px}
  .sec-head p{font-size:1.08rem}
  .card p,
  .media-card .body p,
  .char-body p,
  .game > p.intro,
  .qlist li,
  .step p,
  .gcard-text{font-size:1.02rem}
}

.sec-plate{position:relative;display:grid;justify-items:center;align-items:end;
  width:clamp(143px,15vw,188px);height:clamp(132px,13.9vw,174px);
  padding:0 18px 29%;border-radius:50%;background:#FFFDF6;color:var(--ink);box-shadow:none;filter:drop-shadow(0 9px 0 rgba(42,83,102,.16));text-align:center}

.sec-plate .eyebrow{display:none}

.sec-plate::before{content:"";position:absolute;z-index:-1;left:-33%;bottom:6%;width:60%;aspect-ratio:1;border-radius:50%;background:#FFFDF6}

.sec-plate::after{content:"";position:absolute;z-index:-1;right:-28%;bottom:14%;width:50%;aspect-ratio:1;border-radius:50%;background:#FFFDF6}

.sec-plate h2{margin:0;line-height:1.02;text-transform:uppercase;color:var(--ink);text-shadow:none}

.sec-head{text-align:left}
.sec-head .sec-plate{margin:0}

.view section:nth-of-type(odd) .sec-head{text-align:left}
.view section:nth-of-type(odd) .sec-plate{transform:rotate(-5deg)}
.view section:nth-of-type(even) .sec-head{text-align:right}
.view section:nth-of-type(even) .sec-plate{transform:rotate(5deg);margin-left:auto}
.view section:nth-of-type(even) .sec-head > p{margin-left:auto}
.sec-head > p{max-width:52ch}

#view-inicio .home-values-section .sec-plate{background:#FFFDF6;box-shadow:none}
#view-inicio .home-rail-section{position:relative;z-index:6;padding-top:56px}
#view-inicio .home-explore-section{z-index:3}
.sec-head{position:relative;z-index:2;margin-bottom:30px}

@media (max-width:700px){
  .sec-plate{width:132px;height:123px;padding:0 11px 28%}
  .sec-head,
  .view section:nth-of-type(odd) .sec-head,
  .view section:nth-of-type(even) .sec-head{text-align:center}
  .sec-head .sec-plate{margin-inline:auto}
  .view section:nth-of-type(even) .sec-head > p{margin-inline:auto}
  .sec-head > p{max-width:none}
}

.sec-plate h2{width:100%;text-align:center;
  margin-inline:auto;font-size:clamp(1.38rem,2.3vw,2.07rem);}
.sec-plate .eyebrow{text-align:center}

.sec-plate{text-align:center;padding-left:16px;padding-right:20px}

@media (max-width:700px){
}

.sec-plate{align-items:center;padding-top:0;padding-bottom:0}
@media (max-width:700px){
  .sec-plate{padding-top:0;padding-bottom:0}
}

.sec-plate h2{font-size:clamp(1.72rem,2.9vw,2.59rem);line-height:1;text-align:center;transform:translateY(3%)}
.sec-plate{align-items:center}
@media (max-width:700px){
}

.sec-plate h2{font-size:clamp(2.15rem,3.6vw,3.24rem);line-height:.98;overflow-wrap:anywhere}
.sec-plate{padding-left:8px;padding-right:12px}
@media (max-width:700px){
}

.sec-plate{overflow:visible}
.sec-plate h2{width:100%;max-width:100%;font-size:clamp(2.04rem,3.42vw,3.08rem);
  line-height:.98;text-align:center;white-space:normal;overflow-wrap:normal;
  word-break:normal;hyphens:none}
@media (max-width:700px){
  .sec-plate h2{font-size:1.71rem}
}

.sec-plate{padding-left:0;padding-right:15px}

.sec-plate h2[data-t="st.h2"]{font-size:clamp(1.06rem,1.72vw,1.5rem);line-height:1.12;letter-spacing:0}

@media (max-width:700px){
}

.sec-plate h2[data-t="st.h2"]{font-size:clamp(1.5rem,2.45vw,2.15rem);line-height:.96}
@media (max-width:700px){
  .sec-plate h2[data-t="st.h2"]{font-size:1.28rem}
}

.sec-plate{padding-left:0;padding-right:6px}
.sec-plate h2{transform:translateY(10%)}

.sec-plate h2[data-t="about.watch.h2"]{font-size:clamp(1.5rem,2.45vw,2.15rem);line-height:.98}

@media (max-width:700px){
  .sec-plate{padding-left:0;padding-right:4px}
  .sec-plate h2[data-t="about.watch.h2"]{font-size:1.28rem}
}

.sec-plate{padding-left:0;padding-right:0}
.sec-plate h2{letter-spacing:0;
  transform:translate(-2.5%,10%)}

.sec-plate h2{min-width:0;
  transform:translate(-5px,10%)}
@media (max-width:700px){
  .sec-plate h2{transform:translate(-3px,10%)}
}

.sec-plate h2{position:relative;z-index:1;isolation:isolate}
.sec-plate h2::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:1%;
  top:50%;
  width:1.3em;
  aspect-ratio:1;
  transform:translate(-12%,-52%) rotate(-11deg);
  background:#F7C68D;
  -webkit-mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;
  mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;
  pointer-events:none;
}

h1,h2,h3,h4,
.nav a,.nav button,.langs button,.btn,
.sec-plate h2,.uga-motto,
.game-head h3,.gcard-title,.gcard-cta,
.tile-cta,.rail-name,.mem-level,
.menu-links a,.menu-links button,.menu-langs button,
.home-cta,.gback{font-synthesis:none;-webkit-text-stroke:.75px currentColor;paint-order:stroke fill}

.nav a,.nav button,.langs button,.mem-level,
.gcard-cta,.tile-cta,.rail-name{-webkit-text-stroke:.45px currentColor}

:root{--ink-text:#7A4A28}

.sec-plate h2{color:var(--ink-text)}

h1,h2,h3,h4,
.card h3,.char-body h3,.game-head h3,
.gcard-title,.tile-body h3,.rail-name,
.big-claim,.step h3,
.qbox h3,.sheet h4,
.mem-level,.btn,
.emo-card span,.tag,
.foot-grid p,.legal{color:var(--ink-text)}

body{color:var(--ink-text)}

.game-head h3,
.gcard-cta,.tile-cta,.rail-name,
.home-cta-primary,.menu-links a[aria-current="page"],.menu-links button[aria-current="page"],
.mem-level[aria-pressed="true"],
.nav a[aria-current="page"],.nav button[aria-current="page"],
.langs button[aria-pressed="true"],
.gback{color:#fff}
.nav a,.nav button,.langs button,.menu-links a,.menu-links button{color:var(--ink-text)}

body.character-dialog-open{overflow:hidden}

.character-overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(16px,4vw,48px);background:rgba(73,40,23,.48);opacity:0;transition:opacity .28s ease}
.character-overlay[hidden]{display:none}
.character-overlay.is-visible{opacity:1}
.character-overlay.is-leaving{opacity:0}

.character-dialog{position:relative;width:min(920px,100%);max-height:calc(100svh - clamp(32px,8vw,96px));overflow:visible;border:0;outline:0;border-radius:44px;background:#fff;box-shadow:0 18px 0 rgba(58,33,19,.25),0 28px 70px rgba(58,33,19,.28);opacity:0;transform:translateY(46px) scale(.72) rotate(-4deg)}
.character-overlay.is-visible .character-dialog{opacity:1;transform:translateY(0) scale(1) rotate(0);animation:characterCardPop .52s cubic-bezier(.2,.8,.25,1) both}
.character-overlay.is-closing .character-dialog{animation:none;opacity:1;transform:translateY(-7px) scale(1.045) rotate(.7deg);transition:transform .11s ease-out}
.character-overlay.is-leaving .character-dialog{animation:none;opacity:0;transform:translateY(34px) scale(.72) rotate(3deg);transition:transform .24s cubic-bezier(.55,0,.95,.35),opacity .17s ease .04s}

@keyframes characterCardPop{
  0%{opacity:0;transform:translateY(46px) scale(.72) rotate(-4deg)}
  62%{opacity:1;transform:translateY(-8px) scale(1.08) rotate(1deg)}
  82%{opacity:1;transform:translateY(3px) scale(.98) rotate(-.35deg)}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}

.character-dialog-content{max-height:inherit;overflow:hidden;border-radius:44px;background:#fff}
.character-modal-card{display:grid;grid-template-columns:minmax(280px,44%) 1fr;width:100%;max-height:inherit;overflow:auto;border-radius:0;box-shadow:none !important;transform:none !important;background:#fff}
.character-modal-card:hover{transform:none !important;box-shadow:none !important}
.character-modal-card .char-art{min-height:100%;aspect-ratio:auto;background:var(--sky-2)}
.character-modal-card .char-art img{width:100%;height:100%;min-height:100%;object-fit:cover;transform:none !important}
.character-modal-card .char-body{display:flex;flex-direction:column;justify-content:center;padding:76px 42px 40px;text-align:left}
.character-modal-card .char-body h3{margin:0 0 8px;text-align:left;font-size:clamp(2rem,4vw,3rem)}
.character-modal-card .char-role{margin:0 0 14px;text-align:left}
.character-modal-card .char-body p{text-align:left}
.character-modal-card .tags{justify-content:flex-start}

.character-dialog-close{position:absolute;top:-20px;right:-20px;z-index:4;display:inline-flex;align-items:center;gap:7px;min-height:48px;padding:8px 16px 8px 11px;border:3px solid var(--ink);border-radius:999px;background:var(--orange);color:#fff;font-family:var(--font-display);font-weight:800;box-shadow:0 5px 0 var(--orange-deep);transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}
.character-dialog-close:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--orange-deep);background:#FFAA55}
.character-dialog-close-icon{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#fff;color:var(--orange-deep);font-family:system-ui,sans-serif;font-size:1.55rem;font-weight:700;line-height:1}

@media (max-width:700px){
  .character-overlay{padding:18px 14px}
  .character-dialog{width:100%;max-height:calc(100svh - 36px);border-radius:32px}
  .character-dialog-content{border-radius:32px}
  .character-modal-card{grid-template-columns:1fr}
  .character-modal-card .char-art{min-height:0;aspect-ratio:16/10}
  .character-modal-card .char-art img{min-height:0}
  .character-modal-card .char-body{padding:30px 24px 32px}
  .character-modal-card .char-body h3{font-size:2rem}
  .character-dialog-close{top:-10px;right:-5px;min-height:44px;padding:6px 12px 6px 8px}
  .character-dialog-close-icon{width:25px;height:25px;font-size:1.4rem}
}

@media (prefers-reduced-motion:reduce){
  .character-overlay,
  .character-dialog{transition:none;animation:none !important}
}

:root{

  --uga-cloud-s1-far:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 161 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='161' height='100' fill='black'/%3E%3Ccircle cx='83' cy='50' r='50' fill='white'/%3E%3Ccircle cx='30' cy='64' r='30' fill='white'/%3E%3Ccircle cx='136' cy='61' r='25' fill='white'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='161' height='100' fill='%23B7F8FF' mask='url(%23m)'/%3E%3C/svg%3E");--uga-cloud-s1-mid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 161 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='161' height='100' fill='black'/%3E%3Ccircle cx='83' cy='50' r='50' fill='white'/%3E%3Ccircle cx='30' cy='64' r='30' fill='white'/%3E%3Ccircle cx='136' cy='61' r='25' fill='white'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='161' height='100' fill='%23CCFAFF' mask='url(%23m)'/%3E%3C/svg%3E");--uga-cloud-s1-near:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 161 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='161' height='100' fill='black'/%3E%3Ccircle cx='83' cy='50' r='50' fill='white'/%3E%3Ccircle cx='30' cy='64' r='30' fill='white'/%3E%3Ccircle cx='136' cy='61' r='25' fill='white'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='161' height='100' fill='%23E5FCFF' mask='url(%23m)'/%3E%3C/svg%3E");
  --uga-cloud-s2-far:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 161 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='161' height='100' fill='black'/%3E%3Ccircle cx='83' cy='50' r='50' fill='white'/%3E%3Ccircle cx='30' cy='64' r='30' fill='white'/%3E%3Ccircle cx='136' cy='61' r='25' fill='white'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='161' height='100' fill='%23C8FBFF' mask='url(%23m)'/%3E%3C/svg%3E");--uga-cloud-s2-mid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 161 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='161' height='100' fill='black'/%3E%3Ccircle cx='83' cy='50' r='50' fill='white'/%3E%3Ccircle cx='30' cy='64' r='30' fill='white'/%3E%3Ccircle cx='136' cy='61' r='25' fill='white'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='161' height='100' fill='%23D8FCFF' mask='url(%23m)'/%3E%3C/svg%3E");--uga-cloud-s2-near:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 161 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='161' height='100' fill='black'/%3E%3Ccircle cx='83' cy='50' r='50' fill='white'/%3E%3Ccircle cx='30' cy='64' r='30' fill='white'/%3E%3Ccircle cx='136' cy='61' r='25' fill='white'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='161' height='100' fill='%23EBFEFF' mask='url(%23m)'/%3E%3C/svg%3E");
  --uga-cloud-s3-far:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 161 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='161' height='100' fill='black'/%3E%3Ccircle cx='83' cy='50' r='50' fill='white'/%3E%3Ccircle cx='30' cy='64' r='30' fill='white'/%3E%3Ccircle cx='136' cy='61' r='25' fill='white'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='161' height='100' fill='%23A1EEFF' mask='url(%23m)'/%3E%3C/svg%3E");--uga-cloud-s3-mid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 161 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='161' height='100' fill='black'/%3E%3Ccircle cx='83' cy='50' r='50' fill='white'/%3E%3Ccircle cx='30' cy='64' r='30' fill='white'/%3E%3Ccircle cx='136' cy='61' r='25' fill='white'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='161' height='100' fill='%23BCF3FF' mask='url(%23m)'/%3E%3C/svg%3E");--uga-cloud-s3-near:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 161 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='161' height='100' fill='black'/%3E%3Ccircle cx='83' cy='50' r='50' fill='white'/%3E%3Ccircle cx='30' cy='64' r='30' fill='white'/%3E%3Ccircle cx='136' cy='61' r='25' fill='white'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='161' height='100' fill='%23DDF9FF' mask='url(%23m)'/%3E%3C/svg%3E")}

.view section:not(.hero-block):not(.home-values-section):not(.home-conversation-section){--uga-cloud-far:var(--uga-cloud-s1-far);--uga-cloud-mid:var(--uga-cloud-s1-mid);--uga-cloud-near:var(--uga-cloud-s1-near);background-image:
    var(--uga-cloud-near),
    var(--uga-cloud-near),
    var(--uga-cloud-far),
    var(--uga-cloud-mid),
    var(--uga-cloud-far);background-repeat:no-repeat;background-position:
    -70px 12%,
    calc(100% + 70px) 40%,
    5% 82%,
    94% 73%,
    52% 94%;background-size:
    320px auto,
    385px auto,
    145px auto,
    195px auto,
    105px auto}

.view section:nth-of-type(4n+2):not(.hero-block):not(.home-values-section):not(.home-conversation-section){--uga-cloud-far:var(--uga-cloud-s2-far);--uga-cloud-mid:var(--uga-cloud-s2-mid);--uga-cloud-near:var(--uga-cloud-s2-near)}
.view section:nth-of-type(4n+4):not(.hero-block):not(.home-values-section):not(.home-conversation-section){--uga-cloud-far:var(--uga-cloud-s3-far);--uga-cloud-mid:var(--uga-cloud-s3-mid);--uga-cloud-near:var(--uga-cloud-s3-near)}

#view-inicio .home-explore-section{--uga-cloud-far:var(--uga-cloud-s3-far);--uga-cloud-mid:var(--uga-cloud-s3-mid);--uga-cloud-near:var(--uga-cloud-s3-near)}

.view section:nth-of-type(even):not(.hero-block):not(.home-values-section):not(.home-conversation-section){background-position:
    calc(100% + 55px) 12%,
    -85px 44%,
    92% 82%,
    6% 70%,
    47% 96%;background-size:
    335px auto,
    400px auto,
    135px auto,
    185px auto,
    100px auto}

.view section:nth-of-type(3n):not(.hero-block):not(.home-values-section):not(.home-conversation-section){background-position:
    -80px 42%,
    calc(100% + 75px) 15%,
    7% 76%,
    92% 88%,
    55% 95%}

@media (max-width:700px){
  .view section:not(.hero-block):not(.home-values-section):not(.home-conversation-section),
  .view section:nth-of-type(even):not(.hero-block):not(.home-values-section):not(.home-conversation-section),
  .view section:nth-of-type(3n):not(.hero-block):not(.home-values-section):not(.home-conversation-section){background-position:
      -58px 11%,
      calc(100% + 62px) 46%,
      4% 88%,
      96% 74%,
      50% 96%;background-size:
      205px auto,
      255px auto,
      92px auto,
      128px auto,
      72px auto}
}

@font-face{
  font-family:"Baloo 2";
  src:url("../fonts/baloo-2-latin.woff2") format("woff2");
  font-weight:500 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Nunito";
  src:url("../fonts/nunito-latin.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Cute Dino Unified";
  src:url("../fonts/Cute_Dino.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Cute Dino Unified";
  src:url("../fonts/Cute_Dino.ttf") format("truetype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Cute Dino Unified";
  src:url("../fonts/Cute_Dino.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Cute Dino Unified";
  src:url("../fonts/Cute_Dino.ttf") format("truetype");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
:root{--font-display:"Cute Dino Unified","Baloo 2","Nunito",
    ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;
  --font-body:"Nunito",ui-rounded,"SF Pro Text","Segoe UI",
    system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
body{font-family:var(--font-body)}

#emoGrid:empty{min-height:220px}
@media (max-width:1024px){#emoGrid:empty{min-height:440px}}
@media (max-width:700px){#emoGrid:empty{min-height:660px}}

:root{--uga-grass-height:96px;--uga-tree-sink:25px}

.grass{height:var(--uga-grass-height);margin-top:0;background:linear-gradient(180deg,#8FD44B,#7CC63A);position:relative;overflow:visible;isolation:auto}

.grass::before{content:"";position:absolute;z-index:2;top:-24px;right:0;left:0;height:48px;background:radial-gradient(circle at 24px 24px,#8FD44B 23px,transparent 24px) repeat-x;background-size:48px 48px;pointer-events:none}

.grass::after{content:"";position:absolute;z-index:3;inset:0;background:linear-gradient(180deg,#8FD44B,#7CC63A);pointer-events:none}

.footer-landscape{position:absolute;z-index:1;pointer-events:none}

.view section > .footer-landscape{right:0;bottom:calc(0px - var(--uga-grass-height));left:0;height:var(--uga-grass-height)}

.grass > .footer-landscape{inset:0}

.footer-tree{position:absolute;bottom:calc(100% - var(--tree-sink,var(--uga-tree-sink)));left:var(--tree-x,50%);width:var(--tree-size,220px);height:auto;overflow:visible;transform-origin:50% 100%;transform:translateX(-50%) rotate(var(--tree-rotation,0deg))}
.footer-tree-left{z-index:1;--tree-x:15%;--tree-size:clamp(230px,20vw,350px);--tree-rotation:-5deg}
.footer-tree-right{z-index:1;--tree-x:85%;--tree-size:clamp(230px,20vw,350px);--tree-rotation:5deg}
.footer-tree-far{z-index:0;--tree-sink:10px;--tree-x:50%;--tree-size:clamp(150px,13.2vw,230px);--tree-rotation:-7deg}
.footer-tree[hidden]{display:none!important}

.view section > .wrap{position:relative;z-index:6}

body.is-home-view .footer-landscape,
body:has(#view-inicio:not([hidden])) .footer-landscape{display:none}

footer{position:relative;z-index:4}

@media (max-width:700px){
  :root{--uga-grass-height:86px;--uga-tree-sink:21px}
  .grass::before{top:-20px;height:40px;background:radial-gradient(circle at 20px 20px,#8FD44B 19px,transparent 20px) repeat-x;background-size:40px 40px}
}

@media (max-width:639px){
  .footer-tree-left{--tree-x:50%;--tree-size:clamp(145px,42vw,180px);--tree-rotation:-3deg}
  .footer-tree-far,.footer-tree-right{display:none}
}

body.is-home-view .grass,
body:has(#view-inicio:not([hidden])) .grass{height:96px;background:linear-gradient(180deg,#8FD44B,#7CC63A);overflow:visible;isolation:auto}

.uga-kite-layer{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none;contain:layout paint style}

.uga-kite{position:absolute;top:0;left:0;width:var(--uga-kite-size,90px);height:auto;margin:0;padding:0;border:0;background:transparent;color:#69452F;line-height:0;pointer-events:auto;touch-action:manipulation;cursor:pointer;will-change:transform;transform-origin:50% 34%;-webkit-tap-highlight-color:transparent}

.uga-kite svg{display:block;width:100%;height:auto;overflow:visible}
.uga-kite:focus-visible{outline:3px solid #69452F;outline-offset:5px;border-radius:18px}

@media (prefers-reduced-motion:reduce){
  .uga-kite-layer{display:none!important}
}

@media print{
  .uga-kite-layer{display:none!important}
}

.char-art{aspect-ratio:16/10;overflow:hidden}
.char-art img{width:100%;height:100%;object-fit:cover}
.media-card > img{aspect-ratio:16/10;object-fit:cover;width:100%}
.band > img{aspect-ratio:21/9;object-fit:cover;width:100%}
.poster img{aspect-ratio:16/9;object-fit:cover;width:100%}
.sheet-img{aspect-ratio:16/9;object-fit:contain}
.gcard-art img,.rail img,.tile-art img{width:100%;height:100%;object-fit:cover}

body{font-synthesis-weight:auto}

.nav a,.menu-links a,.foot-links a{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.menu-links a{width:100%}

.rail-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  position:relative;
  padding-bottom:22px;
  width:100%;
  text-decoration:none;
  color:inherit;
}
.rail-link:hover img{transform:translateY(-5px) scale(1.02)}
.rail-link:hover .rail-name{
  transform:translateX(-50%) translateY(3px);
  box-shadow:0 2px 0 #C96A16;
}

.char[id]{scroll-margin-top:150px}
@media (max-width:1024px){ .char[id]{scroll-margin-top:110px} }

.view{
  animation:none;
  opacity:1;
}

.grass{position:relative;z-index:auto;isolation:auto}
.footer-landscape{z-index:auto}
.footer-tree,.footer-tree-left,.footer-tree-right{z-index:1}
.footer-tree-far{z-index:0}

.view section > .wrap{position:relative;z-index:6}
.view section :is(.chars,.tiles,.rail,.games-menu,.grid-2,.grid-3,.grid-6,
                  .card,.media-card,.char,.game,.gcard,.qbox,.steps,.sheet,.emo-card){
  position:relative;
  z-index:6;
}

.footer-tree{
  transition:filter .3s ease;
}
.footer-tree-left,
.footer-tree-right{                 
  filter:saturate(.96) brightness(1.01) hue-rotate(-3deg);
  opacity:.98;
}
.footer-tree-far{                   
  filter:saturate(.55) brightness(1.16) hue-rotate(-12deg);
  opacity:.62;
}
@media (max-width:639px){
  
  .footer-tree-left{filter:none;opacity:1}
}

.character-modal-card{position:relative;z-index:0}
.character-dialog-content{position:relative;z-index:0}
.character-dialog-close{z-index:12}

@media print{
  #print-area img{
    width:100%;
    height:auto;
    max-height:80vh;
    object-fit:contain;
    page-break-inside:avoid;
  }
  #print-area{display:block!important}
}

@media (max-width:1024px){
  .langs{display:none !important}
  .topbar .wrap{justify-content:space-between}
}

#view-inicio .hero-art img{
  animation:ugaPeek 30s infinite;   /* sin retardo inicial */
}

.friends-carousel{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  column-gap:clamp(5px,1.4vw,14px);
  isolation:isolate;
}
.friends-carousel .rail{
  --friends-gap:18px;
  --friends-safe-space:16px;
  --friends-min-card:154px;
  --friends-card-width:calc((100% - 2*var(--friends-gap))/3);
  display:flex;
  flex-wrap:nowrap;
  grid-column:2;
  gap:var(--friends-gap);
  min-width:0;
  width:100%;
  margin:0;
  padding:8px var(--friends-safe-space) 24px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--friends-safe-space);
  scroll-behavior:smooth;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
  user-select:none;
}
.friends-carousel .rail::-webkit-scrollbar{display:none}
.friends-carousel .rail li{
  flex:0 0 var(--friends-card-width);
  min-width:0;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.friends-carousel .rail img{
  width:100%;
  height:auto;
  aspect-ratio:1;
  box-sizing:border-box;
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;
}
.friends-carousel .rail button{cursor:grab}
.friends-carousel .rail.is-dragging{
  scroll-snap-type:none;
  scroll-behavior:auto;
  cursor:grabbing;
}
.friends-carousel .rail.is-dragging button{cursor:grabbing}

.friends-arrow{
  flex:0 0 auto;
  width:46px;height:46px;
  display:grid;place-items:center;
  border:0;
  border-radius:50%;
  background:var(--orange);
  cursor:pointer;
  box-shadow:0 5px 0 var(--orange-deep);
  transition:transform .16s ease,opacity .16s ease;
}
.friends-arrow::before{content:none}
.friends-arrow::after{content:none}
.friends-arrow > span:first-child{
  position:relative;
  z-index:1;
  display:block;
  transform:translateY(-4%);
  color:#fff;
  text-shadow:0 2px 0 rgba(90,51,32,.24);
}
.friends-arrow-prev{grid-column:1;left:auto}
.friends-arrow-next{grid-column:3;right:auto}
.friends-arrow-prev > span:first-child{transform:translateY(-4%)}
.friends-arrow:hover:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #C96A16}
.friends-arrow:disabled{opacity:.32;cursor:default}

@media (max-width:700px){
  .friends-carousel{column-gap:5px}
  .friends-carousel .rail{--friends-gap:12px;--friends-safe-space:12px;gap:var(--friends-gap);margin:0;padding:6px var(--friends-safe-space) 20px}
  .friends-arrow{border-width:2px;box-shadow:0 4px 0 #C96A16}
  .friends-carousel .rail-name{max-width:100%;min-height:31px;padding:5px 4px;font-size:clamp(.56rem,2.5vw,.72rem);border-width:2px;box-shadow:0 3px 0 #C96A16}
}

@media (max-width:651px){
  .friends-carousel .rail{--friends-card-width:calc((100% - var(--friends-gap))/2)}
}
@media (max-width:485px){
  .friends-carousel .rail{--friends-card-width:100%}
  .friends-carousel .rail-name{padding-inline:12px;font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
  .friends-carousel .rail{scroll-behavior:auto}
}

.game-page .game-head h3,
.games-menu .gcard-title{
  position:relative;
  z-index:1;
  isolation:isolate;
  display:inline-block;
  width:auto;
  max-width:100%;
  padding:.2em .12em !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  color:var(--ink-text) !important;
  text-shadow:none !important;
  box-shadow:none !important;
}
.games-menu .gcard-title{align-self:center}
.game-page .game-head h3::before,
.games-menu .gcard-title::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-.12em;
  top:50%;
  width:1.35em;
  aspect-ratio:1;
  transform:translate(-8%,-52%) rotate(-11deg);
  background:#F7C68D;
  -webkit-mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;
  mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;
  pointer-events:none;
}

#view-inicio .home-values-section::after,
#view-inicio .home-conversation-section::after{
  content:"";
  display:block !important;
  position:absolute;
  z-index:0;
  right:clamp(18px,5vw,86px);
  top:30%;
  width:clamp(92px,11vw,158px);
  aspect-ratio:1;
  background:color-mix(in srgb,var(--band) 90%,var(--ink) 10%);
  -webkit-mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;
  mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;
  transform:rotate(13deg);
  pointer-events:none;
}
#view-inicio .home-conversation-section::after{
  left:clamp(18px,5vw,86px);
  right:auto;
  top:62%;
  width:clamp(78px,9vw,132px);
  transform:rotate(-14deg);
}
#view-inicio .home-values-section > *,
#view-inicio .home-conversation-section > *{position:relative;z-index:1}
@media (max-width:700px){
  #view-inicio .home-values-section::after,
  #view-inicio .home-conversation-section::after{width:82px;right:14px}
  #view-inicio .home-conversation-section::after{left:14px;right:auto;top:70%;width:70px}
}

.ep-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:24px 20px;
  margin-top:26px;
}
.ep-card{
  display:flex;
  flex-direction:column;
  padding:0;
  border:0;
  border-radius:28px;
  overflow:hidden;
  background:#fff;
  color:var(--ink-text,#7A4A28);
  text-align:left;
  cursor:pointer;
  box-shadow:0 9px 0 rgba(42,83,102,.17);
  transition:transform .18s ease, box-shadow .18s ease;
}
.ep-card:hover,
.ep-card:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 15px 0 rgba(42,83,102,.17);
}

.ep-card-art{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  background:var(--sky-2,#B8FAFF);
  overflow:hidden;
}
.ep-card-art img{width:100%;height:100%;object-fit:cover;display:block}

.ep-card-play{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.86);
  width:58px;height:58px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--orange);
  opacity:.92;
  transition:transform .18s ease, opacity .18s ease;
}
.ep-card-play::before{
  content:"";
  width:0;height:0;
  margin-left:5px;
  border-left:20px solid #fff;
  border-top:13px solid transparent;
  border-bottom:13px solid transparent;
}
.ep-card:hover .ep-card-play{transform:translate(-50%,-50%) scale(1);opacity:1}

.ep-card-body{
  display:flex;
  align-items:baseline;
  padding:15px 18px 19px;
}
.ep-card-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.06rem;
  line-height:1.2;
}

@media (max-width:700px){
  .ep-list{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px 14px}
  .ep-card{border-radius:22px}
  .ep-card-body{padding:12px 14px 16px}
  .ep-card-title{font-size:.96rem}
  .ep-card-play{width:48px;height:48px}
  .ep-card-play::before{border-left-width:17px;border-top-width:11px;border-bottom-width:11px}
}

.epcard{
  position:fixed;
  inset:0;
  z-index:300;                    
  display:grid;
  place-items:center;
  padding:clamp(12px,4vw,44px);
  background:rgba(42,26,15,.55);
  opacity:0;
  transition:opacity .2s ease;
}
.epcard.is-open{opacity:1}
.epcard.is-closing{opacity:0}
body.has-epcard{overflow:hidden}

.epcard-box{
  position:relative;
  width:min(920px,100%);
  max-height:calc(100dvh - 2 * clamp(12px,4vw,44px));
  display:flex;
  flex-direction:column;
  border-radius:34px;
  background:#FFFDF6;
  overflow:hidden;                
  transform:scale(.88) translateY(14px);
  transition:transform .26s cubic-bezier(.2,1.35,.4,1);
}
.epcard.is-open .epcard-box{transform:scale(1) translateY(0)}
.epcard.is-open.is-anticipating .epcard-box{
  transform:scale(1.035) translateY(-5px);
  transition:transform .09s ease-out;
}
.epcard.is-closing .epcard-box{
  transform:scale(.94) translateY(6px);
  transition:transform .2s cubic-bezier(.5,0,.9,.4);
}

.epcard-close{
  position:absolute;
  top:14px;right:14px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:46px;
  padding:8px 18px 8px 12px;
  border:0;
  border-radius:999px;
  background:var(--orange);
  color:#fff;
  font-family:var(--font-display);
  font-weight:800;
  font-size:.95rem;
  cursor:pointer;
}
.epcard-close span[aria-hidden]{font-size:1.5rem;line-height:1}
.epcard-close:hover{background:#FFAA55}

.epcard-body{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:22px;
  overflow-y:auto;                
  overscroll-behavior:contain;
}
.epcard-title{
  margin:0;
  padding-right:120px;            
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.2rem,2.6vw,1.7rem);
  line-height:1.15;
  color:var(--ink-text,#7A4A28);
}

.epcard-stage{width:100%}
.epcard-poster{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  border-radius:24px;
  overflow:hidden;
  background:#000;
  cursor:pointer;
  aspect-ratio:16/9;
}
.epcard-poster img{width:100%;height:100%;object-fit:cover;display:block}
.epcard-play{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:rgba(42,26,15,.28);
  color:#fff;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.05rem;
  transition:background-color .18s ease;
}
.epcard-poster:hover .epcard-play{background:rgba(42,26,15,.14)}
.epcard-play-icon{
  width:84px;height:84px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--orange);
  transition:transform .18s ease;
}
.epcard-play-icon::before{
  content:"";
  width:0;height:0;
  margin-left:8px;
  border-left:30px solid #fff;
  border-top:20px solid transparent;
  border-bottom:20px solid transparent;
}
.epcard-poster:hover .epcard-play-icon{transform:scale(1.07)}

.epcard-frame{
  width:100%;
  aspect-ratio:16/9;
  border-radius:24px;
  overflow:hidden;
  background:#000;
}
.epcard-frame iframe{width:100%;height:100%;border:0;display:block}

.epcard-desc{
  margin:0;
  color:var(--ink-soft);
  font-size:1.02rem;
  line-height:1.55;
  white-space:pre-line;             
  overflow-wrap:anywhere;         
}

@media (max-width:700px){
  .epcard{padding:10px}
  .epcard-box{width:100%;border-radius:26px}
  .epcard-body{padding:16px;gap:13px}
  .epcard-title{padding-right:96px;font-size:1.06rem}
  .epcard-close{top:10px;right:10px;min-height:42px;padding:7px 14px 7px 9px;font-size:.86rem}
  .epcard-play-icon{width:64px;height:64px}
  .epcard-play-icon::before{border-left-width:23px;border-top-width:15px;border-bottom-width:15px}
  .ep-title{font-size:1rem;padding:12px 16px 12px 12px;gap:12px}
  .ep-title-play{width:38px;height:38px}
  .ep-title-play::before{border-left-width:13px;border-top-width:8px;border-bottom-width:8px}
}

@media (prefers-reduced-motion:reduce){
  .epcard,.epcard-box{transition:none}
  .epcard-box{transform:none}
}


/* =========================================================================
   UGA · CAPA DE AMPLIACIÓN
   =========================================================================
   Todo lo añadido después del diseño original vive aquí, en un solo
   bloque y ordenado por temas. Antes estaba repartido en ocho parches
   sucesivos que se pisaban entre sí: 23 propiedades se declaraban dos y
   tres veces para el mismo selector, y ganaba la última por casualidad.

   Los valores que se repiten están arriba, en variables. Para cambiar
   un color o un radio se toca UN sitio.

   No se ha modificado nada del CSS anterior a esta línea.
   ========================================================================= */

:root{
  /* --- superficies --- */
  --paper:#FFFDF6;              /* tarjetas y documentos */
  --paper-warm:#FFF3E0;         /* avisos y llamadas a la acción */
  --line-soft:#F1E5D6;          /* separadores dentro de las tarjetas */

  /* --- sombras planas, la firma visual de la casa --- */
  --shadow-sm:0 8px 0 rgba(42,83,102,.14);
  --shadow-md:0 10px 0 rgba(42,83,102,.17);

  /* --- radios --- */
  --r-sm:24px;
  --r-md:30px;
  --r-lg:34px;

  /* --- la huella, usada como recorte en media web --- */
  --paw:url("../img/uga-paw.svg?v=108");
  --uga-shape:url("../img/uga-silhouette.png?v=1");

  /* --- cuánto se aclara el fondo bajo los textos --- */
  --band-lift:42%;
}

/* El fondo suave de cada sección se calcula a partir de SU propia banda,
   así que cambia solo cuando cambia la sección. Si el navegador no
   entiende color-mix, el respaldo de más abajo hace lo mismo con un velo
   blanco por encima. */
.view section{
  --band-soft:color-mix(in srgb, var(--band, var(--sky-1)) calc(100% - var(--band-lift)), #fff);
}


/* =========================================================================
   1 · TEXTO DE ENTRADA BAJO EL TÍTULO
   -------------------------------------------------------------------------
   La nube del título mide 174px de alto con el texto centrado, así que por
   debajo sobran unos 50px de aire dentro del propio elemento. Se recorta
   con margen negativo en la nube, que arrastra lo que viene detrás.

   El fondo es la misma banda de la sección, aclarada: el bloque recoge el
   texto sin introducir un color nuevo.
   ========================================================================= */
.sec-head{margin-bottom:26px}
.sec-head .sec-plate{position:relative;z-index:3;margin-bottom:-64px}

.sec-head > p{
  position:relative;
  z-index:1;                       /* por debajo de la nube */
  margin-top:0;
  /* el relleno superior solo tiene que librar la parte de la nube
     que de verdad pisa el bloque, no toda su altura */
  padding:40px 26px 20px 26px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.42);        /* respaldo universal */
  box-shadow:var(--shadow-sm);
  color:var(--ink-text,#7A4A28);
  font-size:1.04rem;
  line-height:1.62;
}
@supports (background:color-mix(in srgb, red 50%, white)){
  .sec-head > p{background:var(--band-soft)}
}

/* La huella cierra el párrafo en lugar de abrirlo: va en línea
   con la última palabra, como un punto final. Al ser
   `display:inline-block` acompaña al texto y nunca queda
   descolgada, se rompa donde se rompa la línea. */
.sec-head > p::after{
  content:"";
  display:inline-block;
  vertical-align:-4px;
  margin-left:10px;
  width:24px;
  height:24px;
  transform:rotate(-12deg);
  -webkit-mask:var(--paw) center/contain no-repeat;
  mask:var(--paw) center/contain no-repeat;
  background-color:var(--orange);
  opacity:.85;
}

.view section:nth-of-type(odd) .sec-head > p{margin-left:0}
.view section:nth-of-type(even) .sec-head > p{margin-right:0}


/* =========================================================================
   2 · LAS TRES PREGUNTAS
   -------------------------------------------------------------------------
   El título usaba el naranja de los encabezados, que sobre el marrón de la
   caja da 2,88:1 — ilegible. En crema sube a 10,59:1.
   ========================================================================= */
.qbox h3,
.qbox p,
.qbox .doc-lead{color:var(--cream);text-shadow:none}

.qlist li::before{
  opacity:1;
  background:none;
  -webkit-mask:var(--paw) center/contain no-repeat;
  mask:var(--paw) center/contain no-repeat;
  background-color:#FFE9C9;        /* 9,2:1 sobre el marrón */
}


/* =========================================================================
   3 · LISTA NUMERADA CON FORMA DE HUELLA
   -------------------------------------------------------------------------
   El número se apoya en la almohadilla grande, que queda en la mitad
   inferior de la huella; de ahí el relleno superior.
   ========================================================================= */
.step::before{
  width:58px;
  height:58px;
  font-size:1.34rem;
  border-radius:0;
  background:none !important;
  -webkit-mask:var(--paw) center/contain no-repeat;
  mask:var(--paw) center/contain no-repeat;
  background-color:var(--orange) !important;
  color:#fff;
  transform:rotate(-8deg);
  padding-top:16%;
  text-shadow:0 2px 0 rgba(140,74,20,.45);
}


/* =========================================================================
   4 · EMOCIONES · la silueta de Uga, teñida y pulsable
   -------------------------------------------------------------------------
   La silueta se usa como recorte, no como imagen: el color lo pone la
   variable --emo y un solo archivo sirve para las seis. Añadir una emoción
   es añadir un color, no un dibujo.

   Nada cambia de tamaño al pulsar. El texto se oculta con `visibility`,
   que conserva el espacio reservado, así que la altura es idéntica abierta
   o cerrada y la página nunca se recoloca.
   ========================================================================= */
#emoGrid{align-items:start}

#emoGrid .emo-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:100%;
  padding:14px 10px 16px;
  border:0;
  border-radius:28px;
  background:transparent;
  color:var(--ink-text,#7A4A28);
  font-family:inherit;
  text-align:center;
  cursor:pointer;
  transform:none;                   /* jamás desplaza la maquetación */
  transition:background-color .2s ease;
}
#emoGrid .emo-card.is-open{
  background:rgba(255,255,255,.42);
  box-shadow:var(--shadow-sm);
}
@supports (background:color-mix(in srgb, red 50%, white)){
  #emoGrid .emo-card.is-open{background:var(--band-soft)}
}

.emo-shape{
  width:clamp(96px,13vw,140px);
  aspect-ratio:1;
  display:block;
  background-color:var(--emo,var(--orange));
  -webkit-mask:var(--uga-shape) center/contain no-repeat;
  mask:var(--uga-shape) center/contain no-repeat;
  filter:drop-shadow(0 7px 0 rgba(90,51,32,.16));
  transition:transform .22s cubic-bezier(.2,1.35,.4,1);
}
#emoGrid .emo-card:hover .emo-shape{transform:scale(1.05)}
#emoGrid .emo-card.is-open .emo-shape{transform:scale(1.08)}

/* el texto ocupa siempre su hueco: invisible, pero presente */
.emo-body{
  display:block;
  visibility:hidden;
  opacity:0;
  transition:opacity .22s ease;
}
#emoGrid .emo-card.is-open .emo-body{visibility:visible;opacity:1}

.emo-name{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.12rem;
  color:var(--ink-text,#7A4A28);
}
.emo-line{
  display:block;
  margin-top:6px;
  font-size:.92rem;
  line-height:1.55;
  color:var(--ink-soft);
  text-align:left;
}


/* =========================================================================
   5 · DOCUMENTOS · avisos legales e Industry
   ========================================================================= */
.legal-doc{
  max-width:70ch;
  margin:0 auto;
  padding:34px 38px 40px;
  border-radius:var(--r-lg);
  background:var(--paper);
  box-shadow:var(--shadow-md);
  color:var(--ink-text,#7A4A28);
  font-size:1.04rem;
  line-height:1.7;
}
.legal-doc h3{
  margin:30px 0 10px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.2rem;
  color:var(--orange-deep);
}
.legal-doc h3:first-child{margin-top:0}
.legal-doc p{margin:0 0 14px}
.legal-doc a{color:var(--orange-deep);text-underline-offset:3px}
.legal-doc .doc-lead{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.24rem;
  color:var(--ink-text,#7A4A28);
}
.legal-doc .doc-date{margin-top:26px;font-size:.92rem;color:var(--ink-soft)}

.doc-table{
  width:100%;
  border-collapse:collapse;
  margin:6px 0 20px;
  font-size:.96rem;
}
.doc-table th,
.doc-table td{
  padding:9px 12px;
  text-align:left;
  vertical-align:top;
  border-bottom:2px solid var(--line-soft);
}
.doc-table th{font-family:var(--font-display);font-weight:800;color:var(--ink-text,#7A4A28)}
.doc-table td:first-child{white-space:nowrap;font-family:ui-monospace,monospace;font-size:.9rem}

.industry-doc{max-width:74ch}
.facts-table th{width:42%;white-space:normal;color:var(--ink-soft)}
.facts-table td,
.facts-table td:first-child{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.06rem;
  color:var(--ink-text,#7A4A28);
  white-space:normal;
}
.industry-cta{
  margin-top:34px;
  padding:26px 26px 30px;
  border-radius:28px;
  background:var(--paper-warm);
}
.industry-cta h3{margin-top:0}
.industry-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 0}


/* =========================================================================
   6 · PIE · línea pequeña de enlaces legales
   No es el menú: es letra menuda, separada de la navegación.
   ========================================================================= */
.foot-mini{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 20px;
  margin-top:8px;
  font-size:.86rem;
  opacity:.72;
}
.foot-mini a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.foot-mini a:hover{border-bottom-color:currentColor}


/* =========================================================================
   7 · MENÚ HAMBURGUESA · un punto más pequeño
   68px de huella y 20px de líneas. El área pulsable sigue muy por encima
   de los 48px que pide la accesibilidad táctil.
   ========================================================================= */
@media (max-width:1024px){
  .menu-toggle{width:68px;height:68px;min-height:68px}
  .menu-bars,
  .menu-bars::before,
  .menu-bars::after{width:20px;height:3px}
  .menu-bars{transform:translate(-2px,11px)}
  .menu-bars::before{top:-7px}
  .menu-bars::after{top:7px}

  .menu-chk:checked ~ .topbar .menu-bars::before,
  body:has(.menu-chk:checked) .menu-bars::before,
  body.nav-open .menu-bars::before{transform:translateY(7px) rotate(45deg)}
  .menu-chk:checked ~ .topbar .menu-bars::after,
  body:has(.menu-chk:checked) .menu-bars::after,
  body.nav-open .menu-bars::after{transform:translateY(-7px) rotate(-45deg)}
}


/* =========================================================================
   8 · IMPRESIÓN DE LAS LÁMINAS
   -------------------------------------------------------------------------
   El contenedor NO puede ir en display:none: una imagen dentro de un
   elemento oculto así no llega a descargarse. Se aparta de la vista
   dejándolo presente para el navegador.
   ========================================================================= */
#print-area{
  position:absolute;
  left:-9999px;
  top:0;
  width:794px;                      /* ancho de un A4 a 96 ppp */
  opacity:0;
  pointer-events:none;
}
@media print{
  #print-area{
    position:static !important;
    left:auto !important;
    width:auto !important;
    opacity:1 !important;
    display:block !important;
  }
  #print-area img{
    display:block;
    width:100%;
    height:auto;
    max-height:88vh;
    object-fit:contain;
    page-break-inside:avoid;
  }
  #print-area img.craft-print-only{
    width:100% !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 auto;
  }
  .uga-kite-layer{display:none !important}
}


/* =========================================================================
   9 · MÓVIL
   ========================================================================= */
@media (max-width:700px){
  .sec-head{margin-bottom:20px}
  .sec-head .sec-plate{margin-bottom:-46px}
  .sec-head > p{
    padding:34px 18px 16px;
    border-radius:var(--r-sm);
    font-size:1rem;
  }
  .sec-head > p::after{width:20px;height:20px;margin-left:8px;vertical-align:-3px}

  .step::before{width:50px;height:50px;font-size:1.16rem}

  .emo-shape{width:clamp(84px,26vw,120px)}
  .emo-name{font-size:1.02rem}

  .legal-doc{padding:22px 20px 26px;border-radius:var(--r-sm);font-size:1rem}
  .legal-doc h3{font-size:1.08rem;margin-top:24px}
  .doc-table{display:block;overflow-x:auto;white-space:nowrap}
  .facts-table th{width:46%}
  .industry-cta{padding:20px 18px 24px;border-radius:22px}
  .industry-buttons .btn{width:100%;justify-content:center}

  .foot-mini{gap:6px 14px;font-size:.8rem}
}


/* =========================================================================
   10 · MENOS MOVIMIENTO
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .emo-body{transition:none}
  #emoGrid .emo-card .emo-shape{transform:none !important;transition:none}
}

/* =========================================================================
   EPISODIOS
   -------------------------------------------------------------------------
   Reproductor arriba, selector debajo y ficha al lado.

   Lo que impide que el fondo se mueva al cambiar de episodio:
     · el reproductor tiene proporción fija 16:9
     · la ficha lateral tiene ALTURA FIJA y desplaza por dentro, así que
       una descripción larga no empuja nada
     · el selector también tiene altura fija
   Con eso, la página mide exactamente lo mismo con cualquier episodio.
   ========================================================================= */
.ep-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:24px;
  align-items:start;
}

/* --- reproductor --- */
.ep-screen{
  width:100%;
  aspect-ratio:16/9;
  border-radius:34px;
  overflow:hidden;
  background:#000;
  box-shadow:0 10px 0 rgba(42,83,102,.17);
}
.ep-frame,
.ep-frame iframe,
.ep-poster{width:100%;height:100%;display:block;border:0}
.ep-poster{position:relative;padding:0;background:none;cursor:pointer}
.ep-poster img{width:100%;height:100%;object-fit:cover;display:block}
.ep-poster-play{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:96px;height:96px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 8px 0 var(--orange-deep);
  transition:transform .18s cubic-bezier(.2,1.35,.4,1);
}
.ep-poster-play::before{
  content:"";width:0;height:0;margin-left:9px;
  border-left:34px solid #fff;
  border-top:23px solid transparent;
  border-bottom:23px solid transparent;
}
.ep-poster:hover .ep-poster-play{transform:translate(-50%,-50%) scale(1.07)}

/* --- selector, bajo el reproductor --- */
.ep-picker{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:18px;
  height:150px;                 /* altura fija: nada se recoloca */
}
.ep-viewport{flex:1;min-width:0;overflow:hidden}
.ep-track{
  display:flex;
  transition:transform .34s cubic-bezier(.2,.8,.3,1);
}
.ep-item{
  flex:0 0 auto;
  width:calc(100% / var(--ep-total, 5));
  padding:0 7px;
  border:0;
  background:none;
  color:var(--ink-text,#7A4A28);
  cursor:pointer;
  text-align:center;
}
.ep-item-art{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  background:var(--sky-2,#B8FAFF);
  box-shadow:0 7px 0 rgba(42,83,102,.16);
  transition:box-shadow .18s ease;
}
.ep-item-art img{width:100%;height:100%;object-fit:cover;display:block}
.ep-item.is-active .ep-item-art{box-shadow:0 7px 0 var(--orange-deep);outline:4px solid var(--orange);outline-offset:-4px}
.ep-item-play{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.9);
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(245,148,59,.94);
  opacity:0;
  transition:opacity .18s ease,transform .18s ease;
}
.ep-item-play::before{
  content:"";width:0;height:0;margin-left:4px;
  border-left:14px solid #fff;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}
.ep-item:hover .ep-item-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ep-item-title{
  display:block;
  margin-top:8px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:.9rem;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* --- flechas --- */
.ep-arrow{
  flex:0 0 auto;
  width:46px;height:46px;
  display:grid;place-items:center;
  border:0;
  border-radius:50%;
  background:var(--orange);
  cursor:pointer;
  box-shadow:0 5px 0 var(--orange-deep);
  transition:transform .16s ease,opacity .16s ease;
}
.ep-arrow span{
  width:0;height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}
.ep-arrow[data-ep-nav="-1"] span{border-right:14px solid #fff;margin-right:3px}
.ep-arrow[data-ep-nav="1"] span{border-left:14px solid #fff;margin-left:3px}
.ep-arrow:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--orange-deep)}
.ep-arrow:disabled{opacity:.32;cursor:default;transform:none;box-shadow:0 5px 0 var(--orange-deep)}

/* --- ficha lateral --- */
.ep-side{
  height:calc((100vw - 330px - 24px) * 0.5625);   /* la altura del vídeo */
  max-height:520px;
  min-height:300px;
  padding:24px 24px 26px;
  border-radius:30px;
  background:#FFFDF6;
  box-shadow:0 8px 0 rgba(42,83,102,.14);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.ep-side-title{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.3rem;
  color:var(--ink-text,#7A4A28);
}
.ep-side-desc{
  margin:0;
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1.6;
  white-space:pre-line;
}

/* --- pantallas medianas y móvil --- */
@media (max-width:960px){
  .ep-layout{grid-template-columns:1fr;gap:18px}
  .ep-side{height:auto;max-height:none;min-height:0}
}
@media (max-width:700px){
  .ep-screen{border-radius:24px}
  .ep-picker{height:132px;gap:8px;margin-top:14px}
  .ep-arrow{width:40px;height:40px}
  .ep-item-title{font-size:.82rem}
  .ep-poster-play{width:72px;height:72px}
  .ep-poster-play::before{border-left-width:26px;border-top-width:17px;border-bottom-width:17px}
  .ep-side{padding:18px 18px 20px;border-radius:24px}
  .ep-side-title{font-size:1.14rem}
}
@media (prefers-reduced-motion:reduce){
  .ep-track,.ep-arrow,.ep-item-play,.ep-poster-play{transition:none}
}

/* =========================================================================
   MÓVIL · dos ajustes
   ========================================================================= */

/* --- 1 · el estiramiento dejaba cielo a los lados -------------------------
   En el fotograma del 3 % la imagen se estrecha al 95 % (scale 0.95 en X),
   y ese 5 % que falta se repartía en dos franjas de cielo, una a cada lado.

   La imagen parte ahora del 107 % de ancho, desplazada un 3,5 % a la
   izquierda para seguir centrada. Al encogerse sigue cubriendo de borde a
   borde, y como el recorte es `object-fit:cover`, no se deforma: solo se
   ve un poco menos de escena por los lados.
   ------------------------------------------------------------------------ */
@media (max-width:700px){
  #view-inicio .hero-art{overflow:hidden}
  #view-inicio .hero-art img{
    width:107%;
    max-width:none;
    left:-3.5%;
  }
}

/* --- 2 · episodios: reproductor, menú y descripción ----------------------
   En una columna y por ese orden. El selector pasa a mostrar DOS episodios
   en lugar de tres: con tres, en 375 px cada miniatura queda en 110 px y el
   título no se lee.
   ------------------------------------------------------------------------ */
@media (max-width:700px){
  .ep-layout{
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .ep-main{display:contents}      /* reproductor y selector, sueltos */

  .ep-screen{order:1;border-radius:22px}
  .ep-picker{order:2;margin-top:0;height:auto;gap:8px}
  .ep-side{
    order:3;
    height:auto;
    max-height:none;
    min-height:0;
    padding:18px 18px 20px;
    border-radius:24px;
  }

  .ep-viewport{padding:2px 0 4px}
  .ep-item-title{
    font-size:.84rem;
    white-space:normal;           /* dos líneas antes que recortar */
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
  .ep-arrow{width:38px;height:38px;box-shadow:0 4px 0 var(--orange-deep)}
  .ep-arrow span{border-top-width:7px;border-bottom-width:7px}
  .ep-arrow[data-ep-nav="-1"] span{border-right-width:11px}
  .ep-arrow[data-ep-nav="1"] span{border-left-width:11px}
}


/* =========================================================================
   MÓVIL · la descripción no debe atrapar el scroll
   -------------------------------------------------------------------------
   La ficha lateral lleva `overflow-y:auto` y `overscroll-behavior:contain`
   porque en escritorio tiene altura fija y desplaza por dentro. En móvil
   crece con su contenido y no necesita desplazarse, pero esas dos
   propiedades seguían activas: basta un píxel de sobrante por redondeo
   para que iOS considere el bloque desplazable, se quede el gesto y la
   página no suba ni baje al arrastrar sobre el texto.

   Aquí se desactivan las dos: en móvil el bloque no desplaza nada por su
   cuenta y el dedo mueve la página.
   ========================================================================= */
@media (max-width:960px){
  .ep-side{
    overflow:visible;
    overscroll-behavior:auto;
    touch-action:auto;
  }
}

/* =========================================================================
   TARJETAS DE JUEGO · el lenguaje del selector de episodios
   -------------------------------------------------------------------------
   De la miniatura de episodios se toman tres cosas:

     · la imagen manda, con la esquina muy redonda y la sombra plana
     · el triángulo aparece centrado al pasar por encima, sin tapar el
       dibujo mientras tanto
     · el texto va fuera de la imagen, no dentro de una caja aparte

   La tarjeta deja de ser un recuadro blanco con la foto encajada y pasa a
   ser la propia imagen, con su título debajo.
   ========================================================================= */
.gcard{
  background:none;
  border:0;
  border-radius:0;
  overflow:visible;
  box-shadow:none;
  text-align:center;
  transition:transform .18s ease;
}
/* La sombra azul venía de dos sitios: una en reposo y OTRA al pasar el
   ratón, declarada más arriba. Anular solo la primera dejaba la segunda
   apareciendo justo al acercarse, que es cuando se veía. */
.gcard:hover,
.gcard:focus-visible{
  transform:translateY(-5px);
  box-shadow:none;
}

/* --- la imagen es la tarjeta --- */
.gcard-art{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  border-radius:22px;
  overflow:hidden;
  background:var(--sky-2,#B8FAFF);
  /* La sombra es naranja, no azul: la azulada es la del resto de
     tarjetas de la web y aquí competía con la miniatura. */
  box-shadow:0 8px 0 var(--orange-deep);
  transition:box-shadow .18s ease, outline-color .18s ease;
  outline:4px solid transparent;
  outline-offset:-4px;
}
.gcard:hover .gcard-art,
.gcard:focus-visible .gcard-art{
  box-shadow:0 11px 0 var(--orange-deep);
  outline-color:var(--orange);
}

/* --- el triángulo, como en el selector de episodios --- */
.gcard-art::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.88);
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(245,148,59,.94);
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
}
.gcard-art::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  transform:translate(-42%,-50%) scale(.88);
  width:0;height:0;
  border-left:19px solid #fff;
  border-top:13px solid transparent;
  border-bottom:13px solid transparent;
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
}
.gcard:hover .gcard-art::after,
.gcard:focus-visible .gcard-art::after{opacity:1;transform:translate(-50%,-50%) scale(1)}
.gcard:hover .gcard-art::before,
.gcard:focus-visible .gcard-art::before{opacity:1;transform:translate(-42%,-50%) scale(1)}

/* --- el texto, fuera de la imagen --- */
.gcard-body{
  display:block;
  padding:12px 6px 0;
  background:none;
}
.gcard-title{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.28rem;
  line-height:1.18;
  color:var(--ink-text,#7A4A28);
}
.gcard-text{
  display:block;
  margin-top:5px;
  color:var(--ink-soft);
  font-size:.92rem;
  line-height:1.45;
}
/* la etiqueta "Jugar" sobra: el triángulo ya lo dice */
.gcard-cta{display:none}

@media (max-width:700px){
  .gcard-art{border-radius:18px}
  .gcard-title{font-size:1.14rem}
  .gcard-text{font-size:.86rem}
  /* en pantalla táctil no hay "pasar por encima": el triángulo se ve siempre */
  .gcard-art::after{opacity:.92;transform:translate(-50%,-50%) scale(1)}
  .gcard-art::before{opacity:1;transform:translate(-42%,-50%) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .gcard,.gcard-art,.gcard-art::before,.gcard-art::after{transition:none}
}

/* =========================================================================
   MANUALIDADES
   -------------------------------------------------------------------------
   Cada manualidad tiene su color pastel en la variable --craft, y de ahí
   salen la tarjeta, la ilustración y los acentos de su página. Un solo
   valor por manualidad gobierna toda su presencia.
   ========================================================================= */

/* --- la rejilla de la sección --- */
.craft-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:24px 20px;
}
.craft-card{
  display:flex;
  flex-direction:column;
  border-radius:28px;
  overflow:hidden;
  background:#FFFDF6;
  color:var(--ink-text,#7A4A28);
  text-decoration:none;
  box-shadow:0 9px 0 rgba(42,83,102,.14);
  transition:transform .18s ease, box-shadow .18s ease;
}
.craft-card:hover,
.craft-card:focus-visible{
  transform:translateY(-5px);
  box-shadow:0 14px 0 rgba(42,83,102,.14);
}

/* la ilustración: la silueta de Uga sobre el color de la manualidad */
.craft-card-art{
  display:block;
  aspect-ratio:16/10;
  background:var(--craft,#CFE9A8);
  position:relative;
}
.craft-card-art::after,
.craft-hero::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:52%;
  height:84%;
  background-color:rgba(255,255,255,.62);
  -webkit-mask:url("../img/uga-silhouette.png?v=1") bottom center/contain no-repeat;
  mask:url("../img/uga-silhouette.png?v=1") bottom center/contain no-repeat;
}

.craft-card-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 20px}
.craft-card-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.14rem;
  line-height:1.2;
}
.craft-card-text{color:var(--ink-soft);font-size:.94rem;line-height:1.45;flex:1}
.craft-card-emo{
  align-self:flex-start;
  margin-top:6px;
  padding:5px 13px;
  border-radius:999px;
  background:var(--craft,#CFE9A8);
  color:var(--ink-text,#7A4A28);
  font-family:var(--font-display);
  font-weight:800;
  font-size:.82rem;
}

/* =========================================================================
   PÁGINA DE UNA MANUALIDAD
   ========================================================================= */
.craft-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:26px;
  align-items:start;
}

.craft-hero{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:32px;
  background:var(--craft,#CFE9A8);
  margin-bottom:20px;
}

.craft-main > .craft-intro{
  margin:0 0 26px;
  font-size:1.08rem;
  line-height:1.65;
  color:var(--ink-text,#7A4A28);
}
.craft-h{
  margin:0 0 14px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.3rem;
  color:var(--orange-deep);
}

/* --- los pasos --- */
.craft-steps{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:14px}
.craft-step{
  display:flex;
  gap:15px;
  padding:18px 20px;
  border-radius:26px;
  background:#FFFDF6;
  box-shadow:0 8px 0 rgba(42,83,102,.13);
}
.craft-step-num{
  flex:0 0 auto;
  width:44px;height:44px;
  display:grid;place-items:center;
  padding-top:14%;
  color:#fff;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.08rem;
  transform:rotate(-8deg);
  background-color:var(--orange);
  -webkit-mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;
  mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;
  text-shadow:0 2px 0 rgba(140,74,20,.45);
}
.craft-step-body h3{
  margin:0 0 5px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.08rem;
  color:var(--ink-text,#7A4A28);
}
.craft-step-body p{margin:0;color:var(--ink-soft);font-size:1rem;line-height:1.55}

/* --- el consejo final --- */
.craft-tip{
  padding:22px 24px 24px;
  border-radius:28px;
  background:var(--craft,#CFE9A8);
}
.craft-tip h3{
  margin:0 0 6px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.14rem;
  color:var(--ink-text,#7A4A28);
}
.craft-tip p{margin:0;color:var(--ink-text,#7A4A28);font-size:1.02rem;line-height:1.55}

.craft-back{margin:26px 0 0}

/* --- la ficha técnica --- */
.craft-facts{
  padding:22px 22px 24px;
  border-radius:28px;
  background:#FFFDF6;
  box-shadow:0 8px 0 rgba(42,83,102,.13);
}
.craft-facts h3{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.1rem;
  color:var(--orange-deep);
}
.craft-mats{margin:0 0 20px;padding:0;list-style:none}
.craft-mats li{
  position:relative;
  padding:5px 0 5px 26px;
  color:var(--ink-soft);
  font-size:.98rem;
  line-height:1.45;
}
.craft-mats li::before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  width:13px;height:13px;
  border-radius:50%;
  background:var(--craft,#CFE9A8);
}
.craft-data{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:.95rem}
.craft-data dt{font-family:var(--font-display);font-weight:800;color:var(--ink-text,#7A4A28)}
.craft-data dd{margin:0;color:var(--ink-soft)}

@media (max-width:900px){
  .craft-layout{grid-template-columns:1fr;gap:20px}
}
@media (max-width:700px){
  .craft-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px 14px}
  .craft-card{border-radius:22px}
  .craft-card-title{font-size:1.02rem}
  .craft-card-text{font-size:.88rem}
  .craft-hero{border-radius:24px}
  .craft-step{padding:14px 15px;gap:12px;border-radius:22px}
  .craft-step-num{width:38px;height:38px;font-size:.96rem}
  .craft-facts,.craft-tip{padding:18px 18px 20px;border-radius:22px}
}
@media (prefers-reduced-motion:reduce){
  .craft-card{transition:none}
}

/* =========================================================================
   MANUALIDADES · cabecera y filtros
   ========================================================================= */
.craft-hero-band{padding-bottom:8px !important}
/* Cabecera de solo texto, centrada: la ilustración competía con las
   veinticinco portadas de la rejilla que vienen justo debajo. */
.craft-hero-band .wrap{
  max-width:56ch;
  margin-inline:auto;
  text-align:center;
}
.craft-hero-title{
  margin:0 0 6px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.9rem,4vw,2.8rem);
  line-height:1.08;
  color:var(--ink-text,#7A4A28);
}
.craft-hero-sub{
  margin:0 0 14px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.02rem,2vw,1.24rem);
  color:var(--orange-deep);
}
.craft-hero-lead{
  margin:0;
  color:var(--ink-soft);
  font-size:1.04rem;
  line-height:1.62;
}

/* --- la barra de filtros --- */
.craft-filters{margin:0 0 26px}
.craft-filters-label{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.06rem;
  color:var(--ink-text,#7A4A28);
}
.craft-filters-row{display:flex;flex-wrap:wrap;gap:10px}
.craft-filter{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:50px;
  padding:9px 20px 9px 14px;
  border:0;
  border-radius:999px;
  background:#FFFDF6;
  color:var(--ink-text,#7A4A28);
  font-family:var(--font-display);
  font-weight:800;
  font-size:1rem;
  cursor:pointer;
  box-shadow:0 5px 0 rgba(42,83,102,.14);
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.craft-filter:hover{transform:translateY(2px);box-shadow:0 3px 0 rgba(42,83,102,.14)}
.craft-filter.is-on{
  background:var(--orange);
  color:#fff;
  box-shadow:0 5px 0 var(--orange-deep);
}
/* el icono es la huella, teñida como el texto */
.craft-filter-icon{
  width:22px;height:22px;
  background-color:currentColor;
  -webkit-mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;
  mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;
  opacity:.9;
}

.craft-empty{
  margin:10px 0 0;
  color:var(--ink-soft);
  font-size:1.02rem;
}

/* --- la etiqueta de categoría y el botón de la tarjeta --- */
.craft-card-cat{
  align-self:flex-start;
  padding:4px 12px;
  border-radius:999px;
  background:var(--craft,#CFE9A8);
  font-family:var(--font-display);
  font-weight:800;
  font-size:.78rem;
}
.craft-card-cta{
  align-self:flex-start;
  margin-top:10px;
  padding:8px 18px;
  border-radius:999px;
  background:var(--orange);
  color:#fff;
  font-family:var(--font-display);
  font-weight:800;
  font-size:.9rem;
  box-shadow:0 4px 0 var(--orange-deep);
}
.craft-card:hover .craft-card-cta{transform:translateY(2px);box-shadow:0 2px 0 var(--orange-deep)}
.craft-card-emo{display:none}   /* la sustituye la etiqueta de categoría */

/* la ilustración muestra el archivo real cuando lo hay */
.craft-hero[style*="background-image"]{
  background-size:cover;
  background-position:center;
}
.craft-hero[style*="background-image"]::after{content:none}

.craft-back{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

@media (max-width:700px){
  .craft-filter{min-height:46px;padding:8px 16px 8px 12px;font-size:.92rem}
  .craft-filter-icon{width:18px;height:18px}
  .craft-back .btn{width:100%;justify-content:center}
}

/* --- El filtro oculta con clase, no con el atributo ----------------------
   .craft-card lleva display:flex, que gana al [hidden]{display:none} del
   navegador por especificidad. Por eso el filtro no ocultaba nada. --- */
.craft-card.is-off{display:none !important}

/* =========================================================================
   FLECHAS DEL CARRUSEL DE AMIGOS
   -------------------------------------------------------------------------
   En Cute Dino, los caracteres ‹ y › no tienen glifo propio: apuntan al de
   la comilla simple. Mientras el archivo de la fuente no cargaba, el
   respaldo los dibujaba bien; al arreglar el nombre del archivo la fuente
   entró en juego y las flechas se convirtieron en comillas.

   Se dibujan ahora con bordes, como las del selector de episodios: no
   dependen de ninguna tipografía y quedan idénticas en los dos sitios.
   ========================================================================= */
.friends-arrow > span[aria-hidden]{
  font-size:0;                      /* se oculta el carácter */
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
}
.friends-arrow > span[aria-hidden]::before{
  content:"";
  width:0;
  height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}
.friends-arrow-prev > span[aria-hidden]::before{
  border-right:13px solid currentColor;
  margin-right:3px;
}
.friends-arrow-next > span[aria-hidden]::before{
  border-left:13px solid currentColor;
  margin-left:3px;
}
/* el desplazamiento que compensaba el carácter ya no hace falta */
.friends-arrow-prev > span:first-child{transform:none}

@media (max-width:700px){
  .friends-arrow > span[aria-hidden]::before{
    border-top-width:7px;
    border-bottom-width:7px;
  }
  .friends-arrow-prev > span[aria-hidden]::before{border-right-width:11px}
  .friends-arrow-next > span[aria-hidden]::before{border-left-width:11px}
}

/* =========================================================================
   MANUALIDADES · portada real en las tarjetas que tienen archivo
   -------------------------------------------------------------------------
   Colorear, wallpapers y recortar ya tienen su lámina o su imagen: se usa
   como portada en lugar de la silueta genérica. Así en el menú se ve de
   antemano qué se va a imprimir.
   ========================================================================= */
.craft-card-art[style*="background-image"]{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.craft-card-art[style*="background-image"]::after{content:none}
/* las fotos llenan el marco; las láminas de línea se ven enteras */
.craft-card-art.is-photo{background-size:cover}

/* =========================================================================
   MANUALIDADES · la lámina se abre pulsando la imagen
   -------------------------------------------------------------------------
   Cuando la actividad tiene archivo, la ilustración de arriba es un enlace:
   se abre pulsándola, sin bajar hasta el botón. El botón se mantiene para
   quien navega con teclado o no interpreta la imagen como pulsable.
   ========================================================================= */
.craft-hero.is-openable{
  display:block;
  position:relative;
  cursor:pointer;
  border:0;
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  background-color:var(--craft,#CFE9A8);
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 9px 0 rgba(42,83,102,.15);
}
.craft-hero.is-openable:hover,
.craft-hero.is-openable:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 13px 0 rgba(42,83,102,.15);
}

/* la señal de que se puede abrir: aparece al acercarse */
.craft-hero-open{
  position:absolute;
  right:16px;
  bottom:16px;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 5px 0 var(--orange-deep);
  opacity:.92;
  transition:opacity .18s ease, transform .18s ease;
}
.craft-hero-open::before{
  content:"";
  width:20px;
  height:20px;
  background-color:#fff;
  /* la huella, como en el resto de la web */
  -webkit-mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;
  mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;
}
.craft-hero.is-openable:hover .craft-hero-open{opacity:1;transform:scale(1.06)}

@media (max-width:700px){
  .craft-hero-open{width:44px;height:44px;right:12px;bottom:12px}
  .craft-hero-open::before{width:17px;height:17px}
}
@media (prefers-reduced-motion:reduce){
  .craft-hero.is-openable,.craft-hero-open{transition:none}
}

/* =========================================================================
   1 · SIN DESTELLO AL PULSAR
   -------------------------------------------------------------------------
   El "flash" de cada clic era el resaltado que los navegadores móviles
   pintan sobre el elemento pulsado, más el aro de foco que recibía el
   escenario del juego al hacer clic. Ni uno ni otro aportan nada aquí.
   ========================================================================= */
*{-webkit-tap-highlight-color:transparent}

/* =========================================================================
   2 · SIN CONTORNOS EN LOS BOTONES
   -------------------------------------------------------------------------
   Se retira el `outline` de todo lo pulsable. Para que quien navega con
   teclado siga sabiendo dónde está, el foco se marca con un halo suave
   —una sombra, no un contorno—, que además respeta las esquinas redondas.
   ========================================================================= */
button,
a,
[role="button"],
input,
select,
textarea,
summary{
  outline:none !important;
}
button:focus,
a:focus,
[role="button"]:focus,
summary:focus{outline:none !important}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 4px rgba(245,148,59,.55);
}

/* =========================================================================
   3 · EL HERO NO SE RECORTA POR ARRIBA
   -------------------------------------------------------------------------
   La ilustración lleva un 30 % de aire por encima de la cabeza: es lo que
   permite que Uga se esconda y asome. Con `cover`, en pantallas anchas el
   navegador recorta ese sobrante por arriba y se lleva por delante la
   punta del pelo.

   La imagen es transparente y el cielo lo pone la sección, así que puede
   ir con `contain` sin dejar ningún hueco visible: se ve entera, apoyada
   abajo, y no se recorta nunca.
   ========================================================================= */
@media (min-width:1025px){
  #view-inicio .hero-art img{
    object-fit:contain;
    object-position:center bottom;
    top:0;
    bottom:0;
    height:100%;
    max-height:none;
  }
}

/* Kite's maze: card cover shows only the maze crop; the full printable
   is never displayed on screen and is injected only at print time. */
.kite-maze-card-art{
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}


.about-emo-stage{
  max-width:360px;
  margin:0 auto 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.about-emo-figure{
  width:min(100%,280px);
  aspect-ratio:560/865;
  display:grid;
  place-items:center;
}
.about-emo-figure .uga-hero{
  width:100%;
  height:auto;
}
.about-emo-label{
  margin:10px 0 0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.25rem;
  color:var(--ink-text,#7A4A28);
}
.emo-thumb-wrap{
  width:clamp(96px,13vw,140px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:32px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78));
  box-shadow:0 8px 18px rgba(90,51,32,.12);
  transition:transform .22s cubic-bezier(.2,1.35,.4,1), box-shadow .22s ease;
}
.emo-thumb{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 8px 10px rgba(90,51,32,.12));
}
#emoGrid .emo-card:hover .emo-thumb-wrap,
#emoGrid .emo-card.is-open .emo-thumb-wrap,
#emoGrid .emo-card.is-current .emo-thumb-wrap{
  transform:scale(1.05);
  box-shadow:0 12px 22px rgba(90,51,32,.16);
}
#emoGrid .emo-card.is-current{
  background:rgba(255,255,255,.3);
}
.mfront-img{width:100%;height:100%;object-fit:contain;display:block}
.mem-win-face img{width:100%;height:auto;display:block}


/* About emotions — larger main Uga face + text beside it */
.about-emo-stage{
  max-width:980px;
  margin:0 auto 24px;
  display:grid;
  grid-template-columns:minmax(280px,380px) minmax(260px,1fr);
  gap:24px;
  align-items:center;
  text-align:left;
  padding:22px;
}
.about-emo-figure-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}
.about-emo-figure{
  width:min(100%,360px);
  min-height:320px;
  display:grid;
  place-items:center;
}
.about-emo-image{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 14px 18px rgba(90,51,32,.18));
}
.about-emo-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}
.about-emo-label{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.5rem,3vw,2.1rem);
  color:var(--ink-text,#7A4A28);
}
.about-emo-desc{
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1.65;
}
.about-emo-desc p{margin:0}
#emoGrid{
  gap:16px;
}
#emoGrid .emo-card{
  background:color-mix(in srgb, var(--emo) 28%, white);
  border:3px solid color-mix(in srgb, var(--emo) 70%, #7A4A28 30%);
  box-shadow:0 8px 0 rgba(90,51,32,.14);
  padding:14px 10px 12px;
}
#emoGrid .emo-card:hover,
#emoGrid .emo-card.is-current{
  background:color-mix(in srgb, var(--emo) 45%, white);
  box-shadow:0 10px 0 rgba(90,51,32,.18);
}
.emo-thumb-wrap{
  width:clamp(88px,11vw,124px);
  border-radius:26px;
  background:transparent;
  box-shadow:none;
}
.emo-thumb{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
#emoGrid .emo-card:hover .emo-thumb-wrap,
#emoGrid .emo-card.is-current .emo-thumb-wrap{
  transform:scale(1.06);
  box-shadow:none;
}
#emoGrid .emo-card .emo-name{
  margin-top:2px;
  font-size:1.02rem;
}
#emoGrid .emo-card .emo-body,
#emoGrid .emo-card .emo-line,
#emoGrid .emo-card.is-open .emo-body{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
}
.mfront{
  padding:8px;
}
@media (max-width:800px){
  .about-emo-stage{
    grid-template-columns:1fr;
    text-align:center;
  }
  .about-emo-copy{align-items:center}
  .about-emo-figure{width:min(100%,300px);min-height:260px}
  .about-emo-desc{text-align:left}
}


/* About emotions · large Uga + colour-reactive panel + silhouette selectors */
.about-emo-stage{
  --about-emo:#E65A4F;
  max-width:1120px;
  min-height:520px;
  margin:0 auto 30px;
  grid-template-columns:minmax(420px,540px) minmax(300px,1fr) !important;
  gap:36px !important;
  padding:30px 38px !important;
  border-radius:36px;
  background:var(--about-emo) !important;
  box-shadow:0 12px 0 rgba(90,51,32,.15);
  transition:background-color .35s ease;
}
@supports (background:color-mix(in srgb, red 50%, white)){
  .about-emo-stage{background:color-mix(in srgb,var(--about-emo) 62%,white) !important}
}
.about-emo-figure-wrap{
  min-height:460px;
}
.about-emo-figure{
  width:min(100%,520px) !important;
  min-height:460px !important;
}
.about-emo-image{
  width:min(100%,520px) !important;
  max-height:500px;
  object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(90,51,32,.22));
}
.about-emo-copy{
  align-items:flex-start;
  text-align:left;
  padding:18px 6px;
}
.about-emo-label{
  color:var(--ink-text,#7A4A28) !important;
  font-size:clamp(2rem,4vw,3rem) !important;
  text-shadow:none;
}
.about-emo-desc{
  max-width:46ch;
  color:var(--ink-text,#7A4A28) !important;
  font-size:1.08rem !important;
  line-height:1.72 !important;
  text-shadow:none;
}
#emoGrid .emo-card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:8px 6px 10px !important;
}
#emoGrid .emo-card:hover,
#emoGrid .emo-card.is-current{
  background:transparent !important;
  box-shadow:none !important;
}
#emoGrid .emo-shape{
  width:clamp(96px,12vw,138px);
  aspect-ratio:1;
  display:block;
  background-color:var(--emo,var(--orange));
  -webkit-mask:var(--uga-shape) center/contain no-repeat;
  mask:var(--uga-shape) center/contain no-repeat;
  filter:drop-shadow(0 8px 0 rgba(90,51,32,.16));
  transition:transform .22s cubic-bezier(.2,1.35,.4,1), filter .22s ease;
}
#emoGrid .emo-card:hover .emo-shape,
#emoGrid .emo-card.is-current .emo-shape{
  transform:scale(1.08);
  filter:drop-shadow(0 10px 0 rgba(90,51,32,.2));
}
#emoGrid .emo-card.is-current .emo-shape{
  outline:0;
}
#emoGrid .emo-card .emo-name{
  display:block;
  margin-top:7px;
  font-size:1rem;
}
@media (max-width:900px){
  .about-emo-stage{
    min-height:0;
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:24px 20px !important;
    text-align:center;
  }
  .about-emo-figure-wrap{min-height:0}
  .about-emo-figure{width:min(100%,420px) !important;min-height:0 !important}
  .about-emo-image{width:min(100%,420px) !important;max-height:none}
  .about-emo-copy{align-items:center;text-align:center;padding:0 4px 10px}
  .about-emo-desc{text-align:left}
}
@media (max-width:560px){
  .about-emo-stage{border-radius:28px;padding:20px 14px !important}
  .about-emo-figure{width:min(100%,360px) !important}
  .about-emo-image{width:min(100%,360px) !important}
  #emoGrid .emo-shape{width:clamp(88px,28vw,118px)}
}


/* ========================================================================
   ABOUT UGA · EMOTIONS v4
   Main render is large; selector uses only the coloured Uga silhouette.
   The panel colour follows the selected primary emotion.
   ======================================================================== */
.about-emo-stage{
  --about-emo:#E65A4F;
  box-sizing:border-box;
  width:100%;
  max-width:1240px;
  min-height:590px;
  margin:0 auto 34px;
  display:grid !important;
  grid-template-columns:minmax(520px,1.25fr) minmax(330px,.75fr) !important;
  gap:42px !important;
  align-items:center !important;
  padding:32px 48px !important;
  border-radius:38px;
  background-color:var(--about-emo) !important;
  box-shadow:0 13px 0 rgba(90,51,32,.15);
  transition:background-color .32s ease;
  overflow:hidden;
}
@supports (background:color-mix(in srgb, red 50%, white)){
  .about-emo-stage{
    background-color:color-mix(in srgb,var(--about-emo) 66%,white) !important;
  }
}
.about-emo-figure-wrap{
  width:100%;
  min-height:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
}
.about-emo-figure{
  width:min(100%,650px) !important;
  min-height:0 !important;
  aspect-ratio:1 / 1 !important;
  display:grid;
  place-items:center;
}
.about-emo-image{
  width:100% !important;
  height:100% !important;
  max-width:650px !important;
  max-height:650px !important;
  object-fit:contain !important;
  display:block;
  filter:drop-shadow(0 18px 22px rgba(90,51,32,.22));
}
.about-emo-copy{
  min-width:0;
  align-items:flex-start !important;
  justify-content:center;
  text-align:left !important;
  padding:12px 4px !important;
}
.about-emo-label{
  margin:0 0 8px !important;
  font-size:clamp(2.25rem,4vw,3.35rem) !important;
  line-height:1 !important;
}
.about-emo-desc{
  max-width:48ch;
  font-size:clamp(1rem,1.5vw,1.16rem) !important;
  line-height:1.72 !important;
  text-align:left !important;
}

/* Six chromatic selectors: RED > ORANGE > YELLOW > GREEN > BLUE > VIOLET. */
#emoGrid{
  width:100%;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:16px !important;
  align-items:start;
}
#emoGrid .emo-card{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  padding:8px 4px 10px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#emoGrid .emo-card::before{
  content:none !important;
}
#emoGrid .emo-shape{
  width:clamp(100px,11vw,146px) !important;
  aspect-ratio:1 !important;
  display:block !important;
  background-color:var(--emo) !important;
  -webkit-mask:var(--uga-shape) center/contain no-repeat !important;
  mask:var(--uga-shape) center/contain no-repeat !important;
  filter:drop-shadow(0 8px 0 rgba(90,51,32,.15));
  transition:transform .2s cubic-bezier(.2,1.35,.4,1),filter .2s ease;
}
#emoGrid .emo-card:hover .emo-shape,
#emoGrid .emo-card.is-current .emo-shape{
  transform:scale(1.09) !important;
  filter:drop-shadow(0 10px 0 rgba(90,51,32,.2));
}
#emoGrid .emo-card.is-current .emo-shape{
  animation:aboutEmotionPop .28s ease-out;
}
@keyframes aboutEmotionPop{
  0%{transform:scale(.94)}
  70%{transform:scale(1.12)}
  100%{transform:scale(1.09)}
}
#emoGrid .emo-name{
  display:block !important;
  margin:4px 0 0 !important;
  font-size:1rem !important;
  line-height:1.1;
  text-align:center;
}
#emoGrid .emo-thumb-wrap,
#emoGrid .emo-thumb,
#emoGrid .emo-body,
#emoGrid .emo-line{
  display:none !important;
}

@media (max-width:1000px){
  .about-emo-stage{
    grid-template-columns:minmax(360px,1.1fr) minmax(280px,.9fr) !important;
    min-height:480px;
    gap:24px !important;
    padding:28px 30px !important;
  }
  .about-emo-figure{width:min(100%,500px) !important}
  .about-emo-image{max-width:500px !important;max-height:500px !important}
  #emoGrid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;row-gap:18px !important}
}

@media (max-width:720px){
  .about-emo-stage{
    grid-template-columns:1fr !important;
    min-height:0;
    gap:8px !important;
    padding:22px 18px 26px !important;
    border-radius:30px;
  }
  .about-emo-figure{
    width:min(100%,430px) !important;
    aspect-ratio:1 !important;
  }
  .about-emo-image{
    max-width:430px !important;
    max-height:430px !important;
  }
  .about-emo-copy{
    align-items:center !important;
    text-align:center !important;
    padding:0 8px !important;
  }
  .about-emo-label{text-align:center !important}
  .about-emo-desc{width:100%;text-align:left !important}
  #emoGrid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:14px 8px !important}
  #emoGrid .emo-shape{width:clamp(90px,25vw,120px) !important}
}

@media (max-width:430px){
  .about-emo-stage{padding:18px 12px 22px !important;border-radius:26px}
  .about-emo-figure{width:min(100%,360px) !important}
  .about-emo-image{max-width:360px !important;max-height:360px !important}
  #emoGrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px 6px !important}
  #emoGrid .emo-shape{width:clamp(98px,39vw,128px) !important}
  #emoGrid .emo-name{font-size:.95rem !important}
}

@media (prefers-reduced-motion:reduce){
  .about-emo-stage,#emoGrid .emo-shape{transition:none !important}
  #emoGrid .emo-card.is-current .emo-shape{animation:none !important}
}


/* ========================================================================
   ABOUT UGA · EMOTIONS v5 · reference-card layout
   Large reactive colour card, floating intro note, silhouette selector.
   ======================================================================== */
#view-about .about-emo-heading{
  margin-bottom:0 !important;
}
.about-emo-showcase{
  position:relative;
  width:100%;
  padding-top:84px;
  margin:0 auto 30px;
}
.about-emo-note{
  position:absolute;
  z-index:4;
  top:0;
  right:-8px;
  width:min(52%,600px);
  box-sizing:border-box;
  padding:22px 30px 24px;
  border-radius:26px;
  background:#DDF9FC;
  color:var(--ink-text,#7A4A28);
  box-shadow:0 10px 0 rgba(74,174,194,.24);
  transform:rotate(3.8deg);
  transform-origin:center;
}
.about-emo-note::after{
  content:"";
  position:absolute;
  right:34px;
  bottom:14px;
  width:30px;
  height:30px;
  background:var(--orange);
  -webkit-mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;
  mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;
  transform:rotate(-10deg);
  opacity:.9;
}
.about-emo-note p{
  margin:0;
  padding-right:32px;
  font-size:clamp(1rem,1.45vw,1.2rem);
  line-height:1.55;
  font-weight:600;
}
.about-emo-stage{
  --about-emo:#E65A4F;
  box-sizing:border-box;
  width:100%;
  max-width:none !important;
  min-height:650px !important;
  margin:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1.28fr) minmax(320px,.72fr) !important;
  gap:28px !important;
  align-items:center !important;
  padding:28px 54px 28px 34px !important;
  border-radius:38px !important;
  overflow:hidden !important;
  background:color-mix(in srgb,var(--about-emo) 66%,white) !important;
  box-shadow:0 14px 0 rgba(90,51,32,.14) !important;
  transition:background-color .32s ease !important;
}
.about-emo-figure-wrap{
  width:100% !important;
  height:100% !important;
  min-height:590px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}
.about-emo-figure{
  width:100% !important;
  height:100% !important;
  min-height:590px !important;
  aspect-ratio:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}
.about-emo-image{
  width:min(110%,700px) !important;
  height:auto !important;
  max-width:700px !important;
  max-height:610px !important;
  object-fit:contain !important;
  display:block !important;
  transform:scale(1.08) translateY(8px);
  transform-origin:center;
  filter:drop-shadow(0 20px 24px rgba(90,51,32,.20)) !important;
}
.about-emo-copy{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:left !important;
  padding:54px 0 0 4px !important;
}
.about-emo-label{
  margin:0 0 18px !important;
  font-size:clamp(2.8rem,5vw,4.3rem) !important;
  line-height:.95 !important;
  color:var(--ink-text,#7A4A28) !important;
}
.about-emo-desc{
  width:100% !important;
  max-width:43ch !important;
  color:var(--ink-text,#7A4A28) !important;
  font-size:clamp(1rem,1.5vw,1.17rem) !important;
  line-height:1.7 !important;
  text-align:left !important;
}
.about-emo-desc p{margin:0 !important}

/* Keep the emotion chooser below the card light and graphical. */
#emoGrid{
  width:100% !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:18px !important;
  margin-top:12px !important;
}
#emoGrid .emo-card{
  min-width:0 !important;
  padding:8px 4px 10px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#emoGrid .emo-shape{
  width:clamp(100px,11vw,148px) !important;
  background-color:var(--emo) !important;
  -webkit-mask:var(--uga-shape) center/contain no-repeat !important;
  mask:var(--uga-shape) center/contain no-repeat !important;
  filter:drop-shadow(0 8px 0 rgba(90,51,32,.15));
}
#emoGrid .emo-name{
  display:block !important;
  margin-top:6px !important;
  font-size:1rem !important;
}
#emoGrid .emo-thumb-wrap,#emoGrid .emo-thumb,#emoGrid .emo-body,#emoGrid .emo-line{
  display:none !important;
}

@media (max-width:1000px){
  .about-emo-showcase{padding-top:72px}
  .about-emo-note{
    width:min(58%,520px);
    right:4px;
    padding:19px 24px 21px;
  }
  .about-emo-stage{
    min-height:560px !important;
    grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr) !important;
    padding:26px 34px 26px 24px !important;
  }
  .about-emo-figure-wrap,.about-emo-figure{min-height:500px !important}
  .about-emo-image{width:min(112%,570px) !important;max-width:570px !important;max-height:520px !important}
  .about-emo-label{font-size:clamp(2.5rem,5vw,3.5rem) !important}
  #emoGrid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;row-gap:18px !important}
}

@media (max-width:720px){
  .about-emo-showcase{
    padding-top:0;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .about-emo-note{
    position:relative;
    inset:auto;
    order:0;
    width:100%;
    padding:18px 22px 20px;
    border-radius:24px;
    transform:rotate(1.5deg);
  }
  .about-emo-stage{
    order:1;
    min-height:0 !important;
    grid-template-columns:1fr !important;
    gap:4px !important;
    padding:18px 16px 24px !important;
    border-radius:30px !important;
  }
  .about-emo-figure-wrap,.about-emo-figure{
    min-height:0 !important;
    height:auto !important;
  }
  .about-emo-figure{width:100% !important}
  .about-emo-image{
    width:min(118%,480px) !important;
    max-width:480px !important;
    max-height:none !important;
    transform:scale(1.04) translateY(2px);
  }
  .about-emo-copy{
    align-items:center !important;
    text-align:center !important;
    padding:0 10px 4px !important;
  }
  .about-emo-label{
    margin-bottom:12px !important;
    font-size:clamp(2.35rem,11vw,3.1rem) !important;
    text-align:center !important;
  }
  .about-emo-desc{
    max-width:38ch !important;
    font-size:1rem !important;
    text-align:left !important;
  }
  #emoGrid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:14px 8px !important;
  }
  #emoGrid .emo-shape{width:clamp(88px,25vw,118px) !important}
}

@media (max-width:430px){
  .about-emo-note{padding:16px 18px 18px}
  .about-emo-note p{padding-right:22px;font-size:.96rem}
  .about-emo-stage{padding:14px 10px 20px !important;border-radius:26px !important}
  .about-emo-image{width:min(122%,390px) !important;max-width:390px !important}
  #emoGrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px 6px !important}
  #emoGrid .emo-shape{width:clamp(94px,39vw,126px) !important}
}


/* ========================================================================
   About emotions v6 — fix intro note overlap, bigger Uga, Uga breaks out
   of the card slightly, robust mobile layout.
   ======================================================================== */
.about-emo-showcase{
  position:relative;
  width:100%;
  padding-top:132px !important;
  margin:0 auto 30px !important;
  overflow:visible !important;
}
.about-emo-note{
  position:absolute !important;
  z-index:8 !important;
  top:6px !important;
  right:18px !important;
  width:min(50%,640px) !important;
  max-width:640px !important;
}
.about-emo-stage{
  position:relative !important;
  z-index:2 !important;
  min-height:690px !important;
  grid-template-columns:minmax(0,1.16fr) minmax(320px,.84fr) !important;
  gap:18px !important;
  padding:18px 48px 30px 18px !important;
  overflow:visible !important;
}
.about-emo-figure-wrap{
  min-height:620px !important;
  align-items:flex-end !important;
  justify-content:center !important;
  overflow:visible !important;
}
.about-emo-figure{
  min-height:620px !important;
  align-items:flex-end !important;
  justify-content:center !important;
  overflow:visible !important;
}
.about-emo-image{
  width:min(132%,860px) !important;
  max-width:860px !important;
  max-height:760px !important;
  transform:translateY(42px) scale(1.10) !important;
  transform-origin:center bottom !important;
}
.about-emo-copy{
  align-self:center !important;
  padding:36px 0 0 0 !important;
}
.about-emo-label{
  margin:0 0 20px !important;
}
.about-emo-desc{
  max-width:38ch !important;
}
@media (max-width:1100px){
  .about-emo-showcase{padding-top:118px !important}
  .about-emo-note{width:min(56%,560px) !important; right:10px !important}
  .about-emo-stage{
    min-height:590px !important;
    grid-template-columns:minmax(0,1.06fr) minmax(280px,.94fr) !important;
    padding:18px 28px 22px 14px !important;
  }
  .about-emo-figure-wrap,.about-emo-figure{min-height:540px !important}
  .about-emo-image{
    width:min(135%,700px) !important;
    max-width:700px !important;
    max-height:620px !important;
    transform:translateY(30px) scale(1.08) !important;
  }
}
@media (max-width:760px){
  .about-emo-showcase{
    padding-top:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
  }
  .about-emo-note{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    right:auto !important;
    top:auto !important;
    order:0 !important;
    transform:rotate(1.8deg) !important;
  }
  .about-emo-stage{
    order:1 !important;
    min-height:0 !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:16px 14px 22px !important;
    border-radius:28px !important;
  }
  .about-emo-figure-wrap,.about-emo-figure{
    min-height:0 !important;
    height:auto !important;
  }
  .about-emo-image{
    width:min(128%,520px) !important;
    max-width:520px !important;
    max-height:none !important;
    transform:translateY(14px) scale(1.05) !important;
  }
  .about-emo-copy{
    padding:0 8px 4px !important;
    text-align:center !important;
    align-items:center !important;
  }
  .about-emo-desc{
    max-width:42ch !important;
    text-align:left !important;
  }
}
@media (max-width:430px){
  .about-emo-note{padding:15px 16px 17px !important}
  .about-emo-note p{font-size:.95rem !important; padding-right:22px !important}
  .about-emo-stage{padding:14px 10px 20px !important}
  .about-emo-image{
    width:min(132%,420px) !important;
    max-width:420px !important;
    transform:translateY(10px) scale(1.03) !important;
  }
}


/* ========================================================================
   About emotions v7 — smaller colour panel, larger Uga breaking outside,
   intro note lowered into the panel.
   ======================================================================== */
.about-emo-showcase{
  padding-top:94px !important;
  margin-bottom:44px !important;
}
.about-emo-note{
  top:54px !important;
  right:5% !important;
  width:min(48%,610px) !important;
  z-index:9 !important;
}
.about-emo-stage{
  width:92% !important;
  max-width:1180px !important;
  min-height:560px !important;
  margin:0 auto !important;
  grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr) !important;
  padding:10px 42px 24px 10px !important;
  border-radius:34px !important;
}
.about-emo-figure-wrap,
.about-emo-figure{
  min-height:515px !important;
}
.about-emo-image{
  width:min(158%,930px) !important;
  max-width:930px !important;
  max-height:720px !important;
  transform:translate(-18px,72px) scale(1.13) !important;
  transform-origin:center bottom !important;
}
.about-emo-copy{
  padding:54px 0 0 0 !important;
}

@media (max-width:1100px){
  .about-emo-showcase{padding-top:88px !important}
  .about-emo-note{
    top:48px !important;
    right:4% !important;
    width:min(54%,540px) !important;
  }
  .about-emo-stage{
    width:94% !important;
    min-height:500px !important;
    grid-template-columns:minmax(0,1.08fr) minmax(270px,.92fr) !important;
    padding:10px 26px 18px 8px !important;
  }
  .about-emo-figure-wrap,.about-emo-figure{min-height:455px !important}
  .about-emo-image{
    width:min(158%,760px) !important;
    max-width:760px !important;
    max-height:620px !important;
    transform:translate(-10px,58px) scale(1.12) !important;
  }
  .about-emo-copy{padding-top:46px !important}
}

@media (max-width:760px){
  .about-emo-showcase{
    padding-top:0 !important;
    gap:8px !important;
    margin-bottom:28px !important;
  }
  .about-emo-note{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    width:94% !important;
    max-width:none !important;
    margin:0 2% -26px auto !important;
    z-index:9 !important;
    transform:rotate(1.3deg) !important;
  }
  .about-emo-stage{
    width:96% !important;
    max-width:none !important;
    margin:0 auto !important;
    min-height:0 !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
    padding:28px 12px 22px !important;
    border-radius:28px !important;
  }
  .about-emo-figure-wrap,.about-emo-figure{
    min-height:0 !important;
    height:auto !important;
  }
  .about-emo-image{
    width:min(142%,590px) !important;
    max-width:590px !important;
    max-height:none !important;
    transform:translate(0,34px) scale(1.08) !important;
  }
  .about-emo-copy{
    padding:28px 10px 2px !important;
  }
}

@media (max-width:430px){
  .about-emo-note{
    width:96% !important;
    margin:0 1% -22px auto !important;
  }
  .about-emo-stage{
    width:98% !important;
    padding:24px 8px 18px !important;
  }
  .about-emo-image{
    width:min(148%,460px) !important;
    max-width:460px !important;
    transform:translate(0,28px) scale(1.06) !important;
  }
  .about-emo-copy{padding:22px 8px 2px !important}
}


/* About emotions v8 — the main colour layer must not move on hover. */
.about-emo-stage,
.about-emo-stage:hover{
  transform:none !important;
}
.about-emo-stage:hover{
  box-shadow:0 14px 0 rgba(90,51,32,.14) !important;
}


/* About emotions v9 — no vibration / layout shift when changing emotion. */
.about-emo-stage{
  transition:background-color .18s linear !important;
  contain:layout paint;
}
.about-emo-figure{
  contain:layout paint;
}
.about-emo-image{
  display:block !important;
  aspect-ratio:1/1 !important;
}
.about-emo-desc{
  min-height:8.2em;
}
#emoGrid .emo-card,
#emoGrid .emo-card:hover,
#emoGrid .emo-card.is-current{
  transform:none !important;
}
#emoGrid .emo-shape,
#emoGrid .emo-card:hover .emo-shape,
#emoGrid .emo-card.is-current .emo-shape{
  transform:none !important;
  animation:none !important;
  transition:filter .14s ease !important;
}
#emoGrid .emo-card:hover .emo-shape,
#emoGrid .emo-card.is-current .emo-shape{
  filter:drop-shadow(0 10px 0 rgba(90,51,32,.20)) !important;
}
@media (max-width:760px){
  .about-emo-desc{min-height:9.4em}
}


/* About emotions v10 — let Uga face break out of the colour card again. */
.about-emo-showcase,
.about-emo-stage,
.about-emo-figure-wrap,
.about-emo-figure{
  overflow:visible !important;
}
.about-emo-stage,
.about-emo-figure{
  contain:none !important;
}
.about-emo-stage{
  isolation:isolate;
}
.about-emo-figure-wrap,
.about-emo-figure{
  position:relative;
  z-index:3;
}
.about-emo-image{
  position:relative;
  z-index:4;
  width:min(126%,780px) !important;
  max-width:780px !important;
  max-height:none !important;
  transform:translate(0,64px) scale(1.12) !important;
  transform-origin:center bottom !important;
}
@media (max-width:1100px){
  .about-emo-image{
    width:min(132%,660px) !important;
    max-width:660px !important;
    transform:translate(0,52px) scale(1.1) !important;
  }
}
@media (max-width:760px){
  .about-emo-image{
    width:min(132%,520px) !important;
    max-width:520px !important;
    transform:translate(0,28px) scale(1.08) !important;
  }
}
@media (max-width:430px){
  .about-emo-image{
    width:min(138%,420px) !important;
    max-width:420px !important;
    transform:translate(0,18px) scale(1.05) !important;
  }
}


/* ========================================================================
   About Uga story v11 — floating intro note, full-bleed image on the left,
   story copy on the right. The former Uga's World copy is intentionally
   removed from the visible layout.
   ======================================================================== */
#view-about .about-story-heading{
  margin-bottom:0 !important;
}
.about-story-showcase{
  position:relative;
  width:100%;
  padding-top:112px;
  margin:0 auto 34px;
  overflow:visible;
}
.about-story-note{
  position:absolute;
  z-index:6;
  top:4px;
  right:22px;
  width:min(52%,620px);
  box-sizing:border-box;
  padding:22px 30px 24px;
  border-radius:26px;
  background:#DDF9FC;
  color:var(--ink-text,#7A4A28);
  box-shadow:0 10px 0 rgba(74,174,194,.24);
  transform:rotate(2.7deg);
  transform-origin:center;
}
.about-story-note::after{
  content:"";
  position:absolute;
  right:34px;
  bottom:14px;
  width:30px;
  height:30px;
  background:var(--orange);
  -webkit-mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;
  mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;
  transform:rotate(-10deg);
  opacity:.9;
}
.about-story-note p{
  margin:0;
  padding-right:34px;
  font-size:clamp(1rem,1.45vw,1.2rem);
  line-height:1.55;
  font-weight:600;
}
.about-story-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:26px;
  align-items:stretch;
}
.about-story-image-card,
.about-story-copy-card{
  min-height:500px;
  transform:none !important;
}
.about-story-image-card{
  position:relative;
  overflow:hidden;
  padding:0 !important;
}
.about-story-image-card > img{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block;
}
.about-story-copy-card{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  padding:46px 48px !important;
}
.about-story-copy-card .eyebrow{
  margin-bottom:14px !important;
}
.about-story-copy-card p:not(.eyebrow){
  font-size:clamp(1rem,1.35vw,1.15rem);
  line-height:1.65;
}
.about-story-image-card:hover,
.about-story-copy-card:hover{
  transform:none !important;
}
@media (max-width:900px){
  .about-story-showcase{padding-top:104px}
  .about-story-note{width:min(62%,560px);right:8px}
  .about-story-grid{gap:20px}
  .about-story-image-card,.about-story-copy-card{min-height:440px}
  .about-story-copy-card{padding:36px 34px !important}
}
@media (max-width:720px){
  .about-story-showcase{
    padding-top:0;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .about-story-note{
    position:relative;
    inset:auto;
    order:0;
    width:100%;
    transform:rotate(1.5deg);
    padding:18px 22px 20px;
  }
  .about-story-grid{
    order:1;
    grid-template-columns:1fr;
    gap:18px;
  }
  .about-story-image-card{min-height:520px}
  .about-story-copy-card{min-height:0;padding:30px 28px !important}
}
@media (max-width:430px){
  .about-story-note{padding:16px 18px 18px}
  .about-story-note p{padding-right:22px;font-size:.96rem}
  .about-story-image-card{min-height:430px;border-radius:28px !important}
  .about-story-copy-card{padding:26px 22px !important;border-radius:28px !important}
}


/* ========================================================================
   About Uga story v12 — intro note above cards + full poster framing.
   ======================================================================== */
.about-story-showcase{
  isolation:isolate;
  overflow:visible !important;
}
.about-story-note{
  z-index:30 !important;
  pointer-events:none;
}
.about-story-grid{
  position:relative;
  z-index:1;
  grid-template-columns:minmax(340px,.82fr) minmax(0,1.18fr) !important;
  align-items:stretch !important;
}
.about-story-image-card{
  width:100%;
  min-height:0 !important;
  aspect-ratio:921 / 1152;
  align-self:start;
  background:#92EAF3;
}
.about-story-image-card > img{
  object-fit:cover !important;
  object-position:50% 50% !important;
}
.about-story-copy-card{
  min-height:0 !important;
  height:100%;
}
@media (max-width:1000px){
  .about-story-grid{
    grid-template-columns:minmax(300px,.88fr) minmax(0,1.12fr) !important;
  }
}
@media (max-width:720px){
  .about-story-note{
    z-index:30 !important;
    pointer-events:auto;
  }
  .about-story-grid{
    grid-template-columns:1fr !important;
  }
  .about-story-image-card{
    width:min(100%,560px);
    justify-self:center;
    min-height:0 !important;
    aspect-ratio:921 / 1152;
  }
  .about-story-image-card > img{
    object-position:center center !important;
  }
}