/* =====================================================================
   Testeur de Voyage · Waynabox France — hoja única de la web
   Fuente: design system «Testeur de Voyage» v1 (tokens, componentes) y la
   landing de referencia v4 de la diseñadora. Las stories de Chromium llevan
   su propio CSS (src/views/story.js) y solo comparten fonts.css.
   ===================================================================== */
:root{
  --pink:#E30054;--pink-h:#C1004A;--pink-a:#A8003F;--ink:#111111;--off:#F2F0EF;--white:#FFFFFF;
  --ink-70:rgba(17,17,17,.70);--ink-60:rgba(17,17,17,.60);--ink-45:rgba(17,17,17,.45);--ink-25:rgba(17,17,17,.25);--ink-20:rgba(17,17,17,.20);
  --line:rgba(17,17,17,.14);--off-72:rgba(242,240,239,.72);--off-50:rgba(242,240,239,.50);--line-inv:rgba(242,240,239,.14);
  --pink-t:#C1004A;--subtle:#E8E5E3;--sable:#EFE9DE;--pink-08:#FDE8EF;--ok:#2E7D5B;--error:#B3261E;--focus:rgba(227,0,84,.4);
  --f-d:'Montserrat','Helvetica Neue',sans-serif;--f-b:'Lato',system-ui,sans-serif;--f-h:'Caveat',cursive;
  --ease:cubic-bezier(.2,.9,.3,1);--pad:clamp(20px,4vw,48px);--max:1296px;--navh:65px;
  --grain:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22140%22%20height=%22140%22%3E%3Cfilter%20id=%22n%22%3E%3CfeTurbulence%20type=%22fractalNoise%22%20baseFrequency=%22.85%22%20numOctaves=%223%22%20stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect%20width=%22140%22%20height=%22140%22%20filter=%22url%28%23n%29%22%20opacity=%22.55%22/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--navh) + 8px)}
body{margin:0;background:var(--off);color:var(--ink);font:400 16px/1.6 var(--f-b);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
h1,h2,h3,h4,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:var(--pink);text-decoration:none}
a:hover{color:var(--ink)}
::selection{background:var(--pink);color:#fff}
button{font:inherit;color:inherit}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.ic{display:block;flex:0 0 auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed!important;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:200;background:var(--ink);color:#fff;padding:12px 16px;border-radius:999px;font:700 14px/1 var(--f-b)}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.todo{background:var(--pink-08);color:var(--ink);padding:0 4px;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* retícula 4 / 8 / 12 columnas, como la landing de referencia */
.g{display:grid;--cols:4;--gut:16px;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gut)}
.g>*{grid-column:var(--m,1 / -1);grid-row:var(--mr,auto)}
@media(min-width:720px){.g{--cols:8;--gut:20px}.g>*{grid-column:var(--t,var(--m,1 / -1));grid-row:var(--tr,var(--mr,auto))}}
@media(min-width:1024px){.g{--cols:12;--gut:24px}.g>*{grid-column:var(--d,var(--t,var(--m,1 / -1)));grid-row:var(--dr,var(--tr,var(--mr,auto)))}}

/* ---------- tipografía ---------- */
/* rosa en texto pequeño sobre fondo claro: el tono «hover» del DS (#C1004A) para llegar a AA */
.label{font:700 12px/1.2 var(--f-b);letter-spacing:.16em;text-transform:uppercase;color:var(--pink-t)}
.sec.dark .label{color:var(--pink)}
.label.mut{color:var(--off-72)}
.d{font-family:var(--f-d);font-weight:900;letter-spacing:-.04em;text-transform:uppercase;text-wrap:balance}
.h2{font:900 clamp(40px,6vw,80px)/.88 var(--f-d);letter-spacing:-.04em;text-transform:uppercase;text-wrap:balance}
.h3{font:800 clamp(19px,1.8vw,24px)/1.15 var(--f-d);letter-spacing:-.015em;text-transform:uppercase}
.lead{font-size:18px;line-height:1.55;color:var(--ink-70);text-wrap:pretty}
.body{font-size:15px;line-height:1.55;color:var(--ink-70);text-wrap:pretty}
.caption{font-size:13px;line-height:1.5;color:var(--ink-60);text-wrap:pretty}
.hand{font:600 clamp(22px,2vw,26px)/1.1 var(--f-h);color:var(--pink)}
.u{position:relative;display:inline-block}
.u>svg{position:absolute;left:-2%;bottom:-.15em;width:104%;height:.2em;overflow:visible}
.lnk{color:var(--ink);border-bottom:1.5px solid var(--pink)}
.lnk:hover{color:var(--pink)}
.lnk.p{color:var(--pink-t);font-weight:700}
.lnk.p:hover{color:var(--ink)}

/* ---------- botones (DS · Button) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:17px 30px;border:0;border-radius:999px;background:var(--pink);color:#fff;font:700 16px/1 var(--f-b);letter-spacing:.02em;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color 120ms var(--ease),color 120ms var(--ease),border-color 120ms var(--ease)}
.btn:hover{background:var(--pink-h);color:#fff}
.btn:active{background:var(--pink-a)}
.btn .ar{display:inline-flex;transition:transform .16s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.btn-lg{min-height:56px;padding:0 32px}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px}
.btn-2{background:transparent;color:var(--ink);border:1.5px solid var(--ink);padding:16px 28px}
.btn-2:hover,.btn-2:active{background:var(--ink);color:var(--off)}
.btn-2.inv{color:#fff;border-color:#fff}
.btn-2.inv:hover{background:var(--off);color:var(--ink)}
.btn-inv{background:#fff;color:var(--pink)}
.btn-inv:hover,.btn-inv:active{background:var(--off);color:var(--pink-h)}
.btn-ink{background:var(--ink)}
.btn-ink:hover{background:#000}
.btn:disabled{background:var(--subtle);color:var(--ink-25);cursor:not-allowed}
.btn-block{display:flex;width:100%}
.ibtn{width:48px;height:48px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;background:transparent;color:var(--ink);border:1.5px solid var(--ink-20);flex:0 0 auto}
.ibtn:hover{background:var(--pink-08);border-color:var(--ink)}

/* pastille / chip */
.pill{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--f-b);letter-spacing:.14em;text-transform:uppercase;border-radius:999px;white-space:nowrap;padding:8px 12px}
.pill.ink{background:var(--ink);color:var(--off)}
.pill.pk{background:var(--pink);color:#fff}
.pill.wh{background:#fff;color:var(--ink);border:1px solid var(--ink-20)}
.pill.ov{background:rgba(17,17,17,.72);color:#fff;font-size:10px;padding:7px 11px}
.iconbox{width:48px;height:48px;border-radius:12px;background:var(--sable);display:flex;align-items:center;justify-content:center;flex:0 0 auto}

/* etiqueta de % (DS · ScoreTag) */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;gap:.45em;height:33px;padding:0 14px;background:#fff;border:1.5px solid var(--ink);border-radius:999px;font:400 13px/1 var(--f-d);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.tag b{font-weight:800}
.tag.main{font-weight:800}

/* ---------- navegación fija ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;background:var(--off);border-bottom:1px solid var(--line);transition:border-color .2s ease}
.nav.sc{border-bottom-color:var(--ink-25)}
.nav .in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav .logo-a{display:flex;align-items:center;min-height:44px}
.nav .logo{width:174px;height:28px}
.nav .r{display:flex;align-items:center;gap:12px}
.nav .back{font:700 14px/1 var(--f-b);color:var(--ink);display:inline-flex;align-items:center;gap:8px;min-height:44px}
.nav .back:hover{color:var(--pink)}
.navsp{height:65px}
@media(max-width:420px){.nav .logo{width:138px;height:22px}.nav .btn-sm{padding:0 16px}}

/* ---------- cinta ---------- */
.band{background:var(--ink);color:var(--off);overflow:hidden;height:44px;display:flex;align-items:center}
.band .track{display:flex;width:max-content;will-change:transform}
.band .run{display:flex;align-items:center;gap:32px;padding-right:32px;font:700 11px/1 var(--f-b);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.band .run span{display:inline-flex;align-items:center;gap:8px}
.band .run img{width:10px;height:10px}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate;min-height:max(600px,calc(var(--vph,100dvh) - var(--navh) - 44px));display:flex;flex-direction:column}
.hero .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;z-index:-3;filter:saturate(1.02) contrast(1.03)}
@media(min-width:900px){.hero .ph{object-position:78% 30%}}
.hero .flash{z-index:-1}
.hero .veil{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(17,17,17,.34) 0%,rgba(17,17,17,0) 22%,rgba(17,17,17,.06) 40%,rgba(17,17,17,.56) 66%,rgba(17,17,17,.86) 100%)}
.hero .top{position:relative;width:100%;max-width:var(--max);margin:0 auto;padding:clamp(24px,5vh,48px) var(--pad) 0}
.hero .sticker{width:clamp(140px,15vw,220px);height:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.28))}
.hero .g{position:relative;width:100%;max-width:var(--max);margin:0 auto;padding:40px var(--pad) 0;flex:1 1 auto;align-content:end;align-items:end;row-gap:28px}
.hero h1{--t:1 / -1;--d:1 / span 8;font:900 clamp(46px,min(7.4vw,11vh),116px)/.88 var(--f-d);letter-spacing:-.04em;text-transform:uppercase;color:#fff}
.hero h1>span{display:block}
.hero h1>span.mb{margin-bottom:.16em}
.hero .side{--t:1 / span 6;--d:9 / span 4;display:flex;flex-direction:column;align-items:flex-start;gap:28px;padding-bottom:.4em}
.hero .side p{font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:#fff;max-width:36ch;text-wrap:pretty}
.hero .side p b{font-weight:700}
.hero .hfoot{position:relative;width:100%;max-width:var(--max);margin:clamp(40px,8vh,88px) auto 0;padding:0 var(--pad)}
.hero .hfoot p{display:flex;align-items:flex-start;gap:10px;border-top:1px solid rgba(242,240,239,.24);padding:18px 0 clamp(20px,3vh,28px);font-size:13px;line-height:1.5;color:rgba(255,255,255,.86);text-wrap:pretty}
.hero .hfoot .ic{margin-top:1px}
@media(max-width:719px){.cta-row,.cta-row .btn{width:100%}.cta-row .btn{min-height:56px}}
.cta-row{display:flex;align-self:stretch}
@media(min-width:720px){.cta-row{align-self:flex-start}}

/* ---------- secciones ---------- */
.sec{padding:clamp(56px,8vw,112px) 0}
.sec.sub{background:var(--subtle)}
.sec.dark{background:var(--ink);color:var(--off);overflow:hidden}
.sec.pk{position:relative;background:var(--pink);color:#fff;overflow:hidden}
.sec.dots{background-color:var(--off);background-image:radial-gradient(rgba(17,17,17,.12) 1.4px,transparent 1.6px),radial-gradient(rgba(17,17,17,.12) 1.4px,transparent 1.6px);background-size:16px 16px;background-position:0 0,8px 8px;border-top:1px solid var(--line)}

/* premio */
.prix-head{row-gap:16px;align-items:end;margin-bottom:clamp(32px,5vw,56px)}
.prix-head h2{--t:1 / span 7;--d:1 / span 8;font-size:clamp(40px,6.4vw,88px)}
.prix-head .lead{--t:1 / span 6;--d:9 / span 4;padding-bottom:.4em}
.trips{align-items:stretch;row-gap:24px}
.trip{--t:auto;--d:span 4;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .24s var(--ease),border-color .24s ease}
@media(hover:hover){.trip:hover{transform:translateY(-4px);border-color:var(--ink)}}
.trip .im{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink)}
.trip .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);filter:saturate(1.02) contrast(1.03)}
@media(hover:hover){.trip:hover .im img{transform:scale(1.04)}}
.trip .im img.ht{clip-path:inset(0 0 100% 0);transition:clip-path .2s steps(5,end),transform .6s var(--ease)}
@media(hover:hover) and (pointer:fine){.trip:hover .im img.ht{clip-path:inset(0 0 0 0)}}
.trip .im .pill{position:absolute;left:12px;top:12px}
.trip .tx{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px;flex:1 1 auto}
.trip h3{font:800 clamp(19px,1.7vw,22px)/1.15 var(--f-d);letter-spacing:-.015em;text-transform:uppercase}
.trip p{font-size:15px;line-height:1.55;color:var(--ink-70)}
@media(max-width:1023px){.trips.g{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 8px;scroll-padding:0 var(--pad);scrollbar-width:none}.trips.g::-webkit-scrollbar{display:none}.trips.g>*{flex:0 0 min(82%,380px);scroll-snap-align:start}}
.value{background:var(--ink);color:var(--off);border-radius:20px;margin-top:clamp(40px,6vw,72px);padding:clamp(32px,4.4vw,64px) clamp(24px,4.4vw,64px);row-gap:28px;align-items:end}
.value .l{--t:1 / -1;--d:1 / span 7}
.value .big{font:900 clamp(56px,min(15vw,8.6vw + 24px),128px)/.86 var(--f-d);letter-spacing:-.045em;color:#fff;white-space:nowrap;padding-bottom:.16em;margin-top:16px}
.value .big .u>svg{bottom:-.14em;height:.16em}
.value .r{--t:1 / span 6;--d:9 / span 4;display:flex;flex-direction:column;gap:12px}
.value .r h3{font:800 clamp(18px,1.6vw,21px)/1.25 var(--f-d);letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance;color:#fff}
.value .r p{font-size:15px;line-height:1.6;color:var(--off-72);text-wrap:pretty}
.fine{margin-top:20px;max-width:80ch}

/* pasos */
.steps-g{row-gap:clamp(32px,4vw,48px)}
.steps-g .hd{--t:1 / -1;--d:1 / span 5;--dr:1}
.steps-g .hd .label{margin-bottom:20px}
.steps{--t:1 / -1;--d:7 / span 6;--dr:1 / span 2;position:relative;display:flex;flex-direction:column;gap:12px}
.steps .rail{position:absolute;left:15px;top:44px;bottom:48px;width:2px;background:var(--line)}
.steps .rail i{position:absolute;inset:0;background:var(--pink);transform-origin:top;transform:scaleY(0)}
.step{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:clamp(16px,2vw,24px);align-items:start}
.step .node{position:relative;z-index:1;margin-top:clamp(20px,2.4vw,28px);width:32px;height:32px;border-radius:10px;background:var(--subtle);border:1.5px solid var(--ink-25);color:var(--ink-60);font:800 14px/1 var(--f-d);display:flex;align-items:center;justify-content:center;transition:background .24s ease,color .24s ease,border-color .24s ease}
.step .node.on{background:var(--pink);border-color:var(--pink);color:#fff}
.step .node.done{background:var(--ink);border-color:var(--ink);color:#fff}
.step .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(20px,2.4vw,28px);display:grid;grid-template-columns:minmax(0,1fr) 48px;column-gap:16px;row-gap:8px;transition:border-color .24s ease}
.step .card.cur{border-color:var(--ink)}
.step .card .t{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:4px;align-self:center}
.step .card .iconbox{grid-row:1 / span 2;grid-column:2}
.step .card .t .label{font-size:11px}
.step .card .acts{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
@media(max-width:719px){.step .card{column-gap:12px}.step .card .iconbox{grid-row:1;width:40px;height:40px;border-radius:10px}.step .card .iconbox .ic{width:22px;height:22px}.step .card>p{grid-column:1 / -1}}
.steps-g .aside{--t:1 / -1;--d:1 / span 5;--dr:2;align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.meta{display:flex;align-items:center;gap:6px;font:700 11px/1.4 var(--f-b);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-70)}
.gift{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;align-items:start;border-top:1px solid var(--line);padding-top:20px;margin-top:12px;max-width:420px;width:100%}
.gift .ic{color:var(--pink);margin-top:1px}
.gift b{display:block;font:700 15px/1.4 var(--f-b);color:var(--ink)}
.gift span{font-size:14px;line-height:1.55;color:var(--ink-70)}

/* el test (oscuro) */
.test-g{row-gap:clamp(40px,4.4vw,56px)}
.test-g .hd{--mr:1;--t:1 / -1;--d:1 / span 7;--dr:1;align-self:start}
.test-g .hd .label{margin-bottom:20px}
.test-g .hd h2{font-size:clamp(38px,5.4vw,72px);line-height:.9;color:#fff;margin-bottom:24px}
.test-g .hd .lead{color:rgba(242,240,239,.8);max-width:50ch}
.test-g .obj{--mr:2;--t:2 / span 6;--d:9 / span 4;--dr:1 / span 2;align-self:center;display:flex;flex-direction:column;gap:clamp(20px,2vw,28px);position:relative;z-index:2}
.note{display:flex;align-items:flex-end;gap:8px;transform:rotate(-2deg);transform-origin:left bottom;align-self:flex-start;max-width:30ch}
.note p{max-width:26ch}
.note svg{width:40px;height:34px;flex:0 0 auto}
.storyobj{position:relative;width:min(56vw,232px);align-self:flex-end;margin-right:10%}
.storyobj .ghost{position:absolute;inset:0;border:1px solid rgba(242,240,239,.24);border-radius:16px;transform:rotate(-3.5deg)}
.storyobj .img{position:relative;display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:16px;background:var(--off);transform:rotate(2.5deg);transition:transform .24s var(--ease)}
@media(hover:hover){.storyobj:hover .img{transform:rotate(1deg) translateY(-6px)}}
.storyobj .s1{position:absolute;right:-7%;top:6%;width:clamp(26px,2.6vw,38px)}
.storyobj .s2{position:absolute;left:-6%;bottom:14%;width:clamp(18px,1.7vw,24px)}
@media(min-width:720px){.storyobj{width:236px;margin-right:18%}}
@media(min-width:1024px){.storyobj{width:clamp(216px,18.5vw,264px);align-self:center;margin-right:0}.test-g .note{margin-left:clamp(-72px,-4vw,-24px)}}
.objcap{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:28px}
.objcap p{font-size:14px;line-height:1.5;color:rgba(242,240,239,.8);max-width:30ch;text-wrap:pretty}
.objcap .sig{font:700 10px/1.6 var(--f-b);letter-spacing:.16em;text-transform:uppercase;color:var(--off-50);text-align:right;flex:0 0 auto;max-width:none}
.objcap .sig b{color:var(--off-72);font-weight:700}
.test-g .seal{--mr:3;--t:1 / -1;--tr:3;--d:1 / span 6;--dr:2;align-self:end}
.sealcard{position:relative;border:1px solid rgba(242,240,239,.24);border-radius:16px;padding:clamp(22px,2.6vw,32px);background:var(--ink);max-width:560px;display:flex;flex-direction:column;gap:14px}
.sealcard .pop{position:absolute;right:clamp(22px,2.6vw,32px);top:clamp(22px,2.6vw,32px);height:32px;padding:0 12px 0 10px;border-radius:999px;background:var(--pink);color:#fff;display:flex;align-items:center;gap:6px;font:900 11px/1 var(--f-d);letter-spacing:.1em}
.sealcard .hd2{display:flex;flex-direction:column;gap:6px;padding-right:112px}
.sealcard .hd2 h3{font:900 clamp(22px,2vw,28px)/.95 var(--f-d);text-transform:uppercase;letter-spacing:-.03em;color:#fff}
.sealcard .hd2 span{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--f-b);letter-spacing:.16em;text-transform:uppercase;color:var(--off-72)}
.sealcard>p{font:700 15px/1.55 var(--f-b);color:#fff;text-wrap:pretty}
.sealcard .ft{display:flex;flex-wrap:wrap;gap:6px 20px;border-top:1px solid var(--line-inv);padding-top:14px;font-size:13px;line-height:1.5;color:var(--off-72)}
.sealcard .ft b{color:var(--off)}

/* banda rosa */
.cta-g{row-gap:32px}
@media(min-width:1024px){.cta-g{align-content:center;min-height:clamp(560px,46vw,720px)}}
.cta-g .hd{--mr:1;--t:1 / span 6;--d:1 / span 6;--dr:1;position:relative;z-index:2}
.cta-g h2{font-size:clamp(44px,6.2vw,96px);letter-spacing:-.045em;color:#fff;margin-bottom:28px}
.cta-g h2>span{display:block}
.cta-g .hd>p{font-size:clamp(17px,1.4vw,20px);line-height:1.55;margin-bottom:20px;max-width:42ch;color:#fff;text-wrap:pretty}
.cta-g .hd .meta{color:#fff;font-size:12px;letter-spacing:.16em}
.cta-g .act{--mr:3;--t:1 / span 6;--d:1 / span 6;--dr:2;position:relative;z-index:2}
.polas{--mr:2;--t:1 / -1;--d:1 / -1;z-index:1;pointer-events:none;position:relative;aspect-ratio:1/1.08;margin:0 calc(-1 * var(--pad))}
.polas>span{position:absolute;display:block;will-change:transform}
.polas img{display:block;width:100%;height:auto}
.polas .bk{width:62%;right:-16%;top:0}
.polas .bk img{transform:rotate(8deg)}
.polas .fr{width:64%;left:9%;bottom:0}
.polas .fr img{transform:rotate(7deg)}
@media(min-width:720px){.polas{aspect-ratio:1/.78}.polas .bk{width:46%;right:-8%}.polas .fr{width:48%;left:22%}}
@media(min-width:1024px){.polas{position:absolute;inset:0;aspect-ratio:auto;margin:0}.polas .bk{width:33vw;left:79%;right:auto;top:-6vw}.polas .fr{width:31vw;left:53%;bottom:-10vw}}

/* qui sommes-nous */
.about{position:relative;overflow:hidden}
.bleed{position:relative;aspect-ratio:4/5;max-height:78vh;margin:-56px 0 40px;overflow:hidden;background:var(--ink)}
.bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;filter:saturate(1.02) contrast(1.03)}
@media(min-width:720px){.bleed{position:absolute;left:0;top:0;bottom:0;width:calc(50% - 10px);aspect-ratio:auto;max-height:none;margin:0}}
@media(min-width:1024px){.bleed{width:calc(50% + 12px)}}
.about .col{--t:5 / span 4;--d:8 / span 5}
.about h2{font-size:clamp(36px,4.6vw,60px);line-height:.9;margin:20px 0 24px}
.about .lead{margin-bottom:32px}
.rows{border-bottom:1px solid var(--line)}
.rows>div{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.rows h3{font:800 19px/1.2 var(--f-d);letter-spacing:-.01em;text-transform:uppercase;margin:4px 0}
.rows p{font-size:15px;line-height:1.55;color:var(--ink-70)}

/* FAQ */
.faq-g{row-gap:32px}
.faq-g .hd{--t:1 / -1;--d:1 / span 4}
.faq-g .hd .label{margin-bottom:20px}
.faq-g .hd h2{font-size:clamp(38px,4.6vw,60px);line-height:.9}
@media(min-width:1024px){.faq-g .hd{position:sticky;top:104px;align-self:start}}
.faq{--t:1 / -1;--d:6 / span 7;background:#fff;border:1px solid var(--line);border-radius:16px;padding:4px clamp(20px,2.6vw,32px)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 0;font:700 17px/1.3 var(--f-d);color:var(--ink);transition:color .12s ease}
.faq summary:hover,.faq details[open] summary{color:var(--pink)}
.faq summary .chev{display:inline-flex;transition:transform .2s var(--ease)}
.faq details[open] .chev{transform:rotate(180deg)}
.faq details p{font-size:15px;line-height:1.6;color:var(--ink-70);padding:0 40px 20px 0;text-wrap:pretty}

/* pie */
.foot{background:var(--ink);color:var(--off-72);padding:clamp(48px,6vw,80px) 0 clamp(32px,4vw,48px)}
.foot .g{row-gap:28px;align-items:end}
.foot .st{--t:1 / span 4;--d:1 / span 4;width:clamp(180px,22vw,300px);height:auto}
.foot .r{--t:5 / span 4;--d:7 / span 6;display:flex;flex-direction:column;gap:16px;justify-self:end;align-items:flex-end}
.foot .r img{width:140px}
.foot .r a{display:inline-flex;align-items:center;gap:8px;font:700 11px/1.3 var(--f-b);letter-spacing:.16em;text-transform:uppercase;color:var(--off-72)}
.foot .r a:hover{color:#fff}
.foot .legal{border-top:1px solid var(--line-inv);padding-top:24px;display:flex;flex-direction:column;gap:16px}
.foot .legal p{font-size:13px;line-height:1.5;max-width:88ch;text-wrap:pretty}
.foot .legal a{color:#fff;border-bottom:1.5px solid var(--pink)}
.foot .legal a:hover{color:var(--pink)}
.foot .legal .copy{font:700 11px/1.6 var(--f-b);letter-spacing:.16em;text-transform:uppercase;color:var(--off-50)}
@media(max-width:719px){.foot .r{justify-self:start;align-items:flex-start}}

/* aviso de versión de revisión (?lang=es) */
.langbadge{position:fixed;right:12px;bottom:12px;z-index:95;display:flex;gap:8px;align-items:center;background:var(--ink);color:#fff;font:700 11px/1 var(--f-b);letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;border-radius:999px}
.langbadge a{color:#fff;border-bottom:1.5px solid var(--pink)}

/* banda de reto (/reto/:id): una nota personal antes del hero */
.invite{background:var(--subtle);color:var(--ink);padding:clamp(36px,5vw,64px) 0;border-bottom:1px solid var(--line)}
.invite .in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1fr);row-gap:16px;align-items:end}
.invite .in>.label{margin:0}
.invite h2{font:900 clamp(32px,4.6vw,60px)/.92 var(--f-d);letter-spacing:-.04em;text-transform:uppercase;text-wrap:balance;max-width:16ch}
.invite .in>p:not(.label):not(.meta){font-size:17px;line-height:1.55;color:var(--ink-70);max-width:46ch}
.invite .meta{color:var(--ink-70)}
@media(min-width:1024px){.invite .in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:24px}.invite .in>.label,.invite h2{grid-column:1}.invite .in>p:not(.label),.invite .cta-row,.invite .meta{grid-column:2}.invite h2{grid-row:2 / span 3}.invite .in>p:not(.label):not(.meta){grid-row:2}.invite .cta-row{grid-row:3}.invite .meta{grid-row:4}}

/* =================== TEST (overlay) =================== */
#ov{position:fixed;inset:0;z-index:100;background:#fff;display:none;overflow-y:auto;overscroll-behavior:contain}
#ov.on{display:block}
.qz{max-width:600px;margin:0 auto;padding:clamp(16px,4vh,40px) 20px 40px;min-height:100%;display:flex;flex-direction:column}
.qz-top{display:flex;align-items:center;gap:16px;margin-bottom:clamp(20px,3.6vh,36px)}
.qz-top img{width:clamp(84px,22vw,128px);height:auto}
.qz-top .ibtn{margin-left:auto}
.qprog{display:flex;align-items:center;gap:14px}
.qprog span{font:700 12px/1 var(--f-b);letter-spacing:.14em;text-transform:uppercase;color:var(--pink-t);white-space:nowrap;font-variant-numeric:tabular-nums}
.qprog i{flex:1 1 auto;height:4px;background:rgba(17,17,17,.12);border-radius:999px;overflow:hidden;display:block}
.qprog i b{display:block;height:100%;width:0;background:var(--pink);transition:width 240ms var(--ease)}
.qbody{flex:1 1 auto;display:flex;flex-direction:column}
.qk{margin-top:clamp(18px,3vh,28px)}
.qh{font:800 clamp(24px,4vw,38px)/1.02 var(--f-d);letter-spacing:-.025em;text-transform:uppercase;margin:12px 0 clamp(16px,2.6vh,24px);text-wrap:balance}
.qs{font-size:16px;line-height:1.55;color:var(--ink-70);margin:-8px 0 20px}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:center;gap:14px;text-align:left;width:100%;cursor:pointer;border-radius:14px;padding:12px 16px;min-height:56px;font:400 15px/1.35 var(--f-b);background:#fff;color:var(--ink);border:1.5px solid var(--line);transition:border-color 120ms var(--ease),background-color 120ms var(--ease),color 120ms var(--ease)}
@media(hover:hover){.opt:hover{border-color:var(--ink)}}
.opt .lt{flex:0 0 auto;width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;font:700 12px/1 var(--f-b);color:var(--ink-45);border:1.5px solid var(--ink-25);transition:inherit}
.opt.sel{background:var(--ink);color:var(--off);border-color:var(--ink)}
.opt.sel .lt{background:var(--pink);border-color:var(--pink);color:#fff}
@media(min-width:720px){.opt{min-height:60px;padding:16px 18px;font-size:16px}.opts{gap:10px}}
.qnav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:clamp(20px,3vh,28px)}
.qnav .prev{font:700 15px/1 var(--f-b);color:var(--ink-60);background:transparent;border:0;padding:12px 4px;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.qnav .prev:hover{color:var(--ink)}
.qnav .prev[hidden]{visibility:hidden;display:inline-flex!important}
.qnav .dots{display:flex;gap:5px;align-items:center}
.qnav .dots i{width:7px;height:7px;border-radius:999px;background:rgba(17,17,17,.18);transition:width .2s var(--ease),background .2s ease}
.qnav .dots i.done{background:var(--ink)}
.qnav .dots i.cur{width:20px;background:var(--pink)}
.qnav .next{min-height:52px;padding:0 24px}
@media(max-width:400px){.qnav .dots{display:none}}
/* pantallas bajas (iPhone SE, Safari con barras): la pregunta y las seis respuestas caben sin scroll */
@media(max-width:719px) and (max-height:760px){.qz{padding-top:12px}.qz-top{margin-bottom:14px}.qz-top .ibtn{width:44px;height:44px}.qk{margin-top:12px}.qh{font-size:21px;margin:8px 0 12px}.opts{gap:6px}.opt{min-height:48px;padding:9px 14px;font-size:14px;gap:12px}.opt .lt{width:24px;height:24px;font-size:11px}.qnav{margin-top:12px}.qnav .next{min-height:48px}}
/* test en escritorio: pregunta a la izquierda, respuestas a la derecha */
@media(min-width:1024px){
  .qz{max-width:var(--max);padding:28px var(--pad) 40px}
  .qz-top img{width:150px}
  .qbody{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:calc(100% / 12 + 24px);align-items:center;align-content:center;padding:clamp(16px,4vh,48px) 0 clamp(24px,8vh,96px)}
  .qside .qk{margin-top:0}
  .qside .qh{font-size:clamp(36px,3.3vw,50px);line-height:.98;margin-bottom:20px}
  .qside .qs{margin:0;max-width:40ch}
  .qbody>.loadw{grid-column:1 / -1;max-width:640px}
}
/* formulario */
.form{display:flex;flex-direction:column;gap:18px}
.fld label{display:block;font:700 12px/1.2 var(--f-b);letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;color:var(--ink)}
.fld input{width:100%;font:400 16px/1.2 var(--f-b);color:var(--ink);background:#fff;border:1.5px solid var(--ink-20);border-radius:12px;padding:15px 16px;min-height:52px;outline:none;transition:border-color 120ms ease}
.fld input:focus{border-color:var(--ink);outline:2px solid rgba(227,0,84,.35);outline-offset:1px}
.fld input::placeholder{color:var(--ink-45)}
.fld .help{font-size:13px;color:var(--ink-60);margin:7px 0 0}
.fld .err{display:none;font-size:13px;color:var(--error);margin:7px 0 0}
.fld.bad input{border-color:var(--error)}
.fld.bad input:focus{outline-color:rgba(179,38,30,.25)}
.fld.bad .err{display:block}
.fld.bad .help{display:none}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;cursor:pointer;min-height:44px;color:var(--ink)}
.chk input{width:22px;height:22px;accent-color:var(--pink);margin:1px 0 0;flex:0 0 auto}
.chk small{display:block;font-size:13px;color:var(--ink-60);margin-top:2px}
.chk a{color:var(--ink);border-bottom:1.5px solid var(--pink)}
.formerr{display:none;color:var(--error);font-size:14px;font-weight:700}
.formerr.on{display:block}
.after{font-size:13px;line-height:1.5;color:var(--ink-60);text-align:center}
.loadw{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:24px 0 48px}
.loadw h2{font:900 clamp(30px,5vw,44px)/.95 var(--f-d);letter-spacing:-.035em;text-transform:uppercase;margin:12px 0 28px;text-wrap:balance}
.loadw ul{display:flex;flex-direction:column;gap:2px}
.loadw li{display:flex;align-items:center;gap:12px;padding:10px 0;font:700 16px/1.3 var(--f-b);color:var(--ink-25);border-top:1px solid var(--line);transition:color .2s ease}
.loadw li:last-child{border-bottom:1px solid var(--line)}
.loadw li .ck{width:28px;height:28px;border-radius:999px;border:1.5px solid var(--ink-20);display:flex;align-items:center;justify-content:center;color:transparent;transition:background .2s ease,border-color .2s ease,color .2s ease}
.loadw li.on{color:var(--ink)}
.loadw li.on .ck{background:var(--pink);border-color:var(--pink);color:#fff}
.loadw li .ck path{stroke-dasharray:24;stroke-dashoffset:24}
.loadw li.on .ck path{stroke-dashoffset:0;transition:stroke-dashoffset .18s var(--ease) .05s}

/* =================== RESULTADO / PAREJA =================== */
.rhero{padding:clamp(28px,5vw,72px) 0 clamp(48px,7vw,96px)}
.rhero .g{row-gap:clamp(32px,4vw,48px);align-items:start}
.rhero .l{--t:1 / -1;--d:1 / span 7;--dr:1;display:flex;flex-direction:column;align-items:flex-start}
.rhero .acts{--t:1 / -1;--d:1 / span 7;--dr:2;align-self:start}
.rhero .r{--t:2 / span 6;--d:9 / span 4;--dr:1 / span 2;display:flex;flex-direction:column;align-items:center;gap:24px;align-self:center}
.rhero .label{margin:22px 0 18px}
.rhero .l{container-type:inline-size}
/* el nombre siempre en dos líneas: el cuerpo sale del ancho de la columna y de la línea más larga (--len) */
.rname{--len:11;font:900 min(104px,calc(100cqi / (var(--len) * .76)))/.9 var(--f-d);letter-spacing:-.04em;text-transform:uppercase;width:100%}
.rname span{display:block;white-space:nowrap}
.rline{font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--ink);margin:18px 0 28px;max-width:34ch;text-wrap:pretty}
.rare{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:15px;line-height:1.45;color:var(--ink-70)}
.rare b{font:900 22px/1 var(--f-d);color:var(--ink);letter-spacing:-.02em}
.racts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.status{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;max-width:560px}
.status .iconbox{width:40px;height:40px;border-radius:12px}
.status b{display:block;font:800 16px/1.2 var(--f-d);text-transform:uppercase;letter-spacing:-.01em}
.status p{font-size:14px;line-height:1.5;color:var(--ink-70);margin-top:4px}
.status.ok{background:var(--ink);color:var(--off);border-color:var(--ink)}
.status.ok p{color:var(--off-72)}
.status.ok .iconbox{background:var(--pink);color:#fff}
.status.ko{border-color:var(--error)}
.storyobj.lg{width:min(64vw,300px);align-self:center;margin:12px 0 0}
@media(min-width:1024px){.storyobj.lg{width:clamp(260px,22vw,330px)}}
.storyobj.lg .ghost{border-color:var(--ink-20)}
.storyobj.lg .img{box-shadow:0 1px 2px rgba(17,17,17,.06);border:1px solid var(--line)}
.storyobj.lg .s1{width:clamp(26px,2.6vw,38px)}
.rinfo{row-gap:clamp(32px,4vw,48px)}
.rinfo .hd{--t:1 / -1;--d:1 / span 5}
.rinfo .hd .label{margin-bottom:20px}
.rinfo .hd .lead{margin-top:24px;max-width:46ch}
.rinfo .rows{--t:1 / -1;--d:7 / span 6}
.duo-c .in{display:grid;row-gap:24px}
.linkrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.linkrow input{flex:1 1 240px;min-width:0;font:400 15px/1.2 var(--f-b);padding:14px 16px;min-height:52px;border:1.5px solid rgba(255,255,255,.5);border-radius:12px;background:rgba(17,17,17,.14);color:#fff;outline:none}
.linkrow input::placeholder{color:rgba(255,255,255,.86)}
.linkrow input:focus{border-color:#fff}
.msg{min-height:22px;font-size:14px;font-weight:700}
.alt{border-top:1px solid rgba(255,255,255,.3);padding-top:22px;margin-top:8px}
.alt .label{color:#fff;margin-bottom:6px}
.permalink{font-size:13px;color:var(--ink-60);word-break:break-all}
.permalink a{color:var(--ink);border-bottom:1.5px solid var(--pink)}
/* stats de pareja (DS · Stat) */
.stats{display:flex;gap:12px;flex-wrap:wrap}
.stat{flex:1 1 140px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.stat b{display:block;font:900 clamp(40px,5vw,64px)/.9 var(--f-d);letter-spacing:-.04em}
.stat>span{display:block;font:700 11px/1.3 var(--f-b);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60);margin-top:10px}
.stat p{font-size:13px;line-height:1.45;color:var(--ink-60);margin-top:6px}
.duopair{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.duopair .who{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.duopair .who h3{font:800 20px/1.1 var(--f-d);text-transform:uppercase;letter-spacing:-.015em;margin:8px 0 14px}
/* 404 / condiciones */
.nf{min-height:calc(100vh - 65px);display:flex;align-items:center}
.nf .in{max-width:640px;margin:0 auto;padding:48px var(--pad)}
.nf h1{font:900 clamp(40px,6vw,72px)/.9 var(--f-d);letter-spacing:-.04em;text-transform:uppercase;margin:18px 0 18px}
.nf .act{margin-top:28px}
.legaldoc{max-width:760px;margin:0 auto;padding:clamp(32px,6vw,80px) var(--pad) clamp(56px,8vw,112px)}
.legaldoc h1{font:900 clamp(38px,5.4vw,64px)/.92 var(--f-d);letter-spacing:-.04em;text-transform:uppercase;margin:18px 0 12px;text-wrap:balance}
.legaldoc .warn{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px dashed var(--ink-25);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--ink-70);margin:20px 0 8px}
.legaldoc section{border-top:1px solid var(--line);padding:24px 0}
.legaldoc h2{font:800 20px/1.2 var(--f-d);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:10px}
.legaldoc p{font-size:16px;line-height:1.65;color:var(--ink-70)}
.legaldoc p+p{margin-top:12px}
.legaldoc>.label{font-size:12px;line-height:1.2;color:var(--pink-t)}
.legaldoc>.caption{font-size:14px}
.legaldoc .warn{font-size:13px;line-height:1.5}
.legaldoc .warn .ic{margin-top:2px}
.legaldoc section{scroll-margin-top:calc(var(--navh) + 16px)}
.legaldoc>p:last-child{margin-top:24px}

/* resultado: piezas propias */
.rhero .l>div:first-child{margin-bottom:4px}
.rhero .tags{margin-top:2px}
.rhero .tag{height:36px;padding:0 15px;font-size:13px}
.rhero .rare .ic{color:var(--pink)}
.rhero .rare b{font:900 20px/1 var(--f-d);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.rhero .racts{margin-top:0}
@media(min-width:1024px){.rhero .g{row-gap:28px}.rhero .l{align-self:end}}
.rhero .racts .btn.quiet{background:transparent}
.hint{display:flex;gap:8px;align-items:flex-start;margin-top:16px;font-size:13px;line-height:1.5;color:var(--ink-60);max-width:46ch;text-wrap:pretty}
.hint .ic{margin-top:2px;color:var(--ink-45)}
.hint b{color:var(--ink)}
@media(max-width:719px){.rhero .racts{flex-direction:column;align-items:stretch}.rhero .racts .btn{width:100%}}
.storyobj.ld .img{background:var(--subtle) linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%) 0 0/250% 100%;animation:shim 1.4s linear infinite}
@keyframes shim{to{background-position:-150% 0}}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,12px);z-index:96;background:var(--ink);color:#fff;font:700 14px/1.3 var(--f-b);padding:12px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s var(--ease);max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(min-width:720px){.toast{bottom:28px}}
.meta-l{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink-70);max-width:420px}
.meta-l .ic{margin-top:2px;flex:0 0 auto}
.meta-l b{color:var(--ink)}
.permalink .label{margin-bottom:10px}
.plrow{display:flex;gap:8px;max-width:440px}
.plrow input{flex:1 1 auto;min-width:0;font:400 14px/1.2 var(--f-b);color:var(--ink-70);background:#fff;border:1.5px solid var(--ink-20);border-radius:12px;padding:0 14px;min-height:44px;outline:none}
.plrow input:focus{border-color:var(--ink)}
.steps-g .hd .status{margin-top:28px;max-width:480px}
.res .steps-g .aside{gap:20px}
.step .pill.ink{padding:7px 10px;font-size:10px}
.step .node .ic{width:16px;height:16px}
.seal-g{row-gap:clamp(32px,4vw,48px);align-items:end}
.seal-g .hd{--t:1 / -1;--d:1 / span 6}
.seal-g .hd .label{margin-bottom:20px}
.seal-g .hd h2{color:#fff;margin-bottom:24px}
.seal-g .hd .lead{color:rgba(242,240,239,.8);max-width:50ch}
.seal-g .seal{--t:1 / -1;--d:8 / span 5}
.duo-g{row-gap:28px;align-items:end}
.duo-g .hd{--t:1 / -1;--d:1 / span 6}
.duo-g .hd .label{color:#fff;margin-bottom:20px}
.duo-g .hd h2{color:#fff;margin-bottom:20px}
.duo-g .hd>p{font-size:clamp(17px,1.4vw,19px);line-height:1.55;max-width:46ch;color:#fff;text-wrap:pretty}
.duo-g .box{--t:1 / -1;--d:8 / span 5}
.duo-g .linkrow{margin-top:0}
.duo-g .linkrow .btn{flex:0 0 auto}
.duo-g .msg{color:#fff;margin-top:10px}
.duo-g .alt .label{color:#fff}
@media(max-width:719px){.duo-g .linkrow .btn{flex:1 1 100%}}
/* pareja */
.duo .stats{margin-top:4px;max-width:520px;width:100%}
.duo .stat b{font-variant-numeric:tabular-nums}
.pair-t{font-size:clamp(34px,4.4vw,56px);margin-bottom:clamp(24px,3vw,40px)}
.duopair .who{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.4vw,28px)}
.duopair .who h3{margin:0}
.duopair .who .tag{height:33px}
.sub .permalink{margin-top:24px}

/* barra fija de acción en móvil (DS: CTA principal sticky en mobile) */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:80;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--off) 70%,rgba(242,240,239,0));display:none}
@media(max-width:719px){.mbar{display:block;transform:translateY(110%);transition:transform .24s var(--ease)}.mbar.on{transform:none}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}