/* Sistema común del prototipo Jaramillo Mora.
   Valores medidos en senawastudio.com (tokens, tipografía, curvas y duraciones) con la marca Jaramillo Mora encima:
   logo oficial vectorizado y el rojo #E22028 solo como acento. */
:root{
  --wool:#f6f2eb; --linen:#ede6d8; --sand:#d4c9b4; --oak:#a8967e; --walnut:#6b5a48; --slate:#302620;
  --scrim-ink:22,17,13;
  --red:#E22028;
  /* alias usados por las páginas */
  --paper:var(--wool); --paper-2:var(--linen); --card:var(--linen);
  --ink:var(--slate); --stone:var(--walnut); --line:rgba(48,38,32,.14); --earth:var(--slate); --white:var(--wool);
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --display:"Sora","Inter","Helvetica Neue",sans-serif;
  --serif:var(--display);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-settle:cubic-bezier(.76,0,.24,1);
  --ease:var(--ease-settle);
  --d-quick:.3s; --d-fast:.4s; --d-mid:.6s; --d-slow:.9s;
  --g:clamp(24px,5vw,60px);
  --rail:0px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:14px;scrollbar-width:thin;scrollbar-color:var(--sand) var(--wool)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;font-family:var(--sans);font-weight:300;font-size:14px;line-height:1.75;color:var(--slate);background:var(--wool);font-variant-numeric:tabular-nums;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
svg.jm{display:block;fill:currentColor}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.line{display:block;overflow:hidden;padding-bottom:.06em}
.line>span{display:block}
/* etiqueta pequeña en versalitas, como las de Senawa */
.lbl{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}

/* subrayado */
.ul{position:relative;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--d-mid) var(--ease-out)}
.ul:hover,.ul[aria-current="page"]{background-size:100% 1px}

/* ---------- barra superior (home) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;pointer-events:none;padding:28px 60px;padding-top:calc(env(safe-area-inset-top,0px) + 28px);color:var(--wool);transition:background-color .5s var(--ease-out),padding .5s var(--ease-out),color .5s var(--ease-out)}
.nav .inner{max-width:1440px;margin:0 auto;display:flex;justify-content:center;align-items:center;position:relative;min-height:32px}
.nav .brand{pointer-events:auto;transition:opacity var(--d-fast) var(--ease-out);position:relative}
.nav .brand:hover{opacity:.7}
.nav .brand svg.jm{width:150px;height:auto}
.trigger{position:absolute;pointer-events:auto;display:flex;align-items:center;transition:opacity var(--d-fast) var(--ease-out)}
.trigger::before{content:"";position:absolute;width:44px;height:44px;left:50%;top:50%;transform:translate(-50%,-50%)}
.trigger:hover{opacity:.6}
.trigger.menuT{left:0;z-index:110}
.trigger.searchT{right:0}
.burger{width:20px;height:13px;position:relative;display:block}
.burger i{position:absolute;left:0;width:100%;height:1px;background:currentColor;transition:transform var(--d-fast) var(--ease-out),opacity var(--d-quick) var(--ease-out)}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){top:6px}.burger i:nth-child(3){top:12px}
.menu-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .burger i:nth-child(2){opacity:0}
.menu-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-open .trigger.menuT{color:var(--slate)}
.menu-open .nav .brand,.menu-open .nav .searchT{opacity:0;visibility:hidden;pointer-events:none}
@media (max-width:1023px){.nav{padding:24px 40px}}
@media (max-width:767px){.nav{padding:20px 24px;padding-top:calc(env(safe-area-inset-top,0px) + 20px)}.nav .brand svg.jm{width:124px}}

/* pestaña de premio (en el lugar de la de Senawa) */

/* ---------- menú lateral de vidrio ---------- */
.backdrop{position:fixed;inset:0;z-index:98;background:rgba(var(--scrim-ink),.15);opacity:0;visibility:hidden;transition:opacity .5s var(--ease-out),visibility 0s .5s}
.backdrop.open{opacity:1;visibility:visible;transition:opacity .5s var(--ease-out),visibility 0s}
.drawer-m{position:fixed;top:0;bottom:0;left:0;z-index:99;width:min(420px,86vw);display:flex;flex-direction:column;padding:120px 56px 56px;color:var(--slate);
  background:#f6f2eb80;-webkit-backdrop-filter:blur(26px) saturate(125%) brightness(1.1);backdrop-filter:blur(26px) saturate(125%) brightness(1.1);
  box-shadow:0 0 60px rgba(var(--scrim-ink),0);transform:translate(-100%);transition:transform var(--d-mid) var(--ease-settle),box-shadow var(--d-mid) var(--ease-settle)}
.drawer-m.open{transform:none;box-shadow:0 0 60px rgba(var(--scrim-ink),.18)}
.drawer-m .dl{color:var(--walnut);margin-bottom:36px}
.drawer-m nav{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.drawer-m nav a,.drawer-m nav button{font-family:var(--display);font-size:clamp(22px,2.6vw,28px);font-weight:300;letter-spacing:-.01em;line-height:1.2;padding:7px 0;text-align:left}
.drawer-m nav a>span,.drawer-m nav button>span{display:inline-block;transition:opacity var(--d-fast) var(--ease-out),transform .5s var(--ease-settle)}
.drawer-m nav a:hover>span,.drawer-m nav button:hover>span{opacity:.6;transform:translate(8px)}
.drawer-m nav a[aria-current="page"]::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-left:12px;vertical-align:.35em}
.drawer-m .foot-m{margin-top:auto;padding-top:40px;display:flex;flex-direction:column;gap:6px}
.drawer-m .foot-m a{font-size:13px;font-weight:300;width:fit-content}
.drawer-m .foot-m span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--walnut)}
.drawer-m .close-m{position:absolute;top:calc(env(safe-area-inset-top,0px) + 28px);left:56px;display:none}
@media (max-width:767px){.drawer-m{padding:100px 32px 40px}.drawer-m nav a:hover>span,.drawer-m nav button:hover>span{transform:none}}

/* ---------- buscador de proyectos ---------- */
.search{position:fixed;inset:0;z-index:200;background:var(--wool);color:var(--slate);visibility:hidden;overflow-y:auto;clip-path:inset(0 0 100% 0)}
.search .in{max-width:1080px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 28px) var(--g) 80px}
.search .bar{display:flex;justify-content:space-between;align-items:center;min-height:32px}
.search .bar svg.jm{width:130px}
.search .esc{display:flex;gap:10px;align-items:center;color:var(--walnut)}
.search .esc kbd{font:10px var(--sans);border:1px solid var(--sand);border-radius:3px;padding:2px 6px;letter-spacing:.04em}
.search .field{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--slate);margin-top:clamp(60px,12vh,120px);padding-bottom:14px}
.search input{flex:1;border:0;background:none;outline:none;font-family:var(--display);font-weight:300;font-size:clamp(28px,4vw,48px);letter-spacing:-.02em;color:var(--slate);min-width:0}
.search input::placeholder{color:var(--oak)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.search .types{display:flex;flex-wrap:wrap;gap:6px 26px;margin:22px 0 40px}
.search .types button{display:flex;gap:8px;align-items:baseline;color:var(--walnut);transition:color var(--d-fast)}
.search .types button[aria-pressed="true"]{color:var(--slate)}
.search .types button[aria-pressed="true"] .lbl{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px}
.search .types small{font-size:12px}
.search ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--sand)}
.search li a{display:grid;grid-template-columns:96px 1fr auto;gap:22px;align-items:center;padding:14px 0;border-bottom:1px solid var(--sand);position:relative}
.search li a img{width:96px;height:64px;object-fit:cover;border-radius:2px}
.search li b{font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:-.01em;display:block;line-height:1.3}
.search li small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--walnut)}
.search li .pr{font-size:13px;text-align:right}
.search li a::after{content:"→";position:absolute;left:-22px;top:50%;opacity:0;transform:translate(-6px,-50%);transition:opacity .35s var(--ease-out),transform .45s var(--ease-out);color:var(--walnut)}
.search li a:hover::after,.search li a:focus-visible::after{opacity:1;transform:translate(0,-50%)}
.search .empty{padding:30px 0;color:var(--walnut);font-size:14px}
@media (max-width:767px){.search li a{grid-template-columns:72px 1fr}.search li a img{width:72px;height:52px}.search li .pr{grid-column:2;text-align:left}}

/* ---------- cortina entre páginas ---------- */
.shutter{position:fixed;inset:0;z-index:9000;background:var(--wool);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none}
.shutter.covering{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s cubic-bezier(.4,0,.2,1)}
.shutter.revealing{opacity:0;visibility:visible;transition:opacity .55s cubic-bezier(.4,0,.2,1)}
.shutter svg.jm{width:220px;color:var(--slate);opacity:0;overflow:visible;transition:opacity .3s ease}
@media (max-width:767px){.shutter svg.jm{width:170px}}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:14px 22px;border-radius:2px;background:var(--slate);color:var(--wool);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--red);transform:translateY(101%);transition:transform var(--d-mid) var(--ease-settle);z-index:-1}
.btn:hover::before{transform:none}
.btn .t{display:block;overflow:hidden;height:1.4em;line-height:1.4}
.btn .t span{display:block;transition:transform var(--d-mid) var(--ease-settle)}
.btn:hover .t span{transform:translateY(-100%)}
.btn.light{background:var(--wool);color:var(--slate)}
.btn.light:hover{color:var(--wool)}
.chip{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--walnut);padding:4px 0;margin-right:18px;transition:color var(--d-fast)}
.chip:hover{color:var(--slate)}
.chip[aria-pressed="true"]{color:var(--slate);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}

/* aviso breve */
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 90px);z-index:300;transform:translate(-50%,16px);background:var(--wool);color:var(--slate);padding:12px 18px;border-radius:2px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .35s var(--ease-out),transform .45s var(--ease-out);max-width:calc(100% - 32px);text-align:center;box-shadow:0 10px 40px rgba(var(--scrim-ink),.25)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- pie ---------- */
.foot{background:var(--slate);color:var(--wool);padding:clamp(80px,12vh,140px) var(--g) calc(env(safe-area-inset-bottom,0px) + 28px);overflow:hidden}
.foot .cta{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.foot .cta .k{grid-column:1/-1;color:var(--oak)}
.foot .cta h2{grid-column:1/8;font-family:var(--display);font-weight:300;font-size:clamp(32px,4vw,56px);line-height:1.1;margin:0;letter-spacing:-.02em}
.foot .cta .a{grid-column:9/13;display:grid;gap:18px;justify-items:start}
.foot .cta .a p{margin:0;color:var(--sand);font-size:14px;max-width:36ch}
.foot .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:clamp(70px,10vh,120px);padding-top:26px;border-top:1px solid #f6f2eb24}
.foot .cols h4{margin:0 0 10px;color:var(--oak)}
.foot .cols ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.foot .cols a{color:var(--sand);font-size:14px;transition:color var(--d-fast) var(--ease-out)}
.foot .cols a:hover{color:var(--wool)}
.foot .mega{margin-top:clamp(60px,10vh,110px);overflow:hidden}
.foot .mega svg.jm{width:100%;height:auto;color:var(--wool)}
.foot .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:22px;font-size:11px;letter-spacing:.08em;color:var(--oak)}

@media (max-width:767px){
  .foot .cta h2,.foot .cta .a{grid-column:1/-1}
  .foot .cols{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- botón de cerrar: dos trazos que se dibujan y giran al pasar el cursor ---------- */
.xbtn{display:inline-flex;align-items:center;gap:12px;color:inherit;position:relative}
.xbtn::before{content:"";position:absolute;width:44px;height:44px;left:-13px;top:50%;transform:translateY(-50%)}
.xbtn .x{width:18px;height:18px;position:relative;display:block;transition:transform .5s var(--ease-settle)}
.xbtn .x i{position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transform-origin:center}
.xbtn .x i:nth-child(1){transform:rotate(45deg) scaleX(var(--x1,1))}
.xbtn .x i:nth-child(2){transform:rotate(-45deg) scaleX(var(--x2,1))}
.xbtn:hover .x{transform:rotate(90deg)}
.xbtn .lbl{display:block;overflow:hidden;height:1.5em;line-height:1.5}
.xbtn .lbl span{display:block;transition:transform .5s var(--ease-settle)}
.xbtn:hover .lbl span{transform:translateY(-100%)}
.drawer-m .xbtn{position:absolute;top:calc(env(safe-area-inset-top,0px) + 34px);left:56px;display:none}
html.no-nav .drawer-m .xbtn{display:inline-flex}
@media (max-width:767px){.drawer-m .xbtn{left:32px}}
.search .esc .x{width:14px;height:14px}
.search .field{position:relative;border-bottom:0}
.search .field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--slate);transform-origin:left;transform:scaleX(var(--line,1))}

/* ---------- logo en línea (letras animables) y reducción ---------- */
svg.jml .g{transform-box:fill-box;transform-origin:50% 100%}
svg.jml .g-jdot path,svg.jmono .jdot{transition:fill var(--d-mid) var(--ease-out)}
svg.jmono .jdot{fill:var(--red)}
/* el logo deja salir los saltos de los puntos por encima de su caja (la coreografía está en jm.js) */
svg.jml{overflow:visible}
.brand:hover,.railLogo:hover{opacity:1!important}

/* ---------- respuesta al pasar el cursor ---------- */
/* menú: la línea del medio se acorta y la de abajo se corre */
.burger i{transform-origin:left}
.trigger.menuT:hover .burger i:nth-child(2){transform:scaleX(.55)}
.trigger.menuT:hover .burger i:nth-child(3){transform:translateX(5px) scaleX(.75)}
.menu-open .trigger.menuT:hover .burger i:nth-child(1){transform:translateY(6px) rotate(135deg)}
.menu-open .trigger.menuT:hover .burger i:nth-child(3){transform:translateY(-6px) rotate(-135deg)}
/* lupa: se agranda y gira, y aparece un punto rojo */
.trigger.searchT svg{transition:transform .5s var(--ease-settle)}
.trigger.searchT:hover svg{transform:scale(1.18) rotate(-14deg)}
.trigger.searchT::after{content:"";position:absolute;right:-7px;top:-5px;width:5px;height:5px;border-radius:50%;background:var(--red);transform:scale(0);transition:transform .45s var(--ease-settle)}
.trigger.searchT:hover::after{transform:scale(1)}
.trigger:hover{opacity:1}
/* flechas: aparece un círculo y la flecha se adelanta */
.ctrl button,.film>button{position:relative;border-radius:50%;transition:transform .45s var(--ease-settle)}
.ctrl button::before,.film>button::before{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid currentColor;opacity:0;transform:scale(.6);transition:opacity .35s var(--ease-out),transform .45s var(--ease-settle)}
.ctrl button:hover::before,.film>button:hover::before{opacity:.6;transform:none}
.ctrl button:hover,.film>button:hover{opacity:1!important}
/* filtros y botones de texto */
.chip{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color var(--d-fast),background-size var(--d-mid) var(--ease-out)}
.chip:hover{background-size:100% 1px}
.railMenu{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--d-mid) var(--ease-out),opacity var(--d-fast)}
.railMenu:hover{opacity:1!important;background-size:100% 1px}
/* enlaces del pie y del menú */
.foot .cols a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color var(--d-fast) var(--ease-out),background-size var(--d-mid) var(--ease-out)}
.foot .cols a:hover{background-size:100% 1px}
.drawer-m nav a:hover>span::before,.drawer-m nav button:hover>span::before{transform:scale(1)}
.drawer-m nav a>span::before,.drawer-m nav button>span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:10px;vertical-align:.3em;transform:scale(0);transition:transform .45s var(--ease-settle)}
/* resultados del buscador */
.search li a{transition:background-color .35s var(--ease-out),padding .5s var(--ease-settle)}
.search li a:hover{background:rgba(212,201,180,.28);padding-left:12px;padding-right:12px}
.search li a img{transition:transform .6s var(--ease-out)}
.search li a:hover img{transform:scale(1.06)}
/* botón de cerrar */
.xbtn:hover .x i{background:var(--red)}
@media (hover:none){.newsTab .handle:hover::before{transform:scaleY(0)}}

.shutter svg.jml.red .g-jdot path,svg.jml.red .g-jdot path{fill:var(--red)}

/* velo crema desde el primer cuadro (lo pone un script en <head>); se retira cuando la cortina ya cubre */
html.jm-cover::after{content:"";position:fixed;inset:0;z-index:8999;background:var(--wool)}

/* logo del proyecto en los resultados del buscador */
.search li .nm{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.search li .nm .lg{grid-row:span 2;width:44px;height:44px;object-fit:contain}
.search li a img.lg{border-radius:0}
/* letrero del sitio actual (Nuevo, Etapa 2): placa sólida y pequeña, sin el rojo (el rojo marca VIS) */
.badge{display:inline-block;font-family:var(--sans);font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.16em;line-height:1;text-transform:uppercase;
  padding:4px 6px 3px;border-radius:2px;background:var(--slate);color:var(--wool);vertical-align:.25em;margin-left:9px;white-space:nowrap}

/* ---------- pestaña de noticias: pegada al borde derecho; al pasar el mouse se despliega un panel de vidrio
   con las tres últimas. En celular, al tocarla sube una hoja desde abajo ---------- */
.newsTab{position:fixed;right:0;top:0;bottom:0;z-index:90;display:flex;align-items:center;pointer-events:none}
.newsTab .nbox{display:flex;align-items:stretch;pointer-events:auto;max-height:calc(100vh - 140px)}
.newsTab .handle{width:40px;background:#0d0b09;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px 0 18px;
  font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;position:relative;overflow:hidden;isolation:isolate}
.newsTab .handle::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--red);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease-settle)}
.newsTab .handle:hover::before,.newsTab.open .handle::before{transform:scaleY(1)}
.newsTab .handle span{writing-mode:vertical-rl;transform:rotate(180deg)}
.newsTab .handle i{width:5px;height:5px;border-radius:50%;background:var(--red);transition:background .3s}
.newsTab .handle:hover i,.newsTab.open .handle i{background:#fff}
.npanel{width:0;overflow:hidden;color:var(--slate);background:#f6f2ebeb;-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 0 50px rgba(var(--scrim-ink),0);transition:width .6s var(--ease-settle),box-shadow .6s var(--ease-settle)}
.newsTab.open .npanel{width:384px;box-shadow:0 0 50px rgba(var(--scrim-ink),.22)}
.npanel .in{width:384px;padding:26px 28px 24px 26px;display:grid;gap:16px}
.npanel .k{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--walnut)}
.npanel .nclose{display:none;font-size:13px;color:var(--slate)}
.npanel .it{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;opacity:0;transform:translateX(16px);transition:opacity .4s var(--ease-out),transform .55s var(--ease-out)}
.newsTab.open .npanel .it{opacity:1;transform:none}
.newsTab.open .npanel .it:nth-of-type(2){transition-delay:.07s}
.newsTab.open .npanel .it:nth-of-type(3){transition-delay:.14s}
.npanel .it small{display:block;font-size:10.5px;letter-spacing:.04em;color:var(--walnut);margin-bottom:3px}
.npanel .it b{font-family:var(--display);font-weight:400;font-size:15px;line-height:1.3;letter-spacing:-.01em;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--d-mid) var(--ease-out)}
.npanel .it:hover b{background-size:100% 1px}
.npanel .all{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;border-top:1px solid var(--sand);padding-top:14px}
.npanel .all:hover{color:var(--walnut)}
/* miniatura: foto, o una portada tipográfica cuando la noticia no tiene foto */
.nth{width:92px;height:60px;border-radius:2px;overflow:hidden;display:grid;place-items:center;background:var(--slate);color:var(--wool);
  font-family:var(--display);font-weight:300;font-size:17px;letter-spacing:-.03em;line-height:1;text-align:center;padding:4px}
.nth img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.npanel .it:hover .nth img{transform:scale(1.06)}
.nveil{position:fixed;inset:0;z-index:89;background:rgba(var(--scrim-ink),.5);opacity:0;visibility:hidden;transition:opacity .45s var(--ease-out),visibility 0s .45s}
@media (max-width:767px){
  .newsTab .handle{width:30px;padding:12px 0 14px;gap:10px;font-size:8px}
  .npanel{position:fixed;left:0;right:0;bottom:0;width:auto;border-radius:18px 18px 0 0;background:var(--wool);transform:translateY(101%);transition:transform .55s var(--ease-settle)}
  .newsTab.open .npanel{width:auto;transform:none}
  .npanel .in{width:auto;padding:12px 24px calc(env(safe-area-inset-bottom,0px) + 28px)}
  .npanel .in::before{content:"";justify-self:center;width:38px;height:4px;border-radius:99px;background:var(--sand)}
  .npanel .nclose{display:block}
  .npanel .it{opacity:1;transform:none}
  .newsTab.open~.nveil,.nveil.on{opacity:1;visibility:visible;transition:opacity .45s var(--ease-out),visibility 0s}
}