:root{
  --paper:#eee7da;
  --paper2:#e5dac8;
  --paper3:#f4eee4;
  --ink:#292722;
  --muted:#6e675d;
  --line:#9d9180;
  --red:#a04f43;
  --blue:#4d6670;
  --shadow:rgba(55,48,39,.12);
  --serif:"Baskerville","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Avenir Next","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:#d8d0c2;
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  position:relative;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.08;z-index:30;
  background-image:radial-gradient(#4a443b .55px,transparent .55px);background-size:8px 8px;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}

/* HEADER */
header{
  min-height:350px;padding:70px 8%;position:relative;overflow:hidden;
  background:var(--paper);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;
}
header::before{
  content:"";position:absolute;inset:15px;border:1px dashed #aaa091;pointer-events:none;
}
.small-title{font:11px var(--sans);text-transform:uppercase;letter-spacing:3px;color:var(--muted);margin-bottom:24px}
h1{font:normal clamp(44px,7vw,84px)/.92 var(--serif);max-width:800px;letter-spacing:-1px}
.subtitle{margin-top:24px;font:12px var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--muted)}

/* MATASELLOS */
.matasellos{
  position:absolute;right:8%;top:55px;width:154px;height:154px;border:2px solid var(--red);border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;color:var(--red);opacity:.78;transform:rotate(-8deg);
}
.matasellos::before{content:"";position:absolute;width:124px;height:124px;border:1px dashed var(--red);border-radius:50%}
.matasellos::after{
  content:"BUENOS AIRES · CORREO";position:absolute;top:24px;left:50%;transform:translateX(-50%);
  white-space:nowrap;font:7px var(--sans);letter-spacing:1.8px;background:var(--paper);padding:0 5px;
}
.matasellos span{position:relative;z-index:2;font:9px/1.65 var(--sans);letter-spacing:2px;text-transform:uppercase}
.matasellos span::before{content:"✦";display:block;font-size:17px;margin-bottom:4px}

/* NAVEGACIÓN */
nav{background:#3d3a35;color:var(--paper);padding:14px 8%;position:sticky;top:0;z-index:20}
nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:26px;align-items:center}
nav a{font:10px var(--sans);letter-spacing:1.5px;text-transform:uppercase;transition:.2s}
nav a:hover{color:#d3b58e}

/* ACCESOS */
.correspondencia-top{padding:20px 8%;background:var(--paper2);border-bottom:1px solid var(--line)}
.correspondencia-top::before{content:"CORREO · ACCESO DIRECTO";display:block;margin-bottom:11px;font:8px var(--sans);letter-spacing:2.4px;color:var(--muted)}
.mail-links{display:flex;gap:14px;flex-wrap:wrap}
.mini-envelope{
  position:relative;width:175px;min-height:68px;padding:17px 18px 13px;background:var(--paper);
  border:1px solid #918675;overflow:hidden;transition:.25s ease;
}
.mini-envelope::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;background:repeating-linear-gradient(135deg,var(--red) 0 8px,var(--paper) 8px 16px,var(--blue) 16px 24px,var(--paper) 24px 32px);opacity:.8}
.mini-envelope::after{display:none}
.mini-envelope span{display:block;position:relative;z-index:2;font:10px var(--sans);text-transform:uppercase;letter-spacing:1.5px}
.mini-envelope small{position:relative;z-index:2;font:11px var(--serif);color:var(--muted)}
.mini-envelope:hover{transform:translateY(-2px);box-shadow:5px 5px 0 var(--shadow)}

/* GENERAL */
main{max-width:1200px;margin:0 auto;padding:72px 8%}
section{margin-bottom:90px}
.section-number{font:9px var(--sans);letter-spacing:3px;color:#887e6e;margin-bottom:9px}
h2{font:normal 42px/1.05 var(--serif);margin-bottom:32px;letter-spacing:-.4px}

/* POSTAL PERSONAL DATA */
.postcard{
  position:relative;
  display:grid;
  grid-template-columns:50% 50%;
  min-height:390px;
  background:var(--paper);
  border:1px solid #9c907f;
  box-shadow:7px 7px 0 var(--shadow);
  overflow:hidden;
}

.postcard-address{
  position:relative;
  min-width:0;
  min-height:390px;
  border-right:1px solid rgba(77,102,112,.35);
  background:var(--paper);
}

.postcard-address::before{
  content:"POSTCARD";
  position:absolute;
  top:28px;
  left:30px;
  font:11px var(--sans);
  letter-spacing:3px;
  color:var(--blue);
}

.postcard-address::after{
  content:"";
  position:absolute;
  left:30px;
  right:30px;
  bottom:30px;
  border-bottom:1px solid rgba(77,102,112,.18);
}

.postcard-address .address-label{
  position:absolute;
  left:34px;
  bottom:48px;
  font:normal 18px/1.35 var(--serif);
  letter-spacing:.2px;
  color:#37332e;
}

.postcard-right{
  position:relative;
  min-width:0;
  min-height:390px;
  padding:30px 34px 32px;
}

.photo-slot{
  position:absolute;
  z-index:2;
  top:26px;
  right:30px;
  width:86px;
  height:108px;
  border:1px dashed #8ea9b0;
  background:#f3eee5;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.photo-slot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.photo-slot::before{
  content:"FOTO";
  position:absolute;
  top:7px;
  left:7px;
  font:6px var(--sans);
  letter-spacing:1.4px;
  color:var(--blue);
}

.postcard-copy{
  position:relative;
  z-index:1;
  margin-top:152px;
  padding:0;
  max-width:100%;
  font:14px/1.72 var(--serif);
  color:#37332e;
}

.postcard-copy::before{
  content:"";
  position:absolute;
  left:-18px;
  top:-14px;
  bottom:-8px;
  border-left:1px solid rgba(77,102,112,.16);
}

.postmark-small{display:none}

/* ACADÉMICO */
.academic-profile{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
.academic-lead{padding:32px;background:var(--paper2);border:1px solid #8f8576;position:relative;box-shadow:7px 7px 0 var(--shadow)}
.academic-lead::before{content:"HISTORIA ACADÉMICA";position:absolute;top:-10px;left:17px;background:#d8d0c2;border:1px solid #8f8576;padding:2px 8px;font:7px var(--sans);letter-spacing:2px}
.academic-lead>p{font:normal 21px var(--serif);margin-bottom:8px}
.academic-label{font:bold 10px var(--sans)!important;text-transform:uppercase;letter-spacing:1.8px;color:var(--muted)}
.academic-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.stat{border-top:1px solid #958b7b;padding-top:10px}.stat strong{display:block;font:8px var(--sans);text-transform:uppercase;letter-spacing:1.5px;color:#777064;margin-bottom:3px}.stat span{font:normal 28px var(--serif)}
.subjects{margin-top:16px;border-top:1px dashed #948979}.subjects summary{cursor:pointer;list-style:none;padding:14px 0 9px;font:bold 10px var(--sans);text-transform:uppercase;letter-spacing:1.5px;color:#655f55}.subjects summary::-webkit-details-marker{display:none}.subjects summary span{float:right;font-size:17px}.subjects[open] summary span{transform:rotate(45deg)}
.subjects-list{border-top:1px solid #9b907d}.subject-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px dashed #a39a8b}.subject-row strong{display:block;font:15px var(--serif)}.subject-row span{display:block;margin-top:2px;font:8px var(--sans);letter-spacing:1px;text-transform:uppercase;color:#81776a}.subject-row b{min-width:75px;text-align:right;font:12px var(--serif)}
.academic-meta{display:grid;grid-template-columns:1fr;border-top:1px solid #958b7b}.academic-meta div{padding:12px;border-bottom:1px solid #958b7b;font:13px/1.5 var(--sans)}.academic-meta strong{display:inline;font:bold 8px var(--sans);text-transform:uppercase;letter-spacing:1.4px;color:#777064;margin-right:5px}

/* PORTFOLIO · mismo lenguaje visual que Correspondencia */
#portfolio .portfolio-lead{max-width:650px;margin:-12px 0 25px;font:16px/1.65 var(--serif);color:var(--muted)}
#portfolio .portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#portfolio .work{min-width:0;min-height:190px;padding:24px 22px 20px;background:var(--paper);border:1px solid #aaa091;box-shadow:3px 3px 0 var(--shadow);position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:18px;overflow:hidden;transition:transform .2s}
#portfolio .work::before,.portfolio-tab::after,#portfolio .portfolio-back::after,#portfolio .portfolio-open::after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:repeating-linear-gradient(135deg,var(--red) 0 8px,var(--paper) 8px 16px,var(--blue) 16px 24px,var(--paper) 24px 32px);opacity:.8}
#portfolio .work::after{display:none}
#portfolio .work:hover{transform:translateY(-2px)}
#portfolio .work span{font:8px var(--sans);letter-spacing:1.8px;color:var(--muted)}
#portfolio .work h3{font:normal clamp(23px,3vw,30px)/1.1 var(--serif);margin:0}
#portfolio button{font-family:var(--sans);cursor:pointer;color:var(--ink)}
#portfolio .portfolio-open,#portfolio .portfolio-back,#portfolio .portfolio-tab{appearance:none;position:relative;background:var(--paper);border:1px solid #918675;padding:14px 16px 12px;min-height:52px;box-shadow:3px 3px 0 var(--shadow);font:10px/1.45 var(--sans);letter-spacing:1.2px;text-transform:uppercase;text-align:left;transition:transform .2s,background .2s}
#portfolio .portfolio-open::after,#portfolio .portfolio-back::after,#portfolio .portfolio-tab::after{top:auto;bottom:0;height:4px}
#portfolio .portfolio-open{margin-top:auto}
#portfolio .portfolio-open:hover,#portfolio .portfolio-back:hover,#portfolio .portfolio-tab:hover{background:var(--paper2);transform:translateY(-2px)}
#portfolio .portfolio-grid[hidden],#portfolio .portfolio-detail[hidden],#portfolio .portfolio-topic-panel[hidden]{display:none!important}
#portfolio .portfolio-detail{padding:clamp(18px,3vw,30px);background:var(--paper3);border:1px solid var(--line);box-shadow:4px 4px 0 var(--shadow);scroll-margin-top:95px}
#portfolio .portfolio-detail-head{display:flex;justify-content:space-between;align-items:start;gap:16px;padding-bottom:17px;border-bottom:1px solid var(--line)}
#portfolio .portfolio-detail-head h3{font:normal clamp(27px,4vw,39px)/1.15 var(--serif);margin-top:7px}
#portfolio .portfolio-description{max-width:660px;margin:17px 0 20px;font:16px/1.65 var(--serif)}
#portfolio .portfolio-viewer{width:min(100%,510px);margin:18px auto;display:grid;grid-template-columns:minmax(0,1fr) 66px;gap:9px;align-items:start}
#portfolio .viewer-stage{min-width:0;padding:9px;background:var(--paper2);border:1px solid var(--line)}
#portfolio .viewer-slide{display:none;margin:0}
#portfolio .viewer-slide.is-active{display:block}
#portfolio .viewer-slide img{display:block;width:100%;height:165px;object-fit:contain}
#portfolio .viewer-slide figcaption{padding:5px 0 0;text-align:center;font:11px var(--serif);color:var(--muted)}
#portfolio .viewer-controls{grid-column:1;grid-row:2;display:flex;justify-content:space-between;align-items:center;gap:6px}
#portfolio .viewer-controls button{background:var(--paper);border:1px solid var(--line);padding:7px 8px;font:9px var(--sans)}
#portfolio .viewer-count{font:9px var(--sans);letter-spacing:1px;white-space:nowrap;color:var(--muted)}
#portfolio .viewer-thumbs{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;gap:5px;max-height:205px;overflow-y:auto;scrollbar-width:thin}
#portfolio .viewer-thumb{width:60px;height:37px;flex:0 0 37px;padding:3px;background:var(--paper);border:1px solid var(--line);opacity:.65}
#portfolio .viewer-thumb.is-active{opacity:1;border:2px solid var(--red)}
#portfolio .viewer-thumb img{display:block;width:100%;height:100%;object-fit:contain}
#portfolio .portfolio-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:23px 0}
#portfolio .portfolio-tab{min-width:0;min-height:85px;overflow:hidden}
#portfolio .portfolio-tab.is-active{background:var(--paper2);border-color:var(--red)}
#portfolio .portfolio-topic-panel h4{font:normal 25px var(--serif);margin-bottom:13px}
#portfolio .portfolio-topic-panel>p{font:13px var(--sans);margin-bottom:17px}
#portfolio .portfolio-resources{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
#portfolio .portfolio-resource{display:block;min-width:0;background:var(--paper);border:1px solid var(--line);padding:9px;transition:transform .2s}
#portfolio .portfolio-resource:hover{transform:translateY(-2px)}
#portfolio .portfolio-resource img{display:block;width:100%;height:95px;object-fit:contain;background:var(--paper2)}
#portfolio .portfolio-resource span{display:flex;flex-direction:column;gap:4px;padding-top:9px;font:10px/1.5 var(--sans)}
#portfolio .portfolio-resource b{font-size:9px;color:var(--red)}
#portfolio .portfolio-morph-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#portfolio .morph-card{min-width:0;min-height:165px;background:var(--paper);border:1px solid var(--line);padding:18px;display:flex;flex-direction:column}
#portfolio .morph-card span{font:8px var(--sans);letter-spacing:1.6px;color:var(--muted)}
#portfolio .morph-card h5{font:normal 21px/1.2 var(--serif);margin:22px 0 auto}
#portfolio .morph-card a{align-self:flex-start;font:9px/1.5 var(--sans);color:var(--red);margin-top:16px;border-bottom:1px solid var(--red)}
#portfolio .portfolio-external{display:inline-block;margin-top:12px;background:var(--paper);border:1px solid var(--line);padding:13px 16px;font:10px var(--sans);letter-spacing:1px;text-transform:uppercase}
#portfolio button:focus-visible,#portfolio a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media(max-width:650px){#portfolio .portfolio-grid,#portfolio .portfolio-tabs,#portfolio .portfolio-morph-grid{grid-template-columns:1fr}#portfolio .portfolio-resources{grid-template-columns:repeat(2,minmax(0,1fr))}#portfolio .portfolio-detail-head{flex-direction:column}#portfolio .portfolio-tab{min-height:55px}#portfolio .portfolio-viewer{grid-template-columns:minmax(0,1fr);max-width:340px}#portfolio .viewer-slide img{height:145px}#portfolio .viewer-thumbs{grid-column:1;grid-row:3;flex-direction:row;overflow-x:auto;overflow-y:hidden;max-height:none}#portfolio .viewer-thumb{width:55px;flex:0 0 55px}#portfolio .viewer-controls{grid-column:1;grid-row:2}}
@media(prefers-reduced-motion:reduce){#portfolio *{transition:none!important}}

/* PROYECTO GRUPAL */
.project-card{display:block;position:relative;max-width:640px;min-height:180px;padding:38px 42px;background:var(--paper);border:1px solid #918675;box-shadow:7px 7px 0 var(--shadow);overflow:hidden;transition:.25s ease}
.project-card::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:5px;background:repeating-linear-gradient(135deg,var(--red) 0 8px,var(--paper) 8px 16px,var(--blue) 16px 24px,var(--paper) 24px 32px);opacity:.8}
.project-card::after{display:none}
.project-card .project-label{display:block;font:8px var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.project-card h3{font:normal 38px/1 var(--serif)}
.project-card small{display:block;margin-top:20px;font:9px var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--red)}
.project-card:hover{transform:translateY(-3px);box-shadow:9px 9px 0 var(--shadow)}

/* CORRESPONDENCIA */
#grupo h2{margin-bottom:26px}
.members{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.member{padding:27px 18px 22px;min-height:175px;background:var(--paper);border:1px solid #aaa091;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;box-shadow:3px 3px 0 var(--shadow)}
.member::before{content:"";position:absolute;top:0;left:0;width:100%;height:5px;background:repeating-linear-gradient(135deg,var(--red) 0 8px,var(--paper) 8px 16px,var(--blue) 16px 24px,var(--paper) 24px 32px);opacity:.75}
.member::after{display:none}
.member-number{font:8px var(--sans);letter-spacing:1.8px;color:#81776a}.member h3{font:normal 20px/1.1 var(--serif)}.member a{font:9px var(--sans);text-transform:uppercase;letter-spacing:1.3px;border-bottom:1px solid #777064;padding-bottom:3px;width:fit-content}.member a:hover{color:var(--red)}
.group-link{margin-top:24px;display:flex;justify-content:flex-end}.group-link a{position:relative;width:145px;min-height:75px;padding:15px;background:var(--paper);border:1px solid #81786b;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:.25s}.group-link a::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;background:repeating-linear-gradient(135deg,var(--red) 0 8px,var(--paper) 8px 16px,var(--blue) 16px 24px,var(--paper) 24px 32px);opacity:.8}.group-link a:hover{transform:translateY(-2px);box-shadow:5px 5px 0 var(--shadow)}.group-link .vn{font:normal 27px var(--serif);letter-spacing:1px}.group-link .caption{font:8px var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:2px}

footer{background:#3d3a35;color:#d8d0c2;padding:48px 8%;font:11px/1.8 var(--sans);text-align:center}

@media(max-width:850px){
  .matasellos{width:110px;height:110px;right:5%;top:28px}.matasellos::before{width:88px;height:88px}.matasellos::after{font-size:5.5px;top:16px}.matasellos span{font-size:7px}
  .academic-profile{grid-template-columns:1fr}.members{grid-template-columns:repeat(2,1fr)}#portfolio .portfolio-grid{grid-template-columns:1fr 1fr}
  .postcard{grid-template-columns:1fr 1fr}.postcard-address{min-height:340px}.postcard-right{min-height:340px;padding:28px 28px 30px}.photo-slot{width:82px;height:104px;right:24px}
}
@media(max-width:560px){
  header{min-height:410px;padding:60px 7%}.matasellos{right:4%;top:25px;width:90px;height:90px}.matasellos::before{width:70px;height:70px}.matasellos::after{font-size:4.5px;top:12px}.matasellos span{font-size:6px;letter-spacing:1.2px}.small-title{max-width:65%}
  nav ul{gap:14px}.correspondencia-top{padding:18px 7%}.mini-envelope{width:100%;max-width:250px}
  main{padding:55px 6%}h2{font-size:35px}#portfolio .portfolio-grid{grid-template-columns:1fr}.members{grid-template-columns:1fr}.postcard{grid-template-columns:1fr 1fr}.postcard-address{min-height:330px}.postcard-right{min-height:330px;padding:24px 22px}.photo-slot{width:68px;height:88px;right:18px;top:20px}.postcard-copy{margin-top:125px;font-size:12.5px;line-height:1.65}.academic-stats{grid-template-columns:1fr}.project-card{padding:30px 28px}.project-card h3{font-size:31px}
}


