:root{
  --muro:#ECEAE5;
  --tinta:#1B2330;
  --marino:#1E3054;
  --piso:#D9D9D9;
  --gris:#5A6270;
  --cal:#838B99;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --marco:clamp(20px,5vw,64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--muro);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv05","ss03";
}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:inherit}

.salto{position:absolute;left:-9999px;top:0}
.salto:focus{left:var(--marco);top:12px;background:var(--tinta);color:var(--muro);padding:8px 14px;z-index:99}
:focus-visible{outline:2px solid var(--marino);outline-offset:3px}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:16px var(--marco);
  background:color-mix(in srgb,var(--muro) 88%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid color-mix(in srgb,var(--cal) 30%,transparent);
}
.nav__marca{font-size:15px;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.nav__links{display:flex;align-items:baseline;gap:22px}
.nav a{
  font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:var(--gris);
  transition:color .18s;
}
.nav a:hover,.nav a[aria-current="true"]{color:var(--tinta)}
.idioma{
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  background:none;border:0;padding:0;cursor:pointer;color:var(--gris);
}
.idioma b{font-weight:500;color:var(--tinta)}

/* ---------- hero ---------- */
.hero{padding:0 var(--marco) clamp(60px,9vw,120px)}
.hero__img{margin:0 0 clamp(28px,4vw,44px)}
.hero__img img{width:100%;height:clamp(300px,58svh,560px);object-fit:cover;object-position:center 42%}
.hero__nombre{
  font-size:clamp(44px,8.5vw,104px);
  font-weight:200;line-height:.98;letter-spacing:-.04em;
  margin:0 0 14px;
}
.hero__pie{
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;
  color:var(--gris);margin:0;
}

/* ---------- secciones ---------- */
.seccion{padding:clamp(56px,8vw,104px) var(--marco);border-top:1px solid var(--piso)}
.seccion__cab{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:0 0 clamp(28px,4vw,48px)}
.seccion h2{
  font-size:clamp(26px,3.6vw,40px);font-weight:300;letter-spacing:-.032em;
  margin:0;
}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--cal);margin:0 0 10px;
}

/* ---------- interruptor de escala ---------- */
.modo{display:flex;gap:0;border:1px solid var(--piso)}
.modo button{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:none;border:0;padding:8px 14px;cursor:pointer;color:var(--gris);
}
.modo button[aria-pressed="true"]{background:var(--tinta);color:var(--muro)}

/* ---------- grilla ---------- */
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(28px,4vw,56px)}
.obra{margin:0}
.obra__marco{background:var(--piso)}
.obra__marco img{width:100%}
.obra__det{margin-top:8px;width:46%}
.ficha{
  font-family:var(--mono);font-size:11.5px;line-height:1.85;
  color:var(--marino);margin:12px 0 0;
}
.ficha .t{color:var(--tinta)}
.ficha .v{color:var(--cal)}

/* ---------- escala real ---------- */
.escala{overflow-x:auto;overflow-y:hidden;padding-bottom:20px;-webkit-overflow-scrolling:touch}
.escala__pista{display:flex;align-items:flex-end;gap:clamp(24px,3vw,52px);position:relative;padding:0 4px}
.escala__obra{flex:0 0 auto;display:flex;flex-direction:column;justify-content:flex-end}
.escala__obra img{width:100%;height:100%;object-fit:cover}
.escala__eje{
  position:relative;height:1px;background:var(--marino);opacity:.45;margin-top:2px;
}
.escala__nota{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--cal);
  margin:14px 0 0;
}

/* ---------- about ---------- */
.col-texto{min-width:0}
.retrato{margin:0}
.about{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:start}
.prosa p{margin:0 0 1.15em;max-width:60ch}
.prosa p:last-child{margin-bottom:0}
.retrato figcaption{font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--cal);margin-top:10px}
.formacion{margin:clamp(40px,5vw,64px) 0 0;border-top:1px solid var(--piso);padding-top:24px}
.formacion dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 22px;margin:0;font-size:15px}
.formacion dt{font-family:var(--mono);font-size:11.5px;color:var(--marino);padding-top:4px;white-space:nowrap}
.formacion dd{margin:0}

.firma-bloque{margin:clamp(14px,1.6vw,20px) 0 0}
.firma{
  display:block;width:clamp(120px,14vw,180px);height:auto;
  color:var(--marino);opacity:.9;
}

/* ---------- contacto ---------- */
.enlaces{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(22px,3vw,34px)}
.contacto a.mail{
  font-size:clamp(22px,3.4vw,38px);font-weight:300;letter-spacing:-.03em;
  text-decoration:none;border-bottom:1px solid var(--cal);padding-bottom:3px;
}
.contacto a.mail:hover{border-color:var(--tinta)}
.enlace__et{
  display:block;font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.11em;text-transform:uppercase;color:var(--cal);
  margin-bottom:4px;
}
.pie{
  padding:28px var(--marco) 40px;border-top:1px solid var(--piso);
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--cal);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}

@media(max-width:760px){
  .about{grid-template-columns:1fr}
  .formacion dl{grid-template-columns:1fr;gap:2px}
  .formacion dd{margin-bottom:12px}
  .nav__links{gap:14px}
  .nav a,.idioma{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}
