:root{
  --deep:#0B1626;
  --panel:#121F33;
  --line:#283A50;
  --accent:#C9A961;
  --accent-dim:#8C7A4E;
  --text: rgba(237,232,222,.86);
  --text-dim: rgba(237,232,222,.5);
}
body.theme-light{
  --deep:#E6E4DF;
  --panel:#DEDCD6;
  --line:#D3D0C9;
  --accent:#6B6B66;
  --accent-dim: rgba(20,20,18,.42);
  --text:#111110;
  --text-dim: rgba(17,17,16,.6);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--deep);
  color:var(--text);
  font-family:'Archivo', sans-serif;
  line-height:1.5;
  overflow-x:hidden;
  position:relative;
  transition:background .35s ease, color .35s ease;
}
h1,h2,h3,.display{ font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.01em; }
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}

.blueprint-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.7;
}
body:not(.theme-light) .blueprint-bg{ opacity:.14; }

/* ===== Nav ===== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 64px;
  background:linear-gradient(var(--deep) 55%, transparent);
}
.brand{font-family:'Fraunces',serif; font-size:1.05rem; letter-spacing:.02em;}
.brand em{color:var(--accent); font-style:italic;}
.nav{display:flex; gap:28px; align-items:center;}
.nav a{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); transition:color .2s;}
.nav a:hover{color:var(--accent);}
#theme-switch{ display:flex; gap:4px; padding:4px; border:1px solid var(--line); margin-left:8px; }
#theme-switch button{
  font-family:'Archivo',sans-serif; font-size:11px; letter-spacing:.04em;
  padding:6px 10px; border:1px solid transparent; background:none; cursor:pointer; color:var(--text-dim);
}
#theme-switch button.active{ color:var(--text); border-color:var(--line); }

/* ===== Custom CAD cursor (solo con mouse) ===== */
#cad-cursor, #cad-coords, #cota-marker{ display:none; }
@media (hover:hover) and (pointer:fine){
  body.cad, body.cad a, body.cad button{cursor:none;}
  #cad-cursor{ display:block; position:fixed; top:0; left:0; z-index:200; pointer-events:none; opacity:0; transition:opacity .2s ease; transform:translate(-50%,-50%); }
  #cad-cursor.active{opacity:1;}
  #cad-coords{ display:block; position:fixed; z-index:200; pointer-events:none; font-size:11px; letter-spacing:.04em; color:var(--accent); opacity:0; transition:opacity .2s ease; white-space:nowrap; }
  #cad-coords.active{opacity:1;}
  #cota-marker{ display:block; position:fixed; top:0; left:0; z-index:200; pointer-events:none; opacity:0; transition:opacity .15s ease; transform:translate(-18px,-62px); }
  #cota-marker.active{opacity:1;}
}
#cad-cursor svg, #cota-marker svg{display:block;}

section{ position:relative; z-index:1; max-width:1408px; margin:0 auto; padding:120px 64px 140px; }

/* ===== Hero ===== */
.hero{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:120px; }
.hero .kicker{ color:var(--accent); font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:28px; }
.hero .kicker strong{ margin-left:.6em; }
.hero h1{ font-size:clamp(2.6rem, 6vw, 5.4rem); max-width:15ch; line-height:1.05; }
.accent-word{ font-style:italic; color:var(--accent); }
.hero p.sub{ margin-top:32px; max-width:48ch; font-size:1.15rem; color:var(--text-dim); }

.skyline-viewport{
  margin-top:110px; width:100vw; position:relative; left:50%; margin-left:-50vw;
  overflow:hidden; height:180px; touch-action:pan-y;
  -webkit-user-select:none; user-select:none;
}
#skyline-svg{ display:block; position:absolute; top:0; left:0; }
#skyline-svg path{ fill:none; stroke:var(--accent); stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round; }

/* ===== Section heads ===== */
.sheet-eyebrow{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dim); margin-bottom:18px; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:64px; gap:40px; flex-wrap:wrap; }
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem); max-width:18ch;}
.section-head .note{color:var(--text-dim); max-width:34ch; font-size:.98rem;}

/* ===== Perfil ===== */
.about-grid{ display:grid; grid-template-columns:minmax(0,768px) minmax(0,448px); gap:64px; justify-content:space-between; }
.about-grid p{margin-bottom:20px; max-width:56ch;}
.stat-list{ display:flex; flex-direction:column; }
.stat-list .row{ display:flex; justify-content:space-between; align-items:center; height:64px; padding:0 22px; border:1px solid var(--line); background:var(--deep); }
.stat-list .row + .row{ border-top:none; }
.stat-list .row .num{font-family:'Fraunces',serif; font-size:1.7rem; color:var(--accent);}
.stat-list .row .lbl{color:var(--text-dim); font-size:.9rem; max-width:24ch; text-align:right;}

/* ===== Portfolio ===== */
.port-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.port-card{
  position:relative; height:384px; border:1px solid var(--line); margin:0 -1px -1px 0;
  background:var(--panel); overflow:hidden; cursor:pointer; display:block; text-align:left;
  font:inherit; color:inherit; padding:0;
}
.port-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.35); transition:transform .6s ease, filter .4s ease, opacity .4s ease; opacity:.88; }
.port-card:hover img{ transform:scale(1.04); filter:grayscale(0); opacity:1; }
.port-card .meta{
  position:absolute; left:0; right:0; bottom:0; z-index:1; padding:22px;
  background:linear-gradient(transparent, rgba(11,22,38,.92) 55%);
  color:rgba(237,232,222,.92);
}
.port-card .meta .m2{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#C9A961;}
.port-card .meta h3{font-size:1.2rem; margin-top:4px;}
.port-card .meta .count{font-size:11px; color:rgba(237,232,222,.55); margin-top:6px;}

/* ===== Lista de obras con puntos ===== */
.obras{ border-top:1px solid var(--line); }
.obra{ display:flex; align-items:baseline; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.obra .yr{ font-family:'Fraunces',serif; color:var(--accent); white-space:nowrap; min-width:6.5em; }
.obra .dots{ flex:1; border-bottom:1px dotted var(--accent-dim); transform:translateY(-4px); min-width:24px; }
.obra .what{ text-align:right; }
.obra .what .m2{ color:var(--text-dim); margin-left:10px; white-space:nowrap; }

/* ===== Trayectoria ===== */
.timeline{ display:flex; flex-direction:column; }
.t-row{ display:grid; grid-template-columns:160px 1fr auto; gap:24px; min-height:128px; padding:24px 22px; align-items:center; border:1px solid var(--line); background:var(--deep); }
.t-row + .t-row{ border-top:none; }
.t-row .yr{font-family:'Fraunces',serif; color:var(--accent); font-size:1.1rem;}
.t-row .what h3{font-size:1.05rem; font-weight:500; margin-bottom:6px;}
.t-row .what p{color:var(--text-dim); font-size:.92rem; max-width:64ch;}
.t-row .tag{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-dim); }
.t-row a{border-bottom:1px solid var(--line);}

/* ===== Docencia / formación / concursos ===== */
.cols{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.list-dots .item{ display:flex; align-items:baseline; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.list-dots .item:first-child{ border-top:1px solid var(--line); }
.list-dots .yr{ font-family:'Fraunces',serif; color:var(--accent); white-space:nowrap; }
.list-dots .dots{ flex:1; border-bottom:1px dotted var(--accent-dim); transform:translateY(-4px); min-width:24px; }
.list-dots .what{ text-align:right; max-width:78%; }
.list-dots .what small{ display:block; color:var(--text-dim); font-size:.85rem; }
.list-title{ font-family:'Fraunces',serif; font-size:1.25rem; margin:0 0 18px; }
.list-title + .list-dots{ margin-bottom:48px; }

/* ===== Herramientas ===== */
.tools-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.tool-cell{ background:var(--deep); height:128px; padding:0 22px; display:flex; flex-direction:column; justify-content:center; }
.tool-cell .lvl{font-size:10px; letter-spacing:.08em; color:var(--accent-dim); text-transform:uppercase;}
.tool-cell h3{font-family:'Archivo',sans-serif; font-weight:600; font-size:1rem; margin-top:8px;}

/* ===== Contacto ===== */
.contact-inner{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:40px;}
.contact-inner h2{font-size:clamp(2rem,4.5vw,3.4rem); max-width:12ch;}
.contact-links{display:flex; flex-direction:column; gap:10px; align-items:flex-end;}
.contact-links a, .contact-links span{font-size:1rem; border-bottom:1px solid var(--line); padding-bottom:2px;}
.contact-links a:hover{border-color:var(--accent); color:var(--accent);}
footer{ position:relative; z-index:1; max-width:1408px; margin:0 auto; padding:32px 64px 48px; color:var(--text-dim); font-size:12px; letter-spacing:.04em; }

/* ===== Lightbox ===== */
.lightbox{ position:fixed; inset:0; z-index:150; background:rgba(6,12,22,.94); display:none; flex-direction:column; }
.lightbox.open{ display:flex; }
.lb-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 28px; color:rgba(237,232,222,.86); }
.lb-head h3{font-size:1.1rem;}
.lb-head .lb-count{font-size:12px; color:#C9A961; margin-left:14px; letter-spacing:.08em;}
.lb-close{ background:none; border:1px solid #283A50; color:rgba(237,232,222,.86); font:inherit; font-size:12px; letter-spacing:.08em; padding:8px 14px; cursor:pointer; }
.lb-stage{ flex:1; display:flex; align-items:center; justify-content:center; padding:0 72px 28px; min-height:0; position:relative; }
.lb-stage img{ max-width:100%; max-height:100%; object-fit:contain; background:#fff; }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); background:none; border:1px solid #283A50; color:#C9A961; width:44px; height:44px; font-size:20px; cursor:pointer; }
.lb-prev{left:16px;} .lb-next{right:16px;}

@media (max-width:980px){
  .topbar{padding:14px 6vw;}
  .nav a{display:none;}
  section{padding:80px 6vw 100px;}
  footer{padding:24px 6vw 40px;}
  .about-grid, .cols{grid-template-columns:1fr; gap:36px;}
  .port-grid{grid-template-columns:1fr 1fr;}
  .t-row{grid-template-columns:1fr; gap:8px;}
  .contact-links{align-items:flex-start;}
}
@media (max-width:640px){
  .port-grid{grid-template-columns:1fr;}
  .port-card{height:300px;}
  .obra{flex-wrap:wrap;}
  .obra .dots{display:none;}
  .obra .what{text-align:left; flex-basis:100%;}
  .list-dots .item{flex-wrap:wrap;}
  .list-dots .dots{display:none;}
  .list-dots .what{text-align:left; max-width:100%; flex-basis:100%;}
  .tools-grid{grid-template-columns:1fr 1fr;}
  .lb-stage{padding:0 8px 16px;}
  .lb-nav{top:auto; bottom:20px; transform:none;}
}