/* ficha.css — hoja de la ficha profesional (index.html)
   Independiente de css/guimelito-bb.webflow.css a propósito: el export de
   Webflow no cubre un layout de documento y un re-export rompería esta página.
   Los tokens replican los de :root en guimelito-bb.webflow.css.
   Al cambiar este archivo, sube el ?v= del <link> en index.html. */

:root{
  --ink:#0d0b02;
  --card:#171612;
  --card-hi:#1e1c16;
  --gold:#e2c376;
  --gold-dim:#b8a66c;
  --gold-faded:#e2c37626;
  --paper:#e7e7e7;
  --muted:#aca89e;
  --rule:#332f26;
  --rule-soft:#26231c;

  --display:"Afacad Flux",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --rail:20rem;
  --gutter:clamp(1.25rem,4vw,3.25rem);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--display);
  font-size:1.02rem;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}

/* ---------- utility type ---------- */

.key{
  font-family:var(--mono);
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
}
.key--dim{color:var(--gold-dim)}

.num{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */

.shell{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  gap:0;
  max-width:82rem;
  margin:0 auto;
  min-height:100vh;
}

/* ---------- left rail ---------- */

.rail{
  border-right:1px solid var(--rule);
  padding:var(--gutter) 1.75rem var(--gutter) var(--gutter);
  display:flex;
  flex-direction:column;
  gap:2rem;
  position:sticky;
  top:0;
  align-self:start;
  max-height:100vh;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--rule) transparent;
}

.back{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  transition:color .18s ease;
}
.back:hover,.back:focus-visible{color:var(--gold)}

.ident-avatar{
  width:7rem;
  height:7rem;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--rule);
  display:block;
  margin-bottom:1.1rem;
  background:var(--card);
}

.ident h1{
  font-family:var(--display);
  font-size:2.5rem;
  font-weight:500;
  line-height:1;
  letter-spacing:-.005em;
  margin:.9rem 0 .5rem;
  text-wrap:balance;
}
.ident .role{
  font-size:1.06rem;
  color:var(--gold);
  font-weight:400;
  margin:0;
  line-height:1.3;
}

/* snapshot: the 5-second read */
.snap{
  display:grid;
  gap:0;
  border-top:1px solid var(--rule);
}
.snap div{
  display:grid;
  grid-template-columns:5.5rem minmax(0,1fr);
  gap:.75rem;
  padding:.5rem 0;
  border-bottom:1px solid var(--rule-soft);
  align-items:baseline;
}
.snap dt{margin:0}
.snap dd{margin:0;font-size:.94rem;color:var(--paper)}

/* metrics */
.metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.metric{
  background:var(--card);
  padding:.85rem .9rem;
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.metric b{
  font-family:var(--mono);
  font-size:1.32rem;
  font-weight:600;
  color:var(--gold);
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.metric span{
  font-size:.8rem;
  color:var(--muted);
  line-height:1.3;
}

/* actions */
.actions{display:flex;flex-direction:column;gap:.5rem}
.btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.7rem .9rem;
  border:1px solid var(--rule);
  background:var(--card);
  color:var(--paper);
  text-decoration:none;
  font-size:.95rem;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.btn .arw{font-family:var(--mono);font-size:.75rem;color:var(--gold-dim)}
.btn:hover,.btn:focus-visible{border-color:var(--gold);background:var(--card-hi)}
.btn:hover .arw,.btn:focus-visible .arw{color:var(--gold)}
.btn--primary{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
  font-weight:500;
}
.btn--primary .arw{color:var(--ink)}
.btn--primary:hover,.btn--primary:focus-visible{
  background:#efd5a0;
  border-color:#efd5a0;
  color:var(--ink);
}
.btn--primary:hover .arw{color:var(--ink)}

/* dropdown de versiones del CV */
.cv-dropdown{position:relative}
.cv-more{position:relative;width:100%}
.cv-dropdown-toggle{
  width:100%;
  cursor:pointer;
  list-style:none;
}
.cv-dropdown-toggle::-webkit-details-marker{display:none}
.cv-dropdown-toggle::marker{content:""}
.cv-dropdown-toggle .arw{transition:transform .18s ease}
.cv-more[open] .cv-dropdown-toggle .arw{transform:rotate(180deg)}

.cv-menu{
  position:absolute;
  top:calc(100% + .35rem);
  left:0;
  right:0;
  z-index:20;
  margin:0;
  padding:0;
  list-style:none;
  background:var(--card-hi);
  border:1px solid var(--rule);
}
.cv-menu li + li{border-top:1px solid var(--rule-soft)}
.cv-menu a,.cv-menu-action{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  padding:.7rem .85rem;
  text-decoration:none;
  color:var(--paper);
  width:100%;
  font-family:var(--display);
  font-size:inherit;
  font-weight:inherit;
  text-align:left;
  background:transparent;
  border:0;
  cursor:pointer;
}
.cv-menu a:hover,.cv-menu a:focus-visible,.cv-menu-action:hover,.cv-menu-action:focus-visible{background:var(--card)}
.cv-menu b{font-weight:500}
.cv-menu a > span:not(.key),.cv-menu-action > span:not(.key){font-size:.82rem;color:var(--muted);line-height:1.35}
.cv-menu a:hover .key,.cv-menu a:focus-visible .key,.cv-menu-action:hover .key,.cv-menu-action:focus-visible .key{color:var(--gold)}

/* modal de contexto para IA */
.ai-context-dialog{
  width:min(56rem,calc(100vw - 2rem));
  max-height:min(86vh,54rem);
  padding:0;
  border:1px solid var(--gold-dim);
  background:var(--card-hi);
  color:var(--paper);
  box-shadow:0 2rem 6rem #000b;
}
.ai-context-dialog::backdrop{background:#050401d9;backdrop-filter:blur(4px)}
.ai-context-panel{display:flex;flex-direction:column;max-height:min(86vh,54rem)}
.ai-context-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.25rem 1.35rem 1rem;
  border-bottom:1px solid var(--rule);
}
.ai-context-head h2{font-size:1.35rem;font-weight:500;line-height:1.2;margin:.35rem 0 0}
.dialog-close{
  width:2.3rem;
  height:2.3rem;
  flex:none;
  border:1px solid var(--rule);
  background:var(--card);
  color:var(--paper);
  font:300 1.5rem/1 var(--display);
  cursor:pointer;
}
.dialog-close:hover,.dialog-close:focus-visible{border-color:var(--gold);color:var(--gold)}
.ai-context-body{display:flex;flex-direction:column;gap:.75rem;min-height:0;padding:1rem 1.35rem}
.ai-context-body p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.45}
.ai-context-body pre{
  min-height:14rem;
  max-height:55vh;
  margin:0;
  padding:1rem;
  overflow:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  border:1px solid var(--rule);
  background:var(--ink);
  color:var(--paper);
  font-family:var(--mono);
  font-size:.72rem;
  line-height:1.65;
  scrollbar-width:thin;
  scrollbar-color:var(--gold-dim) transparent;
}
.ai-context-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem;
  padding:0 1.35rem 1.25rem;
}
.ai-context-actions .btn{font-family:var(--display);cursor:pointer}
.ai-context-actions .btn:disabled{cursor:not-allowed;opacity:.45}
.copy-status{margin-left:auto;color:var(--gold);font-family:var(--mono);font-size:.66rem;letter-spacing:.03em}

/* filter */
.filter{display:flex;flex-direction:column;gap:.7rem}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.34rem .6rem;
  border:1px solid var(--rule);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.chip:hover{border-color:var(--gold-dim);color:var(--paper)}
.chip[aria-pressed="true"]{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
  font-weight:600;
}
.filter-note{
  font-family:var(--mono);
  font-size:.66rem;
  color:var(--muted);
  letter-spacing:.04em;
  min-height:1em;
}

/* ---------- main document ---------- */

.doc{padding:var(--gutter) var(--gutter) 5rem;min-width:0}

section{margin-bottom:3.5rem}
section:last-child{margin-bottom:0}

.sec-head{
  display:flex;
  align-items:baseline;
  gap:1rem;
  border-bottom:1px solid var(--rule);
  padding-bottom:.55rem;
  margin-bottom:1.6rem;
}
.sec-head h2{
  font-size:1.34rem;
  font-weight:500;
  margin:0;
  letter-spacing:.005em;
}
.sec-head .key{margin-left:auto;white-space:nowrap}

/* logos: marquee en CSS puro, sin depender de js/webflow.js */
.logos-viewport{
  --logos-gap:clamp(2.5rem,6vw,4.5rem);
  display:flex;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.logos-track{
  display:flex;
  align-items:center;
  width:max-content;
  gap:var(--logos-gap);
  padding-right:var(--logos-gap);
  animation:logos-scroll 32s linear infinite;
}
.logos-viewport:hover .logos-track{animation-play-state:paused}
.logos-track img{height:1.75rem;width:auto;object-fit:contain;opacity:.73;flex:none}

@keyframes logos-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}

.lede{
  font-size:1.14rem;
  line-height:1.62;
  color:var(--paper);
  max-width:62ch;
  margin:0;
  font-weight:300;
}
.lede em{color:var(--gold);font-style:normal;font-weight:400}

/* roles */
.role-list{display:flex;flex-direction:column}

.job{
  display:grid;
  grid-template-columns:8.5rem minmax(0,1fr);
  gap:0 2rem;
  padding:1.5rem 0;
  border-bottom:1px solid var(--rule-soft);
}
.job:first-child{padding-top:0}

.job-when{
  font-family:var(--mono);
  font-size:.72rem;
  line-height:1.5;
  color:var(--gold-dim);
  letter-spacing:.02em;
  padding-top:.35rem;
  font-variant-numeric:tabular-nums;
}
.job-when b{display:block;color:var(--gold);font-weight:500}

.job-title{
  font-size:1.16rem;
  font-weight:500;
  margin:0 0 .1rem;
  line-height:1.25;
}
.job-title .at{color:var(--gold)}
.job-ctx{
  font-size:.88rem;
  color:var(--muted);
  margin:0 0 .7rem;
}
.job ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.42rem;
  max-width:66ch;
}
.job li{
  position:relative;
  padding-left:1rem;
  font-size:.99rem;
  line-height:1.55;
}
.job li::before{
  content:"";
  position:absolute;
  left:0;top:.68em;
  width:.38rem;height:1px;
  background:var(--gold-dim);
}
.job li b{color:var(--gold);font-weight:500}

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:.3rem;
  margin-top:.8rem;
}
.tag{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gold-dim);
  border:1px solid var(--rule);
  padding:.16rem .42rem;
}

/* apps */
.apps{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.app{
  background:var(--card);
  padding:1rem;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:.2rem;
  transition:background .18s ease;
}
.app:hover,.app:focus-visible{background:var(--card-hi)}
.app strong{font-size:1.02rem;font-weight:500}
.app span{font-size:.82rem;color:var(--muted);line-height:1.35}
.app .key{margin-top:.5rem}
.app--own{box-shadow:inset 2px 0 0 var(--gold-dim)}
.app--own .key{color:var(--gold-dim)}

/* personal projects */
.proj{
  border:1px solid var(--rule);
  background:var(--card);
  padding:1.5rem;
  margin-bottom:1px;
}
.proj h3{font-size:1.2rem;font-weight:500;margin:.3rem 0 .1rem}
.proj .job-ctx{margin-bottom:.9rem}
.proj p{margin:0 0 1rem;max-width:64ch;font-size:.99rem}
.proj-metrics{display:flex;flex-wrap:wrap;gap:1.75rem;padding-top:.9rem;border-top:1px solid var(--rule)}
.proj-metrics div{display:flex;flex-direction:column;gap:.1rem}
.proj-metrics b{
  font-family:var(--mono);
  font-size:1.14rem;
  color:var(--gold);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.proj-metrics span{font-size:.8rem;color:var(--muted)}

/* stack */
.stack{display:grid;gap:0}
.stack-row{
  display:grid;
  grid-template-columns:8.5rem minmax(0,1fr);
  gap:2rem;
  padding:.72rem 0;
  border-bottom:1px solid var(--rule-soft);
  align-items:baseline;
}
.stack-row p{margin:0;font-size:.99rem}

/* how i work */
.how{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.how div{background:var(--card);padding:1.1rem}
.how h3{font-size:1rem;font-weight:500;margin:.45rem 0 .3rem}
.how p{margin:0;font-size:.92rem;color:var(--muted);line-height:1.5}

/* footer */
.foot{
  border-top:1px solid var(--rule);
  padding-top:1.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2rem;
  align-items:baseline;
  font-size:.9rem;
  color:var(--muted);
}
.foot a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-faded)}
.foot a:hover{border-bottom-color:var(--gold)}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- responsive ---------- */

@media (max-width:60rem){
  .shell{grid-template-columns:1fr}
  .rail{
    position:static;
    max-height:none;
    border-right:0;
    border-bottom:1px solid var(--rule);
    padding:var(--gutter) var(--gutter) 1.75rem;
  }
  .ident-avatar{width:5.5rem;height:5.5rem;margin-bottom:.9rem}
  .ident h1{font-size:2.9rem}
  .doc{padding-top:2rem}
  .job{grid-template-columns:1fr;gap:.5rem}
  .job-when{padding-top:0}
  .job-when b{display:inline;margin-right:.6rem}
  .stack-row{grid-template-columns:1fr;gap:.25rem}
  .logos-viewport{
    --logos-gap:2.25rem;
    overflow-x:auto;
    -webkit-mask-image:none;
    mask-image:none;
    scrollbar-width:none;
  }
  .logos-viewport::-webkit-scrollbar{display:none}
  .logos-track{animation:none;width:auto}
  .logos-track.is-dup{display:none}
  .logos-track img{height:1.35rem}
}

@media (max-width:40rem){
  .ai-context-dialog{width:calc(100vw - 1rem);max-height:92vh}
  .ai-context-panel{max-height:92vh}
  .ai-context-head{padding:1rem}
  .ai-context-body{padding:.85rem 1rem}
  .ai-context-body pre{max-height:57vh;padding:.8rem;font-size:.68rem}
  .ai-context-actions{padding:0 1rem 1rem}
  .copy-status{width:100%;margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- print: recruiter hits Cmd+P and gets a clean CV ---------- */

@media print{
  :root{--ink:#fff;--card:#fff;--paper:#111;--muted:#555;--gold:#6b5418;--gold-dim:#6b5418;--rule:#ccc;--rule-soft:#e5e5e5}
  body{font-size:10.5pt;line-height:1.45}
  .rail{position:static;max-height:none;border:0;padding:0 0 1rem}
  .shell{display:block;max-width:none}
  .back,.actions,.filter,.apps .key,.ai-context-dialog{display:none}
  .ident-avatar{width:4.5rem;height:4.5rem;border-color:#ccc}
  .doc{padding:0}
  .logos-viewport{mask-image:none}
  .logos-track{animation:none;width:auto}
  .logos-track.is-dup{display:none}
  .job,.proj,section{break-inside:avoid}
  section{margin-bottom:1.4rem}
  .metrics,.how,.apps{border-color:#ccc}
}