/* Rebranding · Alejandro Ramón Calvo — Edición 2026
   Concepto: el portfolio como colección impresa. Pliegos, marcas de corte y cartas numeradas. */
:root{
  color-scheme:light;
  --paper:#F3EFE6;--paper-2:#E9E3D6;--ink:#15130F;--ink-2:#5C564A;--line:rgb(21 19 15 / .16);
  --ver:#E8401C;--cob:#2340D9;--pin:#0E6B52;--mar:#F5B21A;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --text:"Instrument Sans",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,Consolas,monospace;
  --gut:clamp(16px,4vw,48px);
  --max:1320px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="dark"]{color-scheme:dark;--paper:#15130F;--paper-2:#221F19;--ink:#F3EFE6;--ink-2:#A9A192;--line:rgb(243 239 230 / .18)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--text);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--ver);outline-offset:3px;border-radius:2px}
::selection{background:var(--ver);color:#fff}
@view-transition{navigation:auto}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--ink);color:var(--paper);padding:8px 14px}
.skip:focus{top:12px}

.wrap{width:min(100%,var(--max));margin-inline:auto;padding-inline:var(--gut)}
.mono{font:400 12px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.display{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:.98;font-optical-sizing:auto}
.h1{font-size:clamp(44px,8.4vw,124px)}
.h2{font-size:clamp(34px,5.4vw,72px)}
.h3{font-size:clamp(23px,2.6vw,32px);line-height:1.1;letter-spacing:-.02em}
.lead{font-size:clamp(19px,2vw,24px);line-height:1.4;max-width:34em}
.muted{color:var(--ink-2)}
.prose p+p{margin-top:1em}
.prose{max-width:40em}
.prose strong{font-weight:600}
section{position:relative}
.sec{padding-block:clamp(64px,10vw,136px)}
.sec--tight{padding-block:clamp(40px,6vw,72px)}
.rule{border-top:1px solid var(--line)}

/* Marcas de impresión */
.marks{position:relative}
.marks::before,.marks::after{content:"";position:absolute;width:18px;height:18px;pointer-events:none;background:
  linear-gradient(var(--ink),var(--ink)) center/1px 100% no-repeat,
  linear-gradient(var(--ink),var(--ink)) center/100% 1px no-repeat;opacity:.5}
.marks::before{left:calc(var(--gut) / 2 - 9px);top:8px}
.marks::after{right:calc(var(--gut) / 2 - 9px);bottom:8px}
.cbar{display:flex;height:10px;width:112px}
.cbar i{flex:1}
.cbar i:nth-child(1){background:var(--ver)}.cbar i:nth-child(2){background:var(--mar)}
.cbar i:nth-child(3){background:var(--pin)}.cbar i:nth-child(4){background:var(--cob)}
.cbar i:nth-child(5){background:var(--ink)}.cbar i:nth-child(6){background:var(--ink-2)}

/* Barra superior */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;gap:24px;height:68px}
.seal{display:block;line-height:0;transition:opacity .2s,scale .2s var(--ease)}
.seal img{height:28px;width:auto}
.seal:hover{opacity:.7}
:root[data-theme="dark"] .seal img{filter:invert(1)}
.top__nav{display:flex;gap:4px;margin-right:auto;align-self:stretch}
.top__nav a{position:relative;display:flex;align-items:center;padding:0 12px;text-decoration:none;font-weight:500;font-size:15px;color:var(--ink-2);transition:color .2s}
.top__nav a i{position:absolute;left:12px;right:12px;bottom:-1px;height:3px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.top__nav a:hover{color:var(--ink)}
.top__nav a:hover i{transform:scaleX(1)}
.top__nav a[aria-current]{color:var(--ink);font-weight:600}
.top__nav a[aria-current] i{background:var(--ver);transform:scaleX(1);view-transition-name:nav-mark}
kbd{font:400 11px var(--mono);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;background:var(--ver);color:#fff;border-radius:7px;text-decoration:none;font-weight:600;font-size:15px;transition:transform .25s var(--ease),background .2s}
.btn:hover{transform:translateY(-2px);background:#C93212;color:#fff}
.btn--ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn--ghost:hover{background:none;color:var(--ver);box-shadow:inset 0 0 0 1px var(--ver)}
.tabbar{display:none}

/* Carta */
.card{--c:var(--ver);--on:#fff;--rx:0deg;--ry:0deg;--mx:50%;--my:50%;
  display:block;position:relative;container-type:inline-size;aspect-ratio:5/7;text-decoration:none;color:var(--on);border-radius:4.5%/3.2%;perspective:900px;-webkit-tap-highlight-color:transparent}
.card__in{position:absolute;inset:0;display:flex;flex-direction:column;padding:5.5cqw;background:var(--c);border-radius:inherit;overflow:hidden;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .35s var(--ease),box-shadow .35s;box-shadow:0 1px 1px rgb(21 19 15 / .2),0 14px 30px -14px rgb(21 19 15 / .45)}
.card:hover .card__in{box-shadow:0 2px 2px rgb(21 19 15 / .2),0 30px 44px -18px rgb(21 19 15 / .55)}
.card.is-tilting .card__in{transition:box-shadow .35s}
.card--ver{--c:var(--ver)}
.card--cob{--c:var(--cob)}
.card--pin{--c:var(--pin)}
.card--mar{--c:var(--mar);--on:#15130F}
.card--pap{--c:#FBF8F1;--on:#15130F}
.card--ink{--c:#15130F;--on:#F3EFE6}
.card__top{display:flex;justify-content:space-between;gap:3cqw;font:400 4cqw/1.2 var(--mono);text-transform:uppercase;letter-spacing:.03em}
.card__art{margin-top:4cqw;aspect-ratio:8/4.9;border-radius:2cqw;overflow:hidden;background:rgb(255 255 255 / .12);position:relative}
.card--mar .card__art,.card--pap .card__art{background:rgb(21 19 15 / .08)}
.card__art svg{width:100%;height:100%}
.card__art img{width:100%;height:100%;object-fit:cover;object-position:top}
.card__t{margin-top:4.5cqw;font:700 9.4cqw/1 var(--display);letter-spacing:-.03em}
.card__s{margin-top:2cqw;font-size:4.5cqw;line-height:1.3;opacity:.88}
.card__stats{margin-top:auto;display:flex;border-top:1px solid color-mix(in srgb,var(--on) 35%,transparent);padding-top:3cqw}
.card__stats div{flex:1;min-width:0}
.card__stats dd{font:700 8.2cqw/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.card__stats dt{order:2;font:400 3.2cqw/1.2 var(--mono);text-transform:uppercase;margin-top:1.4cqw;opacity:.85}
.card__stats div{display:flex;flex-direction:column}
.card__stats dd{order:1}
.card__holo{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;mix-blend-mode:soft-light;transition:opacity .3s;
  background:radial-gradient(circle at var(--mx) var(--my),rgb(255 255 255 / .85),transparent 46%),
  repeating-linear-gradient(115deg,rgb(255 90 90 / .5) 0 7%,rgb(255 220 90 / .5) 7% 14%,rgb(90 255 190 / .5) 14% 21%,rgb(90 150 255 / .5) 21% 28%)}
.card:hover .card__holo{opacity:.9}
.card--back .card__in{align-items:center;justify-content:center;text-align:center;background:
  repeating-linear-gradient(45deg,#15130F 0 6cqw,#221F19 6cqw 12cqw)}
.card--back .card__q{font:800 40cqw/1 var(--display);color:var(--mar)}
.card--back .card__top{position:absolute;inset:5.5cqw 5.5cqw auto}

/* Portada */
.hero{padding-block:clamp(28px,5vw,64px) clamp(40px,6vw,80px);overflow:hidden}
.hero__meta{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;margin-bottom:clamp(20px,3vw,36px)}
.hero__meta .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pin);margin-right:8px}
.hero h1 em{font-style:normal;color:var(--ver)}
.hero--home h1{font-size:clamp(40px,5.1vw,84px);line-height:1}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,40px)}
.hand{--w:clamp(190px,17.5vw,262px);position:relative;height:calc(var(--w) * 1.62)}
.hand .card{--x:0px;--r:0deg;--y:0px;position:absolute;left:50%;top:6%;width:var(--w);margin-left:calc(var(--w) / -2);transform:translate(var(--x),var(--y)) rotate(var(--r));transform-origin:50% 120%;transition:transform .45s var(--ease)}
.hand .card:nth-child(1){--x:-46%;--r:-11deg;--y:6%}
.hand .card:nth-child(2){--x:0%;--r:0deg;--y:0%;z-index:2}
.hand .card:nth-child(3){--x:46%;--r:11deg;--y:6%;z-index:3}
.hand .card:hover,.hand .card:focus-visible{--y:-8%;z-index:6}
.hand .card:nth-child(1){transform:translate(calc(var(--w) * -.46),var(--y)) rotate(var(--r))}
.hand .card:nth-child(3){transform:translate(calc(var(--w) * .46),var(--y)) rotate(var(--r))}

.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line)}
.proof div{padding:clamp(18px,2.4vw,30px) clamp(12px,2vw,24px);border-left:1px solid var(--line)}
.proof div:first-child{border-left:0;padding-left:0}
.proof b{display:block;font:700 clamp(36px,5.2vw,68px)/1 var(--display);letter-spacing:-.03em}
.proof span{display:block;margin-top:8px;font-size:14px;line-height:1.3;color:var(--ink-2)}

.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px;margin-bottom:clamp(28px,4vw,56px)}
.head .mono{display:block;margin-bottom:14px}
.link{display:inline-flex;gap:8px;font-weight:600;text-underline-offset:4px}
.link:hover{color:var(--ver)}

.rows{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:8px 24px;align-items:center;padding:clamp(18px,2.4vw,30px) 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .3s var(--ease),color .2s}
.row:hover{padding-left:14px;color:var(--ver)}
.row h3{font:700 clamp(24px,3.6vw,46px)/1.04 var(--display);letter-spacing:-.025em}
.row p{grid-column:2;color:var(--ink-2);max-width:48em;font-size:16px;line-height:1.4}
.row:hover p{color:var(--ink-2)}
.row__n{font:700 clamp(26px,3.4vw,44px)/1 var(--display);grid-row:span 2;align-self:start;text-align:right;white-space:nowrap}
.rows .mono{align-self:start;padding-top:8px;grid-row:span 2}

.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:16px var(--gut) 28px;margin-inline:calc(var(--gut) * -1);scrollbar-width:thin}
.strip .card{scroll-snap-align:center}

.human{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:center}
.human img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px}

.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink)}
.steps a{padding:18px 16px 18px 0;text-decoration:none;border-right:1px solid var(--line);padding-left:16px}
.steps a:first-child{padding-left:0}
.steps a:last-child{border-right:0}
.steps a:hover b{color:var(--ver)}
.steps b{display:block;font:700 clamp(19px,2vw,25px)/1.1 var(--display);letter-spacing:-.02em;margin-top:8px;transition:color .2s}

/* Colección */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters button{min-height:40px;padding:0 16px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--line);font-weight:500;font-size:15px}
.filters button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.filters button[aria-pressed="true"]{background:color-mix(in srgb,var(--ver) 13%,transparent);box-shadow:inset 0 0 0 1px var(--ver);font-weight:600}
.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(16px,2.4vw,32px)}
.sheet .card[hidden]{display:none}
.count{margin-left:auto;align-self:center}

/* Caso de estudio */
.case-hero{padding-block:clamp(28px,5vw,64px);border-bottom:1px solid var(--line)}
.case-hero__g{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,320px);gap:clamp(24px,5vw,72px);align-items:center}
.case-hero h1{margin-block:18px 22px}
.crumbs{display:flex;gap:8px;font:400 13px var(--mono)}
.crumbs a{text-underline-offset:3px}
.fact{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 24px;padding-block:24px;border-bottom:1px solid var(--line)}
.fact dd{font-weight:600;line-height:1.25;margin-top:6px}
.case{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(24px,5vw,72px);padding-top:clamp(36px,5vw,72px)}
.toc{position:sticky;top:96px;align-self:start;display:grid;gap:2px}
.toc a{display:block;padding:6px 0 6px 12px;border-left:2px solid var(--line);text-decoration:none;font-size:14px;line-height:1.25;color:var(--ink-2)}
.toc a.on{border-color:var(--ver);color:var(--ink);font-weight:600}
.case section{padding-bottom:clamp(48px,7vw,96px)}
.case h2{margin-block:10px 20px;font-size:clamp(28px,4vw,52px)}
.quote{margin-block:28px;padding-left:20px;border-left:4px solid var(--ver);font:600 clamp(20px,2.4vw,28px)/1.22 var(--display);letter-spacing:-.015em;max-width:30em}
.quote cite{display:block;margin-top:10px;font:400 13px var(--text);letter-spacing:0;color:var(--ink-2)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
.tile{padding:20px;background:var(--paper-2);border-radius:6px}
.tile h3,.tile h4{font:700 19px/1.15 var(--display);letter-spacing:-.01em;margin-block:6px 8px}
.tile p{font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.fig{margin-top:24px}
.fig img{width:100%;border-radius:6px;background:#fff}
.fig figcaption{margin-top:10px;font-size:14px;line-height:1.35;color:var(--ink-2)}
.results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
.results div{padding:22px 20px;background:var(--ink);color:var(--paper);border-radius:6px}
.results b{display:block;font:700 clamp(38px,5vw,64px)/1 var(--display);letter-spacing:-.03em;color:var(--mar)}
.results h4{font-size:15px;margin-block:10px 4px}
.results p{font-size:14.5px;line-height:1.4;opacity:.8}
.cycle{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:24px;border-top:3px solid var(--ver)}
.cycle li{padding:14px 12px 0 0;position:relative}
.cycle li::before{content:"";position:absolute;top:-8px;left:0;width:13px;height:13px;border-radius:50%;background:var(--ver)}
.cycle b{display:block;font:700 18px/1.15 var(--display);margin-top:6px}
.sev{display:grid;gap:8px;margin-top:24px}
.sev li{display:grid;grid-template-columns:80px minmax(0,1fr) 54px;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.sev b{font-weight:700}
.sev span{font-size:15px;line-height:1.35;color:var(--ink-2)}
.sev em{font:400 14px var(--mono);font-style:normal;text-align:right}
.heat{width:100%;border-collapse:collapse;margin-top:24px;font-size:15px}
.heat th{font:400 12px var(--mono);text-transform:uppercase;text-align:center;padding:8px 4px;font-weight:400}
.heat th:first-child{text-align:left}
.heat td{text-align:center;padding:12px 4px;border-top:1px solid var(--line);font:400 14px var(--mono);background:color-mix(in srgb,var(--pin) calc(var(--v) * 16%),transparent)}
.heat td:first-child{text-align:left;background:none;font:500 15px var(--text);padding-right:10px}
.heat td:last-child,.heat th:last-child{box-shadow:inset 3px 0 0 var(--ver)}
.heatwrap{overflow-x:auto}
.reds{margin-top:24px;padding:20px;background:var(--paper-2);border-radius:6px}
.reds__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;height:64px;transition:gap .5s var(--ease)}
.reds__g i{border-radius:3px;transition:background .5s var(--ease)}
.reds[data-on="1"] .reds__g{gap:0}
.reds[data-on="1"] .reds__g i{border-radius:0}
.reds__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;font-size:15px}
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,200px);gap:12px;overflow-x:auto;margin-top:18px;padding-bottom:10px}
.gallery img{border-radius:12px;width:100%}
.next{display:block;padding:clamp(28px,4vw,48px) 0;border-top:1px solid var(--ink);text-decoration:none}
.next:hover{color:var(--ver)}

/* Método */
.mtabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-bottom:1px solid var(--ink)}
.mtabs button{padding:14px 12px 16px 0;text-align:left;border-bottom:4px solid transparent;margin-bottom:-1px}
.mtabs button b{display:block;font:700 clamp(17px,2vw,24px)/1.1 var(--display);letter-spacing:-.02em;margin-top:4px}
.mtabs button[aria-selected="true"]{border-color:var(--ver)}
.mtabs button:not([aria-selected="true"]) b{color:var(--ink-2)}
.mpanel{padding-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,5vw,72px)}
.js .mpanel[hidden]{display:none}
.mpanel+.mpanel{margin-top:32px}
.js .mpanel+.mpanel{margin-top:0}
.tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.tools li{font:400 12px var(--mono);padding:4px 8px;border:1px solid var(--line);border-radius:4px}
.tech{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.tech li{padding:12px 0;border-top:1px solid var(--line)}
.tech b{display:block;font-weight:600}
.tech span{font-size:15px;line-height:1.35;color:var(--ink-2)}
.rules{counter-reset:r;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rules li{counter-increment:r;padding:22px 20px;background:var(--paper-2);border-radius:6px}
.rules li::before{content:"R" counter(r);font:400 12px var(--mono);color:var(--ver)}
.rules h3{font:700 22px/1.1 var(--display);letter-spacing:-.015em;margin-block:8px}
.rules p{font-size:15.5px;line-height:1.45;color:var(--ink-2)}

/* Sobre mí */
.me{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.me img{width:100%;aspect-ratio:1/1.08;object-fit:cover;border-radius:6px}
.facts{margin-top:28px;border-top:1px solid var(--ink)}
.facts div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.deck{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(28px,6vw,88px);align-items:center}
.deck__s{position:relative;aspect-ratio:5/7}
.deck__c{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:var(--ink);transition:transform .55s var(--ease),opacity .4s;transform:rotate(calc(var(--p) * 2.6deg)) translate(calc(var(--p) * 6px),calc(var(--p) * 5px));z-index:calc(9 - var(--p));box-shadow:0 18px 30px -18px rgb(21 19 15 / .6)}
.deck__c img{width:100%;height:100%;object-fit:cover}
.deck__c figcaption{position:absolute;left:12px;top:12px;background:var(--ink);color:var(--paper);padding:3px 8px;border-radius:4px;font:400 12px var(--mono)}
.deck__c.out{transform:translate(-40%,-6%) rotate(-16deg);opacity:0}
.deck__t{min-height:210px}
.deck__t blockquote{font:700 clamp(25px,3.4vw,42px)/1.08 var(--display);letter-spacing:-.025em}
.deck__t p{margin-top:14px;max-width:34em;color:var(--ink-2)}
.deck__nav{display:flex;align-items:center;gap:14px;margin-top:22px}
.deck__nav button{width:44px;height:44px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--ink);font-size:18px}
.deck__nav button:hover{color:var(--ver);box-shadow:inset 0 0 0 1px var(--ver)}
.tl{border-top:1px solid var(--ink)}
.tl li{display:grid;grid-template-columns:180px minmax(0,1fr);gap:8px 32px;padding:22px 0;border-bottom:1px solid var(--line)}
.tl h3{font:700 clamp(21px,2.4vw,28px)/1.12 var(--display);letter-spacing:-.02em}
.tl .at{font-weight:600;font-size:15px;margin-top:2px}
.tl p{margin-top:8px;max-width:44em;font-size:16px;line-height:1.5;color:var(--ink-2)}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,72px)}
.mini{display:grid;gap:0;border-top:1px solid var(--ink)}
.mini li{padding:14px 0;border-bottom:1px solid var(--line)}
.mini b{display:block;font-weight:600}
.mini span{font-size:15px;line-height:1.4;color:var(--ink-2)}

/* Laboratorio */
.manifest{font:700 clamp(30px,5.4vw,76px)/1.02 var(--display);letter-spacing:-.03em;max-width:15em}
.lab-how{counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lab-how li{counter-increment:s;padding:20px;border-top:3px solid var(--mar);background:var(--paper-2);border-radius:0 0 6px 6px}
.lab-how li::before{content:"0" counter(s);font:400 12px var(--mono)}
.lab-how h3{font:700 21px/1.15 var(--display);margin-block:6px 8px}
.lab-how p{font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.app{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,4vw,56px);padding-block:32px;border-top:1px solid var(--line)}
.app h3{font:700 clamp(25px,3vw,38px)/1.05 var(--display);letter-spacing:-.025em}
.app ul{margin-top:14px;display:grid;gap:6px;font-size:15.5px;line-height:1.4;color:var(--ink-2)}
.app ul li{padding-left:16px;position:relative}
.app ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;background:var(--ver)}
.app .gallery{margin-top:0}

/* Pie */
.foot{background:var(--ink);color:var(--paper);margin-top:clamp(32px,6vw,80px)}
.foot .mono{color:rgb(243 239 230 / .65)}
:root[data-theme="dark"] .foot .mono{color:var(--ink-2)}
.foot__big{display:block;margin-block:16px 28px;font:700 clamp(18px,5.3vw,84px)/1.02 var(--display);letter-spacing:-.03em;text-decoration:none;overflow-wrap:anywhere}
.foot__big:hover{color:var(--mar)}
.foot__b{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-block:22px;border-top:1px solid rgb(127 127 127 / .4);font-size:15px}
.foot__b div{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot__b a{text-underline-offset:3px}

/* Paleta de comandos */
.pal{position:fixed;inset:0;z-index:100;display:grid;justify-items:center;align-items:start;padding:12vh 16px 16px;background:rgb(21 19 15 / .5);backdrop-filter:blur(4px)}
.pal[hidden]{display:none}
.pal__box{width:min(100%,560px);background:var(--paper);border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -20px rgb(0 0 0 / .6)}
.pal input{width:100%;height:56px;padding:0 18px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:500 18px var(--text);outline:0}
.pal ul{max-height:52vh;overflow:auto;padding:6px}
.pal a,.pal li>button{display:flex;justify-content:space-between;gap:16px;width:100%;padding:10px 12px;border-radius:6px;text-decoration:none;text-align:left}
.pal li.on>a,.pal li.on>button{background:var(--paper-2);box-shadow:inset 3px 0 0 var(--ver)}
.pal li.on .mono{color:inherit}

/* Aparición */
.js [data-in]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-in].in{opacity:1;transform:none}

@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr}
  .hand{--w:clamp(180px,34vw,250px);height:calc(var(--w) * 1.55);margin-top:12px}
  .case{grid-template-columns:minmax(0,1fr)}
  .toc{display:none}
  .rules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps a{border-right:0;border-bottom:1px solid var(--line);padding-left:0}
}
@media (max-width:760px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px));font-size:16.5px}
  .top__nav,.top .btn{display:none}
  .top__in{height:60px;justify-content:space-between}
  .tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--paper);border-top:1px solid var(--ink);padding-bottom:env(safe-area-inset-bottom,0)}
  .tabbar a{display:grid;place-items:center;min-height:60px;text-decoration:none;font-size:13px;font-weight:500;color:var(--ink-2)}
  .tabbar a[aria-current]{color:var(--ink);box-shadow:inset 0 3px 0 var(--ver);font-weight:700}
  .hand{--w:auto;height:auto;display:grid;grid-auto-flow:column;grid-auto-columns:72vw;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--gut) 24px;margin-inline:calc(var(--gut) * -1)}
  .hand .card,.hand .card:nth-child(n){position:relative;left:auto;top:auto;width:auto;margin:0;transform:none;scroll-snap-align:center}
  .proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof div:nth-child(odd){border-left:0;padding-left:0}
  .proof div:nth-child(n+3){border-top:1px solid var(--line)}
  .row{grid-template-columns:minmax(0,1fr)}
  .rows .mono{grid-row:auto;padding-top:0}
  .row p{grid-column:auto}
  .row__n{grid-row:auto;text-align:left}
  .human,.deck,.me,.case-hero__g,.mpanel,.app,.cols2{grid-template-columns:1fr}
  .case-hero__g .card{max-width:240px}
  .fact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2,.grid3,.results,.rules,.lab-how{grid-template-columns:1fr}
  .cycle{grid-template-columns:1fr;border-top:0;border-left:3px solid var(--ver);padding-left:16px;gap:14px}
  .cycle li::before{left:-24px;top:6px}
  .cycle li{padding-top:0}
  .mtabs{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(130px,1fr);overflow-x:auto}
  .tech{grid-template-columns:1fr}
  .sev li{grid-template-columns:64px minmax(0,1fr) 44px;gap:10px}
  .tl li{grid-template-columns:1fr}
  .deck__s{max-width:290px}
  .sheet,.strip{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:74vw;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--gut) 24px;margin-inline:calc(var(--gut) * -1);scrollbar-width:none}
  .sheet::-webkit-scrollbar{display:none}
  .sheet .card{scroll-snap-align:center}
  .pal{padding-top:8vh}
}
@media (prefers-reduced-motion:reduce){
  html:not(.motion-on){scroll-behavior:auto}
  :root:not(.motion-on) *,:root:not(.motion-on) *::before,:root:not(.motion-on) *::after{animation:none!important;transition:none!important}
  :root:not(.motion-on)::view-transition-group(*),:root:not(.motion-on)::view-transition-old(*),:root:not(.motion-on)::view-transition-new(*){animation-duration:0s}
  :root:not(.motion-on).js [data-in]{opacity:1;transform:none}
}
html.motion-off{scroll-behavior:auto}
.motion-off *,.motion-off *::before,.motion-off *::after{animation:none!important;transition:none!important}
.motion-off::view-transition-group(*),.motion-off::view-transition-old(*),.motion-off::view-transition-new(*){animation-duration:0s}
.motion-off.js [data-in]{opacity:1;transform:none}
.strip{scrollbar-width:none}.strip::-webkit-scrollbar{display:none}
@media print{.top,.tabbar,.pal,.foot{display:none}}