/* Contenido de las páginas: tapa, sobre mí, índice, proyecto, trayectoria, contacto */
/* ---------- Página ---------- */
.page{position:absolute;inset:0;container-type:size;background:var(--page);color:var(--pink);overflow:hidden}
.page::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.07;mix-blend-mode:overlay;pointer-events:none;z-index:4}
.pg{position:absolute;inset:0;padding:8cqw 8.5cqw 7cqw;display:flex;flex-direction:column;gap:3cqw}
.runhead{display:flex;justify-content:space-between;gap:2cqw;font-family:var(--f-mono);font-size:max(11px,2.2cqw);letter-spacing:.14em;text-transform:uppercase;color:var(--psoft);padding-bottom:2.2cqw;border-bottom:1px solid var(--prule)}
.folio{margin-top:auto;font-family:var(--f-mono);font-size:max(11px,2.3cqw);color:var(--psoft);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--f-mono);font-size:max(11px,2.4cqw);letter-spacing:.14em;text-transform:uppercase;color:var(--acc,var(--brass));display:flex;justify-content:space-between;gap:2cqw}
.eyebrow span+span{color:var(--psoft)}
.h{margin:0;font-family:var(--f-display);font-weight:400;font-size:10.6cqw;line-height:.94;letter-spacing:-.012em;text-wrap:balance}
.h em{font-style:italic;color:var(--acc,var(--brass))}
.txt{margin:0;font-size:max(12px,3.35cqw);line-height:1.55;color:#d9d0c1;text-wrap:pretty}
.role{font-size:max(11px,2.9cqw);color:var(--psoft);display:grid;grid-template-columns:auto 1fr;gap:2cqw;border-top:1px solid var(--prule);padding-top:2cqw}
.role b{font-family:var(--f-mono);font-weight:500;font-size:max(11px,2.2cqw);letter-spacing:.12em;text-transform:uppercase;padding-top:.5cqw;color:var(--pink)}
.chips{display:flex;flex-wrap:wrap;gap:1.3cqw}
.chips span{font-family:var(--f-mono);font-size:max(11px,2.3cqw);padding:.9cqw 1.9cqw;border:1px solid var(--prule);border-radius:999px;color:var(--pink)}
.linkline{font-family:var(--f-mono);font-size:max(11px,2.4cqw);letter-spacing:.04em;color:var(--psoft);display:flex;align-items:center;gap:1.6cqw}
.linkline a{color:var(--acc,var(--brass));text-underline-offset:.5em}
.status{display:inline-flex;align-items:center;gap:1.2cqw;font-family:var(--f-mono);font-size:max(11px,2.2cqw);letter-spacing:.1em;text-transform:uppercase;color:var(--acc);border:1px solid currentColor;border-radius:999px;padding:.8cqw 1.8cqw;align-self:flex-start}
.status i{width:1.4cqw;height:1.4cqw;border-radius:50%;background:currentColor;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
/* entrada de texto al activarse la página */
.rv{opacity:1;transform:none}
.page:not(.on) .rv{opacity:0;transform:translateY(2.5cqw)}
.page.on .rv{transition:opacity .7s ease,transform .7s var(--ease);transition-delay:calc(var(--d,0) * 90ms + 250ms)}

/* bleed: visual a hoja completa */
.bleed{position:absolute;inset:0;overflow:hidden}
.bleed-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:14cqw 7cqw 6cqw;background:linear-gradient(transparent,rgba(8,7,6,.92) 60%);display:flex;justify-content:space-between;align-items:flex-end;gap:2cqw;font-family:var(--f-mono);font-size:max(11px,2.2cqw);letter-spacing:.08em;color:rgba(236,228,212,.75)}
.bleed-cap b{font-family:var(--f-display);font-weight:400;font-style:italic;font-size:6cqw;letter-spacing:0;color:var(--pink);line-height:1}
.tag{position:absolute;top:5cqw;right:5cqw;z-index:3;font-family:var(--f-mono);font-size:max(11px,2cqw);letter-spacing:.1em;text-transform:uppercase;background:rgba(10,9,8,.7);border:1px solid rgba(236,228,212,.22);color:rgba(236,228,212,.85);padding:1cqw 2cqw;border-radius:999px;backdrop-filter:blur(4px)}

/* tapa */
.cover{background:radial-gradient(ellipse at 30% 18%,#22201c,var(--cover) 70%)}
.cover::before{opacity:.14}
.cover-pg{padding:10cqw 9cqw;justify-content:space-between}
.mark{padding:.04em .14em .08em .02em;font-family:var(--f-display);font-style:italic;font-size:32cqw;line-height:.8;letter-spacing:-.04em;background:linear-gradient(110deg,#8a6c3e 20%,#f0d29c 45%,#8a6c3e 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s ease-in-out infinite;filter:drop-shadow(0 .4cqw 0 rgba(0,0,0,.6))}
@keyframes shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.cover-bottom{display:flex;flex-direction:column;gap:3cqw}
.cover-name{margin:0;font-family:var(--f-display);font-size:8.6cqw;line-height:1;color:var(--pink)}
.cover-rule{height:1px;background:rgba(200,163,106,.4)}
.cover-sub{font-family:var(--f-mono);font-size:max(11px,2.4cqw);letter-spacing:.16em;text-transform:uppercase;color:var(--psoft);display:flex;flex-direction:column;gap:1.6cqw}
.open-hint{font-family:var(--f-mono);font-size:max(11px,2.4cqw);letter-spacing:.1em;color:var(--brass);animation:blink 2.4s ease-in-out infinite}

/* sobre mí */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;margin-top:auto}
.stat{border-top:1px solid var(--prule);padding-top:2cqw;display:grid;gap:1cqw}
.stat b{font-family:var(--f-display);font-weight:400;font-size:13cqw;line-height:.9;color:var(--brass);font-variant-numeric:tabular-nums}
.stat span{font-size:max(11px,2.6cqw);line-height:1.4;color:var(--psoft)}
/* índice */
.toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.toc button{width:100%;display:grid;grid-template-columns:5cqw 1fr auto;align-items:baseline;gap:2cqw;background:none;border:0;border-bottom:1px solid var(--prule);padding:1.9cqw 0;text-align:left;color:var(--pink)}
.toc button:hover .toc-t{color:var(--brass);font-style:italic}
.toc-n,.toc-p{font-family:var(--f-mono);font-size:max(11px,2.2cqw);color:var(--psoft);font-variant-numeric:tabular-nums}
.toc-t{font-family:var(--f-display);font-size:4.8cqw;line-height:1.05;transition:color .2s}
.toc-c{display:block;font-family:var(--f-mono);font-size:max(11px,2cqw);letter-spacing:.1em;text-transform:uppercase;color:var(--psoft);margin-top:.6cqw}

/* ---- Trayectoria ---- */
.tl{list-style:none;margin:0;padding:0 0 0 4cqw;display:flex;flex-direction:column;gap:3.4cqw;position:relative}
.tl::before{content:"";position:absolute;left:.6cqw;top:1cqw;bottom:1cqw;width:1px;background:var(--brass);transform-origin:top;transform:scaleY(0)}
.page.on .tl::before{transform:scaleY(1);transition:transform 1.4s var(--ease) .3s}
.tl li{position:relative;display:grid;gap:.6cqw}
.tl li::before{content:"";position:absolute;left:-4.6cqw;top:1.2cqw;width:2cqw;height:2cqw;border-radius:50%;background:var(--page);border:1px solid var(--brass)}
.tl time{font-family:var(--f-mono);font-size:max(11px,2.2cqw);letter-spacing:.1em;color:var(--brass)}
.tl b{font-family:var(--f-display);font-weight:400;font-size:5.6cqw;line-height:1}
.tl span{font-size:max(11px,2.8cqw);line-height:1.45;color:var(--psoft)}

/* contacto */
.contact-h{font-size:17cqw}
.mail{display:grid;gap:1.4cqw;border-top:1px solid var(--prule);padding-top:2.2cqw}
.mail-row{display:flex;align-items:center;justify-content:space-between;gap:2cqw;flex-wrap:wrap}
.mail-addr{font-size:3.6cqw;user-select:all;word-break:break-all}
.btn-sm{background:var(--pink);color:var(--page);border:0;border-radius:999px;padding:1.3cqw 3cqw;font-family:var(--f-mono);font-size:max(11px,2.3cqw);letter-spacing:.06em}
.lnk{font-size:3.6cqw;text-underline-offset:.6em;word-break:break-all}
.lbl{font-family:var(--f-mono);font-size:max(11px,2.2cqw);letter-spacing:.12em;text-transform:uppercase;color:var(--psoft)}
.backcover{justify-content:flex-end;align-items:flex-end;text-align:right;padding:10cqw 9cqw;gap:2cqw}
.backcover .mark{font-size:15cqw;margin-right:-.14em}
.home-btn{margin-bottom:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:1.6cqw;background:none;border:1px solid rgba(200,163,106,.5);color:var(--brass);border-radius:999px;padding:1.6cqw 3.2cqw;font-family:var(--f-mono);font-size:max(11px,2.6cqw);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s}
.home-btn span{font-size:3.6cqw;line-height:1}
.home-btn:hover{background:var(--brass);color:#14110d}
.nav.home{border-color:var(--brass);color:var(--brass)}

@container (max-width:440px){
  .games li span{display:none}
  .games{gap:0 3cqw}
  .tl{gap:2cqw}
  .tl span{line-height:1.3}
  .pg{gap:2.2cqw}
  .toc button{padding:1.2cqw 0}
  .toc-c{margin-top:0}
}
@container (max-width:320px){ .h{font-size:9.4cqw} .tl b{font-size:4.8cqw} .tl{gap:1.6cqw} }