@font-face{font-family:Montserrat;src:url(/fonts/montserrat-variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Work Sans";src:url(/fonts/work-sans.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --ja-yellow:#E3E24F;--ja-blue:#28708B;--ja-navy:#22404D;--ja-ice:#C3EDEF;--ja-off:#EEF3F4;
  --ja-pale:#99D9DF;--ja-aqua:#00C0CA;--ja-cer:#286075;--white:#fff;--ink-soft:#55707D;
  --cel:#74ACDF;--error:#B42318;--error-tint:#FDECEC;
  --head:Montserrat,system-ui,sans-serif;--body:"Work Sans",system-ui,sans-serif;
  --s1:0 1px 3px rgba(34,64,77,.10);--s2:0 4px 12px rgba(34,64,77,.14);
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* Color por categoria: --c fondo, --t texto sobre --c, --b barra de hover */
.k0{--c:var(--ja-yellow);--t:var(--ja-navy);--b:var(--ja-navy)}
.k1{--c:var(--ja-blue);--t:var(--white);--b:var(--ja-yellow)}
.k2{--c:var(--ja-aqua);--t:var(--ja-navy);--b:var(--ja-navy)}
.k3{--c:var(--ja-cer);--t:var(--white);--b:var(--ja-yellow)}
.k4{--c:var(--ja-pale);--t:var(--ja-navy);--b:var(--ja-navy)}
*{box-sizing:border-box}
html{scrollbar-gutter:stable;overflow-y:scroll}
body{margin:0;font:400 16px/1.6 var(--body);color:var(--ja-navy);background:var(--ja-off)}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit}
img,svg{display:block}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;background:var(--white);color:var(--ja-navy);padding:10px 14px;z-index:100;font-weight:600}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--ja-navy);outline-offset:3px}
.band summary:focus-visible,.row:focus-visible,.cta:focus-visible,.tl:focus-visible{outline-color:var(--t);outline-offset:-5px}

/* encabezado */
.top{background:var(--cel);color:var(--ja-navy);border-bottom:10px solid var(--white)}
.top__in{max-width:1440px;margin:0 auto;padding:16px;display:flex;align-items:center;gap:16px}
.esc{width:58px;transform-origin:50% 8%;animation:swing 1.1s var(--ease) .15s backwards;flex:none;filter:drop-shadow(0 0 1px var(--ja-navy)) drop-shadow(0 0 1px var(--ja-navy))}
.esc img,.ban img{width:100%;height:auto}
.top__t{flex:1;min-width:0}
.eyebrow{font:800 14px/1.3 var(--head);letter-spacing:.16em;text-transform:uppercase}
.top h1{font:800 clamp(26px,6.4vw,64px)/1 var(--head);letter-spacing:-.02em;margin-top:4px}
.ban{width:84px;flex:none;border:3px solid var(--white);animation:flagin .7s var(--ease) .3s backwards}

/* categorias en bandas */
.shell{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr)}
.nav-msg{padding:20px 16px;font:600 16px/1.4 var(--body)}
.nav-msg.err{background:var(--error-tint);color:var(--error)}
.band{background:var(--c);color:var(--t)}
.band+.band{border-top:4px solid var(--ja-off)}
.band summary{list-style:none;display:flex;align-items:center;gap:14px;min-height:72px;padding:12px 16px;cursor:pointer}
.band summary>*{transition:transform .2s var(--ease)}
.band summary::-webkit-details-marker{display:none}
.band .nm{flex:1;min-width:0;overflow-wrap:anywhere;font:800 clamp(24px,5.4vw,40px)/1.05 var(--head);letter-spacing:-.015em}
.band .ct{font:600 14px var(--body);flex:none}
.band summary svg{flex:none;transition:transform .3s var(--ease)}
.band[open] summary svg{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.band summary:hover svg{transform:translateX(12px)}.band[open] summary:hover svg{transform:translateX(12px) rotate(180deg)}}
@media (hover:hover) and (pointer:fine){.band summary:hover>*{transform:translateX(12px)}}
.band ul{list-style:none;margin:0;padding:0 0 12px}
.band[open] li{animation:rise .45s var(--ease) backwards;animation-delay:calc(var(--i)*60ms + .1s)}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:10px 16px 10px 32px;color:var(--t);text-decoration:none;overflow-wrap:anywhere;font:700 clamp(18px,3.6vw,24px)/1.15 var(--head);box-shadow:inset 0 0 0 0 var(--b);transition:box-shadow .2s var(--ease)}
.row>span{transition:transform .2s var(--ease)}
@media (hover:hover) and (pointer:fine){a.row:hover{box-shadow:inset 10px 0 0 0 var(--b)}a.row:hover>span{transform:translateX(6px)}}
.row[aria-current=page]{background:var(--t);color:var(--c)}
.row[aria-current=page]:focus-visible{outline-color:var(--c)}
.row--none{font:600 16px var(--body)}

/* vista */
main{min-width:0;padding:20px 16px 56px}
main:focus{outline:0}
.vh{animation:rise .5s var(--ease) backwards}
.tag{display:inline-block;max-width:100%;overflow-wrap:anywhere;padding:6px 12px;border-radius:2px;background:var(--c);color:var(--t);font:800 14px/1.2 var(--head);letter-spacing:.12em;text-transform:uppercase}
.vh h2{font:800 clamp(38px,9vw,104px)/.98 var(--head);letter-spacing:-.03em;margin:14px 0 18px;overflow-wrap:anywhere;text-wrap:balance}
.vh__row{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.meta{font:600 16px var(--body);color:var(--ink-soft)}
.cta{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 18px;border-radius:2px;background:var(--ja-navy);color:var(--white);font:600 16px/1.2 var(--body);text-decoration:none;transition:transform .15s var(--ease),box-shadow .15s}
.cta:focus-visible{outline-color:var(--white)}
@media (hover:hover) and (pointer:fine){.cta:hover{transform:translateY(-2px);box-shadow:var(--s1);background:var(--ja-cer)}}
.cq{container-type:inline-size;margin-top:20px}
.bento{list-style:none;margin:0;padding:0;--cols:2;--gap:8px;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--gap);grid-auto-rows:calc((100cqw - (var(--cols) - 1)*var(--gap))/var(--cols));grid-auto-flow:dense}
.bento li{min-width:0;min-height:0}
.bento li.in{animation:rise .55s var(--ease) backwards;animation-delay:calc(var(--i)*55ms)}
.bento li.ph--new{animation:rise .55s var(--ease) backwards}
.bento .w{grid-column:span 2}.bento .t{grid-row:span 2}.bento .hero{grid-column:span 2;grid-row:span 2}
.ph{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:2px;overflow:hidden;background:var(--ja-ice);cursor:zoom-in;box-shadow:var(--s1);transition:transform .18s var(--ease),box-shadow .18s}
.ph img{width:100%;height:100%;object-fit:cover}
.ph .nb{position:absolute;left:0;bottom:0;padding:4px 10px;background:var(--ja-navy);color:var(--white);font:800 14px/1.3 var(--head);letter-spacing:.06em}
@media (hover:hover) and (pointer:fine){.ph:hover{transform:translateY(-2px);box-shadow:var(--s2)}.ph:hover .nb{background:var(--c);color:var(--t)}}
.ph:focus-visible{outline-color:var(--ja-navy);outline-offset:3px}
.tl{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:14px 16px;border-radius:2px;background:var(--c);color:var(--t);text-decoration:none;overflow:hidden}
.tl b{font:800 clamp(34px,6cqw,56px)/.95 var(--head);letter-spacing:-.03em}
.tl span{font:600 15px/1.25 var(--body);overflow-wrap:anywhere}
a.tl{transition:transform .15s var(--ease)}
@media (hover:hover) and (pointer:fine){a.tl:hover{transform:translateY(-2px);box-shadow:inset 0 -8px 0 var(--b)}}
.hello{padding:8px 0}
.hello h2{font:800 clamp(40px,9vw,104px)/.96 var(--head);letter-spacing:-.03em;max-width:12ch;animation:rise .55s var(--ease) backwards}
.hello p{margin-top:16px;font:400 18px/1.5 var(--body);max-width:40ch}
.hello .strip{display:flex;margin-top:28px;height:56px}.hello .strip i{flex:1;background:var(--c);animation:grow .7s var(--ease) backwards;animation-delay:calc(var(--i)*90ms);transform-origin:left}
.state{margin-top:16px;padding:20px 24px;background:var(--white);border-left:8px solid var(--c);font:600 18px/1.4 var(--body)}
.state.err{background:var(--error-tint);color:var(--error);border-color:var(--error)}
/* skeleton: en reposo es el bloque lleno; el pulso es finito */
.skel i{display:block;height:100%;background:var(--ja-ice);animation:pulse 1.1s ease-in-out 8 alternate both;animation-delay:calc(var(--i)*80ms)}

/* lightbox */
#lightbox{border:0;padding:0;background:var(--ja-navy);color:var(--white);width:100vw;height:100vh;max-width:100vw;max-height:100vh}
#lightbox[open]{display:grid;grid-template-rows:1fr auto;animation:lbin .3s var(--ease)}
#lightbox::backdrop{background:var(--ja-navy)}
.lb__stage{display:grid;place-items:center;min-height:0;min-width:0;padding:12px;overflow:hidden}
#lb-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;animation:var(--slide,none) .3s var(--ease)}
.lb__panel{background:var(--c);color:var(--t);padding:14px 16px 16px;display:flex;align-items:center;gap:16px;justify-content:space-between}
.lb__big{font:800 clamp(34px,8vw,64px)/.9 var(--head);letter-spacing:-.03em;white-space:nowrap}
.lb__cap{flex:1;min-width:0;overflow-wrap:anywhere;font:700 16px/1.25 var(--head)}.lb__cap small{display:block;font:600 14px var(--body)}
.lb__btns{display:flex;gap:8px}
.lb__b{width:56px;height:56px;display:grid;place-items:center;border:0;border-radius:2px;background:var(--t);color:var(--c);cursor:pointer}
.lb__b:hover{background:var(--white);color:var(--ja-navy)}
.lb__b:focus-visible{outline-color:var(--t);outline-offset:3px}
#lightbox :focus-visible{outline-color:var(--white)}
.lb__panel :focus-visible{outline-color:var(--t)}
.lb__close{position:absolute;top:12px;right:12px;z-index:2;background:var(--white);color:var(--ja-navy)}

@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes swing{0%{transform:rotate(-16deg)}40%{transform:rotate(9deg)}70%{transform:rotate(-4deg)}}
@keyframes flagin{from{opacity:0;transform:translateX(20px)}}
@keyframes lbin{from{opacity:0}}
@keyframes sl{from{opacity:0;transform:translateX(40px)}}
@keyframes sr{from{opacity:0;transform:translateX(-40px)}}
@keyframes pulse{from{opacity:.45}}

@media (max-width:380px){.top__in{gap:10px;padding:12px}.top h1{font-size:21px;overflow-wrap:anywhere}.ban{width:56px}.esc{width:42px}.band .nm{font-size:22px}.band summary{padding:12px}.row{padding-left:28px}.lb__panel{flex-wrap:wrap}.lb__btns{margin-left:auto}}
@media (min-width:700px){.bento{--cols:4;--gap:10px}main{padding:28px 24px 56px}.top__in{padding:20px 24px}.esc{width:74px}.ban{width:110px}}
@media (min-width:1000px){
  .shell{grid-template-columns:minmax(380px,42%) 1fr;align-items:start}
  nav{position:sticky;top:0;max-height:100vh;overflow-y:auto}
  .bento{--cols:3}
  main{padding:36px 40px 64px}
}
@media (min-width:1400px){.bento{--cols:4}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.notes{margin-top:40px;padding:24px 16px 28px;background:var(--c);color:var(--t);animation:rise .5s var(--ease) backwards}
.notes h3{margin:0 0 16px;font:800 clamp(26px,5vw,44px)/1.05 var(--head);letter-spacing:-.02em;overflow-wrap:anywhere;text-wrap:balance}
.nform{display:grid;gap:8px;max-width:640px}
.nform label{font:700 15px/1.3 var(--body)}
.nform textarea,.nform input{width:100%;border:3px solid var(--ja-navy);border-radius:2px;background:var(--white);color:var(--ja-navy);font:400 17px/1.5 var(--body);padding:10px 12px;min-height:48px}
.nform textarea{min-height:120px;resize:vertical}
.nform :is(textarea,input):focus-visible{outline:3px solid var(--t);outline-offset:2px}
.nform .nhelp{margin:0;font:600 14px var(--body)}
.nform .cta{justify-self:start;border:3px solid var(--ja-navy);cursor:pointer;margin-top:4px;background:var(--white);color:var(--ja-navy)}
.nform .cta:focus-visible{outline-color:var(--t);outline-offset:3px}
.nform .cta[disabled]{opacity:.6;cursor:progress}
.nform .nmsg{margin:0;min-height:1.5em;font:700 16px/1.4 var(--body)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nlist{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));align-items:start}
.note{background:var(--white);color:var(--ja-navy);border-radius:2px;padding:16px 18px;box-shadow:var(--s1)}
.note.in{animation:rise .55s var(--ease) backwards}
.note .nbody{margin:0 0 10px;font:400 17px/1.5 var(--body);white-space:pre-wrap;overflow-wrap:anywhere}
.note .nmeta{margin:0;font:600 14px/1.3 var(--body);color:var(--ink-soft)}
.nempty{margin:24px 0 0;font:600 17px/1.4 var(--body)}