/* ximenaroe.me · sistema de diseño */
@font-face{font-family:"Bricolage";src:url(../fonts/bricolage-latin.woff2) format("woff2-variations");font-weight:200 800;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage";src:url(../fonts/bricolage-latin-ext.woff2) format("woff2-variations");font-weight:200 800;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:"General Sans";src:url(../fonts/generalsans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"General Sans";src:url(../fonts/generalsans-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --paper:#FBFBF9;--ink:#111110;--dim:#6C6A62;--faint:#A5A29A;--hair:rgba(17,17,16,.15);--shade:#EDECE8;
  --ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.4,0,1,1);
  --display:"Bricolage",ui-sans-serif,system-ui,sans-serif;
  --text:"General Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --gut:clamp(16px,3.2vw,40px);
  --inv-dim:rgba(251,251,249,.62);--inv-line:rgba(251,251,249,.22);
  color-scheme:light;
}
/* modo oscuro: se invierte el papel y la tinta; mismo sistema */
:root[data-theme="dark"]{
  --paper:#111110;--ink:#F1F0EC;--dim:#A5A29A;--faint:#6F6D66;--hair:rgba(241,240,236,.16);--shade:#1D1D1B;
  --inv-dim:rgba(17,17,16,.62);--inv-line:rgba(17,17,16,.2);
  color-scheme:dark;
}
html{transition:background-color .5s var(--ease)}
body{transition:background-color .5s var(--ease),color .5s var(--ease)}
.theme{appearance:none;background:none;border:0;padding:6px;margin:-6px -6px -6px 4px;cursor:pointer;color:inherit;display:inline-grid;place-items:center}
.theme .tw{width:13px;height:13px;border-radius:50%;border:1.25px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%);transition:transform .6s var(--ease)}
:root[data-theme="dark"] .theme .tw{transform:rotate(180deg)}
.theme:hover .tw{transform:rotate(90deg)}
:root[data-theme="dark"] .theme:hover .tw{transform:rotate(270deg)}
/* etiquetas de proyecto: bajo el nombre, discretas */
.row .namebox{display:grid;gap:clamp(4px,.6vw,8px);min-width:0}
.row .tags{font:500 10.5px/1.3 var(--text);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
@view-transition{navigation:auto}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:4px;border-radius:2px}
.skip{position:absolute;left:var(--gut);top:-60px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:100}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* tipografía */
.display{font-family:var(--display);font-weight:400;font-optical-sizing:auto;letter-spacing:-.032em;line-height:1.02;margin:0}
.label{font:500 11px/1.4 var(--text);letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.faint{color:var(--faint)}

/* cabecera */
.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gut);background:color-mix(in srgb,var(--paper) 86%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.brand{font-family:var(--display);font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.brand{display:inline-flex;align-items:center;gap:14px}
.xmark{display:block;flex:none}.xmark img{display:block;width:84px;height:84px;margin:-18px 0;mix-blend-mode:multiply}
:root[data-theme="dark"] .xmark img{filter:invert(1);mix-blend-mode:screen}
@media (max-width:520px){.xmark img{width:56px;height:56px;margin:-10px 0}.nav{gap:15px}}
.nav{display:flex;gap:clamp(16px,2.4vw,32px);align-items:center}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav .where{display:none}
@media (min-width:900px){.nav .where{display:inline;color:var(--faint)}}

/* hero */
.hero{display:grid;gap:clamp(40px,5vw,72px);padding:clamp(104px,15vh,150px) var(--gut) clamp(56px,9vh,96px);align-items:center}
@media (min-width:900px){.hero{grid-template-columns:minmax(0,1fr) auto}}
.reel{margin:0;position:relative;aspect-ratio:9/16;background:var(--shade);overflow:hidden;
  width:min(78vw,336px);justify-self:start}
@media (min-width:900px){.reel{width:clamp(280px,25.2vw,406px);justify-self:end;align-self:end;margin-right:clamp(0px,9vw,170px)}}
.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.reel img.on{opacity:1}
.hero .label{display:block;margin-bottom:clamp(22px,3vw,34px)}
.hero h1{font-size:clamp(40px,5.6vw,96px);max-width:14ch}
.hero p{max-width:34em;margin:clamp(26px,3.4vw,40px) 0 0;color:var(--dim);font-size:clamp(16px,1.35vw,19px)}
.cta{display:inline-flex;align-items:center;gap:12px;margin-top:34px;padding:14px 22px;border:1px solid var(--ink);border-radius:999px;
  font-weight:500;transition:background-color .4s var(--ease),color .4s var(--ease)}
.cta:hover{background:var(--ink);color:var(--paper)}
.cta span{transition:transform .4s var(--ease)}
.cta:hover span{transform:translate3d(4px,0,0)}

/* cinta de clientes */
.ribbon{border-block:1px solid var(--hair);overflow:hidden;padding:18px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ribbon ul{display:flex;width:max-content;margin:0;padding:0;list-style:none;animation:ribbon 60s linear infinite}
/* marquesina: velocidad constante a propósito; cualquier curva haría que acelere y frene */
.ribbon li{display:flex;align-items:center;white-space:nowrap;padding-right:44px;font-size:15px;color:var(--dim)}
.ribbon li::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--faint);margin-left:44px}
.ribbon:hover ul{animation-play-state:paused}
@keyframes ribbon{to{transform:translate3d(-50%,0,0)}}

/* índice */
.work{padding:clamp(64px,10vh,120px) var(--gut) clamp(80px,12vh,140px)}
.work-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:18px;border-bottom:1px solid var(--hair)}
.index{list-style:none;margin:0;padding:0}
.row{border-bottom:1px solid var(--hair)}
.row a{display:grid;grid-template-columns:3.2em 1fr auto;align-items:center;gap:clamp(12px,2vw,28px);padding:clamp(16px,2.1vw,26px) 0;
  transition:opacity .45s var(--ease)}
.row .n{font:500 11px/1 var(--text);letter-spacing:.13em;color:var(--faint)}
.row .name{font-size:clamp(23px,4vw,52px)}
.row .meta{text-align:right;display:grid;gap:4px}
.row .meta .label{font-size:10.5px}
.row .meta .label+.label{color:var(--faint)}
.row .thumb{display:none}
@media (hover:hover) and (pointer:fine){
  .index.is-hovering .row a{opacity:.22}
  .index.is-hovering .row a.is-active{opacity:1}
  .row .namebox,.row .n{transition:transform .6s var(--ease)}
  .index.is-hovering .row a.is-active .namebox,.index.is-hovering .row a.is-active .n{transform:translate3d(16px,0,0)}
}

/* imagen que sigue al cursor */
.peek{position:fixed;left:0;top:0;z-index:40;width:clamp(280px,27vw,440px);pointer-events:none;will-change:transform}
.peek-in{position:relative}
.peek img{position:absolute;left:0;top:0;width:100%;height:auto;opacity:0;transform:scale(1.06);
  transition:opacity .22s var(--ease-out),transform .22s var(--ease-out)}
.peek img.on{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .9s var(--ease)}

/* móvil: miniatura fija por fila */
@media (hover:none),(pointer:coarse),(max-width:760px){
  .peek{display:none}
  .row a{grid-template-columns:1fr 34%;grid-template-areas:"name thumb" "meta thumb";row-gap:10px;align-items:end}
  .row .n{display:none}
  .row .namebox{grid-area:name;align-self:end}
  .row .meta{grid-area:meta;text-align:left;align-self:start}
  .row .meta .label+.label{display:none}
  .row .thumb{display:block;grid-area:thumb;aspect-ratio:4/3;overflow:hidden;background:var(--shade)}
  .row .thumb img{width:100%;height:100%;object-fit:cover}
}

/* estudio */
.studio h2{margin:0 0 clamp(22px,3vw,34px)!important}
.studio{display:grid;gap:clamp(32px,5vw,80px);padding:clamp(80px,12vh,140px) var(--gut);border-top:1px solid var(--hair)}
@media (min-width:900px){.studio{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.studio figure{margin:0;max-width:440px;background:var(--shade)}
.studio figure img{width:100%}
.studio .quote{font-size:clamp(28px,3.6vw,52px);margin:18px 0 clamp(28px,4vw,48px);max-width:18ch}
.studio .body{max-width:36em;color:var(--dim);display:grid;gap:1em;font-size:clamp(16px,1.3vw,19px)}
.studio .body p{margin:0}
.studio .body .ink{color:var(--ink)}
.studio .body p:first-child{color:var(--ink);margin-bottom:.35em;font-family:var(--display);font-size:clamp(26px,2.8vw,40px);line-height:1.1;letter-spacing:-.025em}

/* info: servicios, sectores y trayectoria */
.info{padding:clamp(80px,12vh,140px) var(--gut);border-top:1px solid var(--hair)}
.info>h2{margin:0 0 clamp(36px,5vw,64px)}
.info-grid{display:grid;gap:48px clamp(32px,4vw,64px)}
@media (min-width:760px){.info-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.info h3{color:var(--faint);margin:0 0 22px}
.info h3:not(:first-child){margin-top:56px}
.info ul,.info ol{list-style:none;margin:0;padding:0;display:grid;gap:12px;color:var(--dim);font-size:clamp(16px,1.25vw,18px);line-height:1.4}
.info .tools{margin-top:26px}
.svc dd.plain{padding-left:0;text-indent:0}.svc dd.plain::before{content:none}
.svc .sw{color:var(--faint);margin-left:.4em}
.svc{margin:0;display:grid;gap:12px;font-size:clamp(16px,1.25vw,18px);line-height:1.4}
.svc dt{color:var(--ink);font-weight:500}
.svc dt:not(:first-child){margin-top:14px}
.svc dd{margin:0;color:var(--dim);padding-left:1.5em;text-indent:-1.5em}
.svc dd::before{content:"↳";display:inline-block;width:1.5em;text-indent:0;color:var(--faint)}
.track .now{color:var(--ink);font-weight:500}
.track .yr{font-variant-numeric:tabular-nums}
.track .yr::after{content:" ·"}

/* contacto: bloque en tinta, como el cierre de la web actual */
.contact,.foot{--fg:var(--paper);--fg-dim:var(--inv-dim);--line:var(--inv-line);background:var(--ink);color:var(--fg)}
.contact{border-top:0!important}
.contact .lede{color:var(--fg-dim)!important}
.contact .label,.foot .label{color:var(--fg-dim)}
.contact .direct a{border-color:var(--line)!important}
.contact .direct a:hover{border-color:var(--fg)!important}
.contact .direct .mail{font-size:clamp(26px,3.4vw,52px);border:0!important;letter-spacing:-.03em;line-height:1.1;transition:opacity .4s var(--ease)}
.contact .direct .mail:hover{opacity:.7}
.contact .field input,.contact .field textarea{color:var(--fg);border-color:var(--line)}
.contact .field input:focus,.contact .field textarea:focus{border-color:var(--fg)}
.contact form .cta{color:var(--fg);border-color:var(--fg)}
.contact form .cta:hover{background:var(--fg);color:var(--ink)}
.contact :focus-visible{outline-color:var(--fg)}
.foot{border-top:1px solid var(--line)!important}
.foot .faint{color:color-mix(in srgb,var(--paper) 40%,transparent)}
.contact{padding:clamp(80px,12vh,140px) var(--gut);border-top:1px solid var(--hair);display:grid;gap:clamp(36px,5vw,80px)}
@media (min-width:900px){.contact{grid-template-columns:1fr 1fr}}
.contact h2{font-size:clamp(28px,3.4vw,48px);max-width:14ch}
.contact .lede{color:var(--dim);margin:22px 0 0}
.contact .direct{margin-top:30px;display:grid;gap:8px}
.contact .direct a{border-bottom:1px solid var(--hair);width:max-content;transition:border-color .4s var(--ease)}
.contact .direct a:hover{border-color:var(--ink)}
form{display:grid;gap:22px;align-content:start}
.field{display:grid;gap:8px}
.field input,.field textarea{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--hair);padding:8px 0 10px;border-radius:0;
  transition:border-color .4s var(--ease)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.hp{display:none}
form .cta{justify-self:start;margin-top:8px;background:transparent;cursor:pointer;font:inherit;font-weight:500;color:var(--ink)}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:26px var(--gut) 34px;border-top:1px solid var(--hair)}

/* transición: la imagen del índice se abre en el proyecto */
.fly{position:fixed;left:0;top:0;z-index:80;overflow:hidden;transform-origin:0 0;will-change:transform;pointer-events:none}
.fly img{position:absolute;left:50%;top:50%;max-width:none;will-change:transform}
.fly-bg{position:fixed;inset:0;z-index:79;background:var(--paper);opacity:0;pointer-events:none}
.fly-cover{position:fixed;inset:0;z-index:81;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--gut);color:var(--paper);opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.fly-cover.show{opacity:1;pointer-events:auto}
.fly-cover .display{font-size:clamp(44px,8vw,128px);text-shadow:0 1px 30px rgba(17,17,16,.25)}
.fly-cover.on-paper{color:var(--ink)}.fly-cover.on-paper .display{text-shadow:none}
.fly-cover button{position:absolute;top:calc(var(--gut) + 56px);right:var(--gut);font:500 14px var(--text);color:inherit;background:transparent;border:1px solid currentColor;border-radius:999px;padding:10px 18px;cursor:pointer}

/* caja de proyecto: se abre sobre la home y se pasa como un slider */
html.cs-lock{overflow:hidden}
.case-box{position:fixed;inset:0;z-index:70;--in:clamp(0px,1.6vw,22px)}
.case-box[hidden]{display:none}
.cs-scrim{position:absolute;inset:0;background:rgba(17,17,16,.55);opacity:0;transition:opacity .6s var(--ease)}
.cs-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  --ar:1.5;--mw:1200px;width:min(92vw,1200px,var(--mw),calc((100svh - 150px) * var(--ar)));aspect-ratio:var(--ar);background:var(--paper);overflow:hidden;opacity:0;transition:opacity .35s var(--ease)}
.case-box.is-full .cs-panel{left:var(--in);top:var(--in);right:var(--in);bottom:var(--in);width:auto;aspect-ratio:auto;transform:none}
.case-box.show .cs-scrim,.case-box.show .cs-panel{opacity:1}
@media (max-width:760px){.case-box{--in:0px}.cs-scrim{background:rgba(17,17,16,.94)}.case-box .cs-panel{width:min(100vw,var(--mw),calc((100svh - 150px) * var(--ar)))}}
.cs-track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain;outline:none}
.cs-track::-webkit-scrollbar{display:none}
.cs-track.jump{scroll-snap-type:none}
.slide{flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:hidden;
  padding:clamp(40px,6%,72px) clamp(28px,6%,80px)}
.case-box.is-full .slide{padding:clamp(72px,10vh,104px) clamp(20px,5vw,80px) clamp(84px,11vh,112px)}
@media (max-width:760px){.slide{padding:28px 20px}}
.cs-btn{font:500 13px/1 var(--text);color:var(--ink);background:color-mix(in srgb,var(--paper) 88%,transparent);border:1px solid var(--hair);border-radius:999px;
  padding:11px 16px;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .35s var(--ease),color .35s var(--ease),opacity .35s var(--ease)}
.cs-btn:hover{background:var(--ink);color:var(--paper)}
.cs-btn[disabled]{opacity:.3;pointer-events:none}
.cs-x{position:absolute;top:clamp(14px,2vw,24px);right:clamp(14px,2vw,24px);z-index:3}
.case-box.show .cs-x,.case-box.show .cs-bar{opacity:1}
.cs-x,.cs-bar{opacity:0;transition:opacity .45s var(--ease)}
.cs-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:clamp(14px,2vw,24px)}
.cs-count{background:color-mix(in srgb,var(--paper) 88%,transparent);border-radius:999px;padding:9px 14px;color:var(--ink);font-variant-numeric:tabular-nums}
.cs-nav{display:flex;gap:8px}.cs-nav .cs-btn{width:44px;height:44px;padding:0;font-size:16px}
/* portada */
.slide.cover{padding:0;display:flex;flex-direction:column;justify-content:flex-end}
.slide.cover.full{background:var(--ink)}
.slide.cover.full>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.slide.cover.full::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,16,0) 40%,rgba(17,17,16,.6));pointer-events:none}
.slide.cover.contained{background:var(--shade)}
.slide.cover.contained>img{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);width:auto;height:min(48%,var(--h));max-width:min(88%,var(--w));object-fit:contain}
.slide.cover.contained .cs-title h2{font-size:clamp(36px,5.6vw,88px)}
.cs-title,.cs-facts{position:relative;z-index:1}
.cs-title{padding:0 clamp(20px,5vw,80px);display:grid;gap:10px}
.cs-title h2{font-size:clamp(40px,6.6vw,108px)}
.cs-sub{margin:0;font-family:var(--display);font-size:clamp(20px,2.2vw,32px);letter-spacing:-.02em}
.cs-facts{margin:22px 0 0;padding:18px clamp(20px,5vw,80px) clamp(28px,5%,56px);display:flex;flex-wrap:wrap;gap:14px clamp(24px,4vw,56px)}
.cs-facts dd{margin:4px 0 0}
.slide.cover.full .cs-title,.slide.cover.full .cs-facts,.slide.cover.full .label{color:var(--paper)}
.slide.cover.full .cs-facts .label{color:rgba(251,251,249,.7)}
.slide.cover.full .cs-facts{border-top:1px solid rgba(251,251,249,.25)}
.slide.cover.contained .cs-facts{border-top:1px solid var(--hair)}
/* texto */
.slide.lead,.slide.points{display:grid;align-content:center;gap:clamp(24px,4vw,56px)}
@media (min-width:900px){.slide.lead{grid-template-columns:minmax(0,1fr) minmax(0,3fr);align-items:start;align-content:center}}
.slide.lead .big{font-size:clamp(26px,3.2vw,52px);max-width:22ch}
.slide.lead .txt{margin:clamp(20px,3vw,36px) 0 0;max-width:38em;color:var(--dim);font-size:clamp(16px,1.3vw,19px)}
.pts{display:grid;gap:clamp(24px,3vw,48px)}
@media (min-width:900px){.pts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pts .pn{font:500 11px/1 var(--text);letter-spacing:.13em;color:var(--faint)}
.pts h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.4vw,36px);letter-spacing:-.025em;line-height:1.08;margin:14px 0 14px}
.pts p{margin:0;color:var(--dim)}
/* imágenes y vídeo */
.slide.media{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,24px);padding:0;background:var(--ink)}
.slide.media.pair{padding:clamp(16px,3%,40px)}
.case-box.is-full .slide.media{padding:clamp(72px,10vh,104px) clamp(20px,5vw,80px) clamp(84px,11vh,112px);background:none}

.slide.media figure{margin:0;height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0}
.slide.media img,.slide.media video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.slide.media.pair figure{flex:1 1 0}
@media (max-width:760px){.slide.media.pair{flex-direction:column}.slide.media.pair figure{height:auto;flex:1 1 0;min-height:0}}
.slide.intro-title{display:flex;flex-direction:column;justify-content:flex-end;gap:12px}
.slide.intro-title h2{font-size:clamp(44px,7vw,112px)}
.slide.intro-title .cs-sub{margin:0}
.slide.intro-title .cs-facts{padding:18px 0 0;margin-top:clamp(16px,3%,32px);border-top:1px solid var(--hair)}
@media (max-width:760px){.slide.lead .big{font-size:24px}.slide.lead .txt{font-size:15px;margin-top:14px}.pts{gap:16px}.pts h3{font-size:20px;margin:6px 0}.pts p{font-size:14px}.slide.lead,.slide.points{gap:14px;align-content:start}}
/* final */
.slide.end{display:grid;align-content:center;justify-items:start;gap:18px}
.cs-next{font-size:clamp(40px,7vw,112px);background:none;border:0;padding:0;color:var(--ink);cursor:pointer;text-align:left}
.cs-next span{display:inline-block;transition:transform .5s var(--ease)}
.cs-next:hover span{transform:translate3d(14px,0,0)}
.cs-close-link{background:none;border:0;padding:0;cursor:pointer;border-bottom:1px solid var(--hair)!important;padding-bottom:3px}

/* cinta de clientes cuando la mueve el script */
.ribbon.live ul{animation:none;will-change:transform}

/* entradas al bajar */
.js .reveal{opacity:0;transform:translate3d(0,22px,0);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal-img{opacity:0;transform:scale(1.06);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal-img.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .cs-scrim,.cs-panel,.cs-btn,.cs-next span{transition-duration:.01ms}
  html{scroll-behavior:auto}
  .ribbon ul{animation:none;flex-wrap:wrap;width:auto;padding:0 var(--gut)}
  .ribbon li[aria-hidden]{display:none}
  .row a,.peek img,.peek img.on,.nav a::after,.cta,.cta span,.js .reveal,.js .reveal-img{transition-duration:.01ms;transition-delay:0ms}
  .js .reveal,.js .reveal-img{opacity:1;transform:none}
  .row .namebox,.row .n{transition-duration:.01ms}
  @view-transition{navigation:none}
}