/* ============================================================
   sections.css — layout per chapter (El Índice)
   ============================================================ */

/* ---------- MASTHEAD ---------- */
.masthead{
  position:fixed; top:0; left:0; right:0; z-index:80;
  height:70px; display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--mx);
  transition:background var(--dur-theme) var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.masthead.is-scrolled{
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom-color:var(--line-soft);
}
.brand{ font-family:var(--font-display); font-weight:600; font-size:1.3rem; display:inline-flex; gap:.5rem; align-items:center; }
.brand__logo{ height:42px; width:42px; display:block; }
.brand__full{ color:var(--ink-2); font-size:1rem; opacity:0; transform:translateX(-6px); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.brand:hover .brand__full{ opacity:1; transform:none; }
.folio-nav{ display:flex; gap:var(--s3); }
.folio-nav a{ font-size:var(--fs-meta); text-transform:uppercase; letter-spacing:.14em; color:var(--ink-2); position:relative; transition:color var(--dur-micro) var(--ease); }
.folio-nav a::after{ content:""; position:absolute; left:0; bottom:-6px; height:1.5px; width:0; background:var(--accent); transition:width .3s var(--ease); }
.folio-nav a:hover, .folio-nav a.is-active{ color:var(--ink); }
.folio-nav a:hover::after, .folio-nav a.is-active::after{ width:100%; }
.masthead__edition{ display:flex; align-items:center; gap:var(--s2); }
.lang{ font-size:var(--fs-meta); letter-spacing:.14em; color:var(--ink-2); display:inline-flex; gap:.3rem; }
.lang .sep{ opacity:.5; }
.lang [data-lang].is-active{ color:var(--accent); }
.theme{ width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:999px; }
.theme__dot{ width:13px; height:13px; border-radius:999px; background:var(--ink); box-shadow:inset -4px -4px 0 0 var(--paper); transition:background .3s, box-shadow .3s; }
html[data-theme="dark"] .theme__dot{ box-shadow:inset -4px -4px 0 0 var(--paper); background:var(--ink); }

/* ---------- LOADER ---------- */
.loader{ position:fixed; inset:0; z-index:200; background:var(--paper); display:grid; place-items:center; }
.loader.is-gone{ pointer-events:none; }
.loader__inner{ text-align:center; padding-inline:var(--mx); position:relative; z-index:2; }
.loader__kicker{ display:block; font-size:var(--fs-meta); text-transform:uppercase; letter-spacing:.28em; color:var(--ink-2); margin-bottom:var(--s3); }
.loader__name{ display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,7vw,6rem); line-height:.95; letter-spacing:-0.02em; }
.loader__count{ display:block; margin-top:var(--s4); font-family:var(--font-display); font-size:1.3rem; color:var(--accent); font-variant-numeric:tabular-nums; }
.loader__curtain{ position:absolute; inset:0; background:var(--paper); z-index:1; }

/* ---------- 01 · PERFIL ---------- */
.perfil{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:calc(70px + var(--s5)); }
.perfil__top{ display:grid; grid-template-columns:1fr auto; gap:var(--s5); align-items:center; margin-top:var(--s4); }
.perfil__headline{ font-size:var(--fs-h1); max-width:15ch; font-weight:600; }

/* portrait con efecto "tímido": la foto se esconde al pasar el cursor */
.portrait{ position:relative; width:clamp(230px,24vw,340px); aspect-ratio:1/1; border:1px solid var(--line); border-radius:50%; overflow:hidden; background:var(--paper-2); }
/* botón Descargar CV */
.cv-btn{ display:inline-flex; align-items:center; gap:.55rem; margin-top:var(--s2); padding:.7rem 1.15rem; border:1px solid var(--accent); border-radius:999px; color:var(--ink); font-size:.85rem; font-weight:500; letter-spacing:.01em; transition:background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); align-self:flex-start; }
.cv-btn svg{ width:16px; height:16px; }
.cv-btn:hover{ background:var(--accent); color:var(--on-accent); transform:translateY(-2px); }
/* bloques reutilizados por la sección 04 · Competencias & Stack */
.toolgroup__label{ display:block; font-size:.62rem; text-transform:uppercase; letter-spacing:.16em; color:var(--ink-2); margin-bottom:.6rem; }
#stackTools .chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
#stackTools .tag{ font-size:.72rem; padding:.3rem .65rem; }
.edu__list{ display:grid; gap:.7rem; }
.edu__list li{ display:grid; grid-template-columns:1fr auto; gap:.2rem .6rem; font-size:.9rem; line-height:1.4; }
.edu__name{ color:var(--ink); grid-column:1; }
.edu__org{ color:var(--ink-2); grid-column:1; }
.edu__year{ color:var(--ink-2); opacity:.7; font-variant-numeric:tabular-nums; grid-column:2; grid-row:1; text-align:right; white-space:nowrap; }
.langs__line{ font-size:.95rem; color:var(--ink-2); line-height:1.6; }
/* nota amable en Proyectos */
.projects__note{ margin-top:var(--s2); font-size:.98rem; line-height:1.6; color:var(--ink-2); max-width:62ch; border-left:2px solid var(--accent); padding-left:var(--s3); }
.portrait__img{ position:absolute; inset:0; z-index:2; background-size:cover; background-position:center; filter:grayscale(1) contrast(1.03);
  transition:opacity .55s var(--ease), transform .7s var(--ease), filter .55s var(--ease); }
.portrait__peek{ position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; text-align:center; padding:1rem; }
.portrait__name{ font-family:var(--font-display); font-size:1.5rem; line-height:1; }
.portrait__role{ font-size:.62rem; text-transform:uppercase; letter-spacing:.2em; color:var(--ink-2); }
.portrait__peek::after{ content:""; width:26px; height:2px; background:var(--accent); }
.portrait:hover .portrait__img, .portrait:focus-within .portrait__img, .portrait.is-peek .portrait__img{ opacity:0; transform:scale(1.06); filter:grayscale(1) blur(7px); }

.perfil__lead{ font-size:var(--fs-lead); color:var(--ink-2); max-width:60ch; margin-top:var(--s5); }
.perfil__article{ margin-top:var(--s5); display:grid; grid-template-columns:1.2fr .8fr; gap:var(--s4) var(--s6); align-items:start; }
.perfil__body .prose{ max-width:56ch; }
.pullquote{ position:relative; margin-top:var(--s4); padding-left:1.3rem; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(1.7rem,3.4vw,2.8rem); line-height:1.02; max-width:16ch; }
.pullquote::before{ content:""; position:absolute; left:0; top:.15em; bottom:.15em; width:3px; background:var(--accent); }

.perfil__aside{ display:flex; flex-direction:column; gap:var(--s4); }
.guardian{ font-family:var(--font-display); font-style:italic; font-size:1.12rem; line-height:1.38; color:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:var(--s2) 0; }
.aporta__label, .metaline__label{ font-size:var(--fs-meta); text-transform:uppercase; letter-spacing:.16em; color:var(--ink-2); margin-bottom:var(--s2); }
.aporta__list{ display:grid; gap:.7rem; }
.aporta__list li{ position:relative; padding-left:1.3rem; font-size:.92rem; line-height:1.5; color:var(--ink-2); }
.aporta__list li::before{ content:"—"; position:absolute; left:0; color:var(--accent); }
.perfil__meta{ display:flex; flex-wrap:wrap; gap:.4rem .9rem; }
.perfil__meta li{ font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-2); position:relative; }
.perfil__meta li::before{ content:"·"; color:var(--accent); margin-right:.45rem; }

@media (max-width:900px){
  .perfil__top{ grid-template-columns:1fr; gap:var(--s4); }
  .portrait{ width:min(260px,60vw); }
  .perfil__article{ grid-template-columns:1fr; gap:var(--s4); }
}

/* ---------- 04 · COMPETENCIAS & STACK ---------- */
.stack__title{ margin-top:var(--s2); max-width:18ch; }
.stack__h{ font-size:var(--fs-meta); text-transform:uppercase; letter-spacing:.16em; color:var(--ink-2); margin-bottom:var(--s3); }
.stack__competencias{ margin-top:var(--s6); }
.stack__competencias .aporta__list{ display:block; columns:2; column-gap:var(--s6); }
.stack__competencias .aporta__list li{ break-inside:avoid; margin-bottom:.8rem; }
.stack__tshape{ margin-top:var(--s6); }
.stack__tshape .perfil__meta{ gap:.5rem 1.1rem; }
.stack__tshape .perfil__meta li{ font-size:.8rem; }
.stack__tools{ margin-top:var(--s6); }
.toolgrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--s5); margin-top:var(--s2); }
.stack__bottom{ margin-top:var(--s6); display:grid; grid-template-columns:1fr 1fr; gap:var(--s5) var(--s6); }
.stack__cert{ margin-top:var(--s3); font-size:.82rem; line-height:1.55; color:var(--ink-2); border-left:2px solid var(--accent); padding-left:var(--s2); max-width:44ch; }
@media (max-width:900px){
  .stack__title{ max-width:none; }
  .stack__competencias .aporta__list{ columns:1; }
  .stack__bottom{ grid-template-columns:1fr; gap:var(--s4); }
}
@media (max-width:520px){
  .stack__competencias, .stack__tshape, .stack__tools, .stack__bottom{ margin-top:var(--s5); }
  .toolgrid{ gap:var(--s4); }
}

/* ---------- 02 · TRAYECTORIA — EL PLIEGO ---------- */
.pliego{ padding-block:var(--s6); position:relative; }
.pliego__head{ padding-inline:var(--mx); display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s4); flex-wrap:wrap; }
.pliego__hint{ font-size:var(--fs-meta); text-transform:uppercase; letter-spacing:.18em; color:var(--ink-2); }
.pliego__stage{ overflow:hidden; padding-left:var(--mx); }
.pliego__stage:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; }
.pliego__track{ display:flex; gap:var(--s3); will-change:transform; touch-action:pan-y; }
.hito{
  position:relative; flex:0 0 auto;
  width:min(820px, 84vw); height:clamp(440px, 66vh, 660px);
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-card);
  padding:clamp(24px,3.5vw,52px);
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.hito.is-active{ border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow:0 30px 80px -50px rgba(20,18,16,.5); }
.hito__num{ font-family:var(--font-display); font-weight:600; font-size:clamp(5rem,14vh,12rem); line-height:.75; color:var(--line); align-self:flex-start; transition:color .5s var(--ease); font-variant-numeric:tabular-nums; }
.hito.is-active .hito__num{ color:var(--accent); }
.hito__mid{ }
.hito__range{ display:block; font-size:var(--fs-meta); text-transform:uppercase; letter-spacing:.14em; color:var(--ink-2); margin-bottom:.5rem; font-variant-numeric:tabular-nums; }
.hito__company{ font-size:clamp(1.9rem,4.5vw,3.8rem); line-height:.94; }
.hito__role{ margin-top:.7rem; font-size:1.02rem; color:var(--ink); max-width:40ch; }
.hito__loc{ color:var(--ink-2); font-size:.85rem; margin-top:.2rem; text-transform:uppercase; letter-spacing:.1em; }
.hito__detail{ opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.hito.is-active .hito__detail{ opacity:1; transform:none; }
.hito__desc{ color:var(--ink-2); font-size:.92rem; line-height:1.55; max-width:44ch; }
.hito__tags{ margin-top:var(--s2); }

.pliego__folio{ display:flex; gap:.4rem; padding-inline:var(--mx); margin-top:var(--s4); flex-wrap:wrap; }
.pliego__folio button{
  font-family:var(--font-display); font-size:.95rem; color:var(--ink-2); font-variant-numeric:tabular-nums;
  padding:.2rem .1rem; position:relative; transition:color var(--dur-micro) var(--ease);
}
.pliego__folio button::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.pliego__folio button:hover{ color:var(--ink); }
.pliego__folio button.is-active{ color:var(--accent); }
.pliego__folio button.is-active::after{ transform:scaleX(1); }

/* ---------- 03 · PROYECTOS ---------- */
.works{ margin-top:var(--s5); border-top:1px solid var(--line); }
.work{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s4); align-items:start;
  padding:var(--s5) 0; border-bottom:1px solid var(--line); position:relative;
  transform-style:preserve-3d; transition:transform .4s var(--ease);
}
.work::before{ /* glow que sigue al cursor */
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb,var(--accent) 10%, transparent), transparent 70%);
  transition:opacity .3s var(--ease);
}
.work:hover::before{ opacity:1; }
.work__num{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.4rem,2vw,2rem); color:var(--accent); font-variant-numeric:tabular-nums; }
.work__title{ font-size:clamp(2.2rem,6vw,5rem); line-height:.9; transition:transform .4s var(--ease); }
.work__hook{ margin-top:.6rem; font-size:var(--fs-lead); color:var(--ink); font-family:var(--font-display); font-style:italic; }
.work__desc{ margin-top:var(--s2); color:var(--ink-2); max-width:56ch; line-height:1.6; }
.work__foot{ margin-top:var(--s3); display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; }
.work__link{ font-size:var(--fs-meta); text-transform:uppercase; letter-spacing:.14em; }
.work__more{ font-size:var(--fs-meta); text-transform:uppercase; letter-spacing:.14em; color:var(--ink-2); }
.work__long{ display:none; margin-top:var(--s3); }
.work__long.is-open{ display:block; }
.work__long p{ color:var(--ink-2); font-size:.92rem; line-height:1.65; margin-top:.6rem; max-width:60ch; }
.work__bullets{ margin-top:var(--s2); display:grid; gap:.35rem; }
.work__bullets li{ position:relative; padding-left:1.1rem; color:var(--ink-2); font-size:.9rem; }
.work__bullets li::before{ content:"—"; position:absolute; left:0; color:var(--accent); }
.work__stack{ margin-top:var(--s2); font-size:.8rem; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.work__stack b{ color:var(--ink); text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; display:block; margin-bottom:.25rem; }

/* ---------- 05 · PERSONAL (al margen) ---------- */
.margin{ --accent:var(--amber); background:var(--paper-2); }
.margin__grid{ display:grid; grid-template-columns:1fr .8fr; gap:var(--s6); align-items:center; margin-top:var(--s4); }
.margin__title{ font-size:var(--fs-h2); font-style:italic; margin-bottom:var(--s3); }
.margin__photos{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.plate{ position:relative; aspect-ratio:3/4; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--paper); }
.plate:nth-child(2){ margin-top:var(--s5); }
.plate__img{ position:absolute; inset:0; background-size:cover; background-position:center;
  background-image:linear-gradient(135deg, color-mix(in srgb,var(--amber) 18%, transparent), transparent 60%), repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 13px);
  filter:grayscale(1); transition:filter .5s var(--ease), transform .6s var(--ease); }
.plate.has-photo:hover .plate__img{ filter:grayscale(0); transform:scale(1.05); }
.plate:not(.has-photo)::after{ content:""; position:absolute; inset:0;
  background:no-repeat center/40px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B675E' stroke-width='1.2'%3E%3Cpath d='M4 18l5-6 4 4 3-4 4 6'/%3E%3Ccircle cx='9' cy='8' r='1.6'/%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3C/svg%3E"); opacity:.5; }
.plate figcaption{ position:absolute; left:0; bottom:0; padding:.5rem .7rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-2); background:color-mix(in srgb,var(--paper) 80%, transparent); }

/* ---------- 06 · CONTACTO — COLOFÓN ---------- */
.colofon{ text-align:center; min-height:88svh; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.colofon .eyebrow{ justify-content:center; }
.colofon__cta{
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-hero); line-height:.85;
  margin:var(--s4) 0; display:inline-block; letter-spacing:-0.02em;
  background-image:linear-gradient(var(--accent),var(--accent)); background-repeat:no-repeat;
  background-position:0 100%; background-size:0% 3px; transition:background-size .5s var(--ease);
}
.colofon__cta:hover{ background-size:100% 3px; }
.colofon__text{ color:var(--ink-2); max-width:44ch; font-size:var(--fs-lead); }
.colofon__links{ margin-top:var(--s4); display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s2) var(--s4); }
.colofon__links a, .colofon__links .cline{ display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-meta); text-transform:uppercase; letter-spacing:.14em; color:var(--ink-2); }
.colofon__links a:hover{ color:var(--accent); }

/* ---------- FOOTER ---------- */
.colophon-foot{ padding:var(--s4) var(--mx); display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; border-top:1px solid var(--line); font-size:var(--fs-meta); text-transform:uppercase; letter-spacing:.12em; color:var(--ink-2); }

/* ---------- CURSOR ---------- */
.cursor{ position:fixed; top:0; left:0; z-index:300; width:10px; height:10px; border-radius:999px; background:var(--accent); pointer-events:none; transform:translate(-50%,-50%); transition:width .25s var(--ease), height .25s var(--ease), background-color .25s var(--ease); display:grid; place-items:center; }
.cursor.is-ring{ width:74px; height:74px; background:color-mix(in srgb,var(--accent) 14%, transparent); border:1px solid var(--accent); }
.cursor.is-hide{ opacity:0; }
.cursor__label{ font-size:.6rem; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); opacity:0; white-space:nowrap; font-family:var(--font-text); font-weight:600; }
.cursor.is-ring .cursor__label{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ---------- TOAST ---------- */
.toast{ position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--paper); padding:.6rem 1.2rem; border-radius:999px; font-size:.8rem; letter-spacing:.06em; opacity:0; pointer-events:none; z-index:120; transition:opacity .25s, transform .25s var(--ease); }
.toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .folio-nav{ display:none; }
  .perfil__foot{ grid-template-columns:1fr; gap:var(--s3); }
  .perfil__meta{ justify-content:flex-start; }
  .work{ grid-template-columns:1fr; gap:var(--s2); }
  .margin__grid{ grid-template-columns:1fr; gap:var(--s4); }
  .margin__photos{ max-width:440px; }
}
@media (max-width:520px){
  .hito{ width:86vw; height:clamp(400px,72vh,560px); }
  .masthead__edition{ gap:var(--s1); }
}