/* =========================================================
   Portafolio — Cristóbal Concha Mathiesen
   Hoja de estilos única. Todo el sistema vive aquí.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Color. Anclado en la superficie vegetal sobre la que
     están fotografiados los libros: papel de hueso, verde
     profundo, tinta con dominante fría, oro de canto. */
  --papel:        #EDEAE0;
  --papel-hondo:  #E3DFD2;
  --tinta:        #191E17;
  --verde:        #2C3F2E;
  --musgo:        #6F7F62;
  --oro:          #8E7226;

  /* Tipografía */
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --texto:   "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Escala */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1.0625rem;
  --t-md:   clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem);
  --t-lg:   clamp(1.5rem,  1.2rem + 1.4vw, 2.125rem);
  --t-xl:   clamp(2rem,    1.4rem + 3vw,   3.5rem);
  --t-2xl:  clamp(2.75rem, 1.6rem + 5.4vw, 5.75rem);

  /* Ritmo */
  --margen:   clamp(1.25rem, 5vw, 5.5rem);
  --seccion:  clamp(4.5rem, 9vw, 9rem);
  --medida:   68ch;
  --regla:    1px solid rgba(25,30,23,.18);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:var(--t-base);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:400; line-height:1.08; }
p{ margin:0 0 1.05em; max-width:var(--medida); }
p:last-child{ margin-bottom:0; }

a{ color:inherit; }

img{ display:block; width:100%; height:auto; }

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

.envoltura{
  max-width:1440px;
  margin-inline:auto;
  padding-inline:var(--margen);
}

.oculto{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---------- 3. Rótulos y microtipografía ---------- */
.rotulo{
  font-family:var(--texto);
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--musgo);
  margin:0;
}

/* ---------- 4. Barra superior ---------- */
.barra{
  position:sticky; top:0; z-index:50;
  background:rgba(237,234,224,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:var(--regla);
}
.barra__interior{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem;
  padding-block:.85rem;
  max-width:1440px; margin-inline:auto;
  padding-inline:var(--margen);
}
.barra__nombre{
  font-family:var(--display);
  font-size:1.0625rem;
  letter-spacing:.01em;
  text-decoration:none;
  white-space:nowrap;
}
.barra__nav{
  display:flex; flex-wrap:wrap; gap:clamp(.9rem,2.2vw,1.9rem);
  font-size:var(--t-sm);
}
.barra__nav a{
  text-decoration:none;
  color:var(--musgo);
  padding-block:.15rem;
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.barra__nav a:hover{ color:var(--verde); border-bottom-color:var(--oro); }
.barra__nav a.es-actual{ color:var(--verde); border-bottom-color:var(--verde); }

@media (max-width:640px){
  .barra__interior{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  .barra__nav{ font-size:var(--t-xs); gap:1rem; }
}

/* ---------- 5. Portada ---------- */
.portada{ padding-top:clamp(3rem,7vw,6rem); padding-bottom:clamp(2.5rem,5vw,4rem); }

.portada__nombre{
  font-size:var(--t-2xl);
  letter-spacing:-.022em;
  line-height:.94;
  margin-bottom:.5rem;
}
.portada__nombre em{
  font-style:italic;
  font-weight:300;
  color:var(--verde);
}
.portada__oficios{
  font-family:var(--texto);
  font-size:var(--t-sm);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--musgo);
  padding-top:1rem;
  border-top:var(--regla);
  margin-bottom:clamp(1.75rem,4vw,2.75rem);
  max-width:none;
}
.portada__reja{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(1.75rem,5vw,4.5rem);
  align-items:start;
}
.portada__entrada{
  font-family:var(--display);
  font-size:var(--t-md);
  line-height:1.5;
}
.portada__entrada p{ max-width:46ch; }
.portada__accesos{
  display:flex; flex-direction:column; gap:.1rem;
  border-top:1px solid var(--tinta);
}
.acceso{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-block:.85rem;
  border-bottom:var(--regla);
  text-decoration:none;
  font-size:var(--t-sm);
  transition:padding-left .2s ease, color .2s ease;
}
.acceso span:first-child{ font-weight:500; }
.acceso span:last-child{ color:var(--musgo); font-size:var(--t-xs); }
.acceso:hover{ padding-left:.45rem; color:var(--verde); }

@media (max-width:820px){
  .portada__reja{ grid-template-columns:1fr; }
}

/* ---------- 6. Secciones ---------- */
.seccion{ padding-block:var(--seccion); }
.seccion--filo{ border-top:var(--regla); }

.seccion__encabezado{
  display:flex; align-items:baseline; gap:1.25rem;
  margin-bottom:clamp(2rem,4vw,3.25rem);
  padding-bottom:.9rem;
  border-bottom:1px solid var(--tinta);
}
.seccion__titulo{
  font-size:var(--t-lg);
  letter-spacing:-.012em;
}
.seccion__nota{
  margin:0 0 0 auto;
  font-size:var(--t-xs);
  color:var(--musgo);
  text-align:right;
  max-width:34ch;
}
@media (max-width:640px){
  .seccion__encabezado{ flex-direction:column; gap:.5rem; align-items:flex-start; }
  .seccion__nota{ margin-left:0; text-align:left; }
}

/* ---------- 7. Caso: cartela + cuerpo ----------
   La cartela es el gesto de firma del sitio: una ficha de
   sala, como las que acompañan una pieza en exhibición.  */
.caso{
  display:grid;
  grid-template-columns:minmax(170px,1fr) minmax(0,2.55fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  padding-block:clamp(3rem,6vw,5.5rem);
  border-top:var(--regla);
}
.caso:first-of-type{ border-top:0; padding-top:0; }

.cartela{
  position:sticky; top:6.5rem;
  align-self:start;
  border-top:2px solid var(--verde);
  padding-top:.85rem;
}
.cartela__dato{
  margin:0 0 .7rem;
  font-size:var(--t-xs);
  line-height:1.45;
  max-width:none;
}
.cartela__dato b{
  display:block;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--musgo);
  font-size:.6875rem;
  margin-bottom:.12rem;
}

.caso__titulo{
  font-size:var(--t-lg);
  letter-spacing:-.014em;
  margin-bottom:1.1rem;
  max-width:22ch;
}
.caso__bajada{
  font-family:var(--display);
  font-size:var(--t-md);
  line-height:1.5;
  margin-bottom:1.5rem;
}
.caso__cuerpo > p{ margin-bottom:1.15em; }

.caso__lista{
  margin:0 0 1.5rem;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:.55rem 1.75rem;
  max-width:var(--medida);
  border-top:var(--regla);
  padding-top:.9rem;
}
.caso__lista li{
  font-size:var(--t-sm);
  line-height:1.45;
  padding-left:.9rem;
  position:relative;
  color:#3A4437;
}
.caso__lista li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:4px; height:4px; background:var(--oro);
}

@media (max-width:860px){
  .caso{ grid-template-columns:1fr; }
  .cartela{ position:static; }
}

/* ---------- 8. Figuras e imágenes ---------- */
.figura{ margin:0 0 1.75rem; }
.figura:last-child{ margin-bottom:0; }

.figura img{
  background:var(--papel-hondo);
  object-fit:cover;
  width:100%;
}
.figura--alta img{ aspect-ratio:4/5; }
.figura--pareja img{ aspect-ratio:1/1; }
.figura--ancha img{ aspect-ratio:16/9; }
.figura--doble img{ aspect-ratio:2/1; }
.figura--libre img{ aspect-ratio:auto; object-fit:contain; }

.figura figcaption{
  margin-top:.6rem;
  font-size:var(--t-xs);
  color:var(--musgo);
  line-height:1.45;
  max-width:58ch;
}

.pareja{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(.75rem,2vw,1.35rem);
  margin-bottom:1.75rem;
}
.pareja .figura{ margin-bottom:0; }

/* Banda a sangre, para las piezas que deben respirar */
.banda{
  margin-block:clamp(2rem,5vw,4rem);
}
.banda img{ aspect-ratio:21/9; object-fit:cover; }
@media (max-width:640px){ .banda img{ aspect-ratio:4/3; } }

/* Marcador de imagen pendiente.
   Se activa solo cuando el archivo todavía no existe. */
.figura--pendiente img{ display:none; }
.figura--pendiente .marcador{ display:flex; }
.marcador{
  display:none;
  flex-direction:column; justify-content:flex-end; gap:.35rem;
  padding:1.1rem;
  background:
    repeating-linear-gradient(-45deg,
      rgba(111,127,98,.10) 0 10px,
      rgba(111,127,98,0) 10px 20px),
    var(--papel-hondo);
  border:1px solid rgba(25,30,23,.16);
  aspect-ratio:16/9;
}
.figura--alta .marcador{ aspect-ratio:4/5; }
.figura--pareja .marcador{ aspect-ratio:1/1; }
.figura--doble .marcador{ aspect-ratio:2/1; }
.banda .marcador{ aspect-ratio:21/9; }
@media (max-width:640px){ .banda .marcador{ aspect-ratio:4/3; } }

.marcador b{
  font-size:.6875rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--musgo); font-weight:600;
}
.marcador code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--t-xs);
  color:var(--verde);
  word-break:break-all;
}

/* ---------- 9. Enlaces externos ---------- */
.enlaces{
  display:flex; flex-wrap:wrap; gap:.5rem .6rem;
  margin-top:1.4rem;
}
.enlace{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.42rem .85rem;
  border:1px solid rgba(25,30,23,.28);
  border-radius:999px;
  font-size:var(--t-xs);
  letter-spacing:.03em;
  text-decoration:none;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.enlace::after{ content:"↗"; font-size:.8em; color:var(--oro); }
.enlace:hover{ background:var(--verde); border-color:var(--verde); color:var(--papel); }
.enlace:hover::after{ color:var(--papel); }
.enlace[data-pendiente]{ opacity:.5; }

/* ---------- 10. Obra complementaria ---------- */
.obras{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:clamp(1.75rem,4vw,3rem);
}
.obra__titulo{
  font-size:var(--t-md);
  margin:1rem 0 .35rem;
}
.obra__meta{
  font-size:var(--t-xs); color:var(--musgo);
  letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:.7rem;
}
.obra p{ font-size:var(--t-sm); }

/* ---------- 11. Trayectoria ---------- */
.tramos{ border-top:1px solid var(--tinta); }
.tramo{
  display:grid;
  grid-template-columns:minmax(120px,.65fr) minmax(0,1.5fr) minmax(0,2fr);
  gap:.4rem clamp(1rem,3vw,2.5rem);
  padding-block:1.15rem;
  border-bottom:var(--regla);
}
.tramo__anos{
  font-size:var(--t-sm);
  color:var(--musgo);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.tramo__lugar{ font-family:var(--display); font-size:var(--t-md); line-height:1.25; }
.tramo__rol{ font-size:var(--t-sm); color:#3A4437; }
.tramo__rol p{ max-width:none; }
@media (max-width:760px){
  .tramo{ grid-template-columns:1fr; }
  .tramo__anos{ order:-1; }
}

/* ---------- 12. Contacto y pie ---------- */
.contacto{
  background:var(--verde);
  color:var(--papel);
}
.contacto .rotulo{ color:rgba(237,234,224,.62); }
.contacto__reja{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(1.5rem,4vw,3rem);
  align-items:end;
}
.contacto__frase{
  font-family:var(--display);
  font-size:var(--t-lg);
  line-height:1.18;
  letter-spacing:-.01em;
  grid-column:1/-1;
  max-width:19ch;
  margin-bottom:1rem;
}
.contacto__dato a{ color:var(--papel); text-decoration:none; border-bottom:1px solid rgba(237,234,224,.4); }
.contacto__dato a:hover{ border-bottom-color:var(--papel); }
.contacto__dato p{ margin-bottom:.3rem; }
.contacto :focus-visible{ outline-color:var(--papel); }

.pie{
  padding-block:2rem;
  border-top:var(--regla);
  font-size:var(--t-xs);
  color:var(--musgo);
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between;
}

/* ---------- 13. Currículum ---------- */
.cv{ padding-block:clamp(3rem,6vw,5rem); }
.cv__cabeza{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:end;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--tinta);
  margin-bottom:clamp(2rem,4vw,3rem);
}
.cv__nombre{ font-size:var(--t-xl); letter-spacing:-.02em; line-height:1; }
.cv__oficio{ font-size:var(--t-sm); color:var(--musgo); letter-spacing:.09em; text-transform:uppercase; margin-top:.75rem; }
.cv__ficha{ font-size:var(--t-sm); }
.cv__ficha p{ margin-bottom:.2rem; }
.cv__ficha a{ color:var(--verde); text-decoration:none; border-bottom:1px solid rgba(44,63,46,.35); }

.cv__bloque{
  display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(0,3.2fr);
  gap:clamp(1rem,3vw,2.5rem);
  padding-block:clamp(1.75rem,3.5vw,2.5rem);
  border-top:var(--regla);
}
.cv__bloque:first-of-type{ border-top:0; padding-top:0; }
.cv__bloque > h2{
  font-family:var(--texto);
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--musgo);
  padding-top:.35rem;
}
@media (max-width:760px){ .cv__bloque, .cv__cabeza{ grid-template-columns:1fr; } }

.puesto{ margin-bottom:1.6rem; }
.puesto:last-child{ margin-bottom:0; }
.puesto__linea{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .75rem;
  margin-bottom:.3rem;
}
.puesto__lugar{ font-family:var(--display); font-size:var(--t-md); line-height:1.2; }
.puesto__anos{ font-size:var(--t-xs); color:var(--musgo); font-variant-numeric:tabular-nums; letter-spacing:.05em; }
.puesto__cargo{ font-size:var(--t-sm); font-weight:500; margin-bottom:.35rem; }
.puesto p{ font-size:var(--t-sm); }

.competencias{
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:.4rem 1.5rem;
}
.competencias li{ font-size:var(--t-sm); padding-left:.9rem; position:relative; }
.competencias li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:4px; height:4px; background:var(--oro);
}

.obras-cv{ margin:0; padding:0; list-style:none; }
.obras-cv li{
  padding-block:.6rem;
  border-bottom:var(--regla);
  font-size:var(--t-sm);
}
.obras-cv li:first-child{ border-top:var(--regla); }
.obras-cv b{ font-weight:500; }
.obras-cv span{ color:var(--musgo); }

.descargar{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1rem;
  padding:.55rem 1.1rem;
  border:1px solid var(--verde);
  border-radius:999px;
  background:none; color:var(--verde);
  font-family:var(--texto); font-size:var(--t-xs);
  letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.descargar:hover{ background:var(--verde); color:var(--papel); }

/* ---------- 14. Aparición al desplazar ---------- */
.aparece{ opacity:0; transform:translateY(14px); }
.aparece.visible{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.7,.3,1);
}
@media (prefers-reduced-motion:reduce){
  .aparece,.aparece.visible{ opacity:1; transform:none; transition:none; }
}

/* ---------- 15. Impresión (el CV en PDF sale de aquí) ---------- */
@media print{
  @page{ margin:16mm 14mm; }
  :root{ --papel:#fff; --t-base:10.5pt; }
  body{ background:#fff; color:#000; font-size:10.5pt; line-height:1.42; }
  .barra,.pie,.descargar,.no-imprimir{ display:none !important; }
  .cv{ padding:0; }
  .cv__bloque{ break-inside:avoid; padding-block:9pt; }
  .puesto{ break-inside:avoid; margin-bottom:9pt; }
  .cv__nombre{ font-size:24pt; }
  .puesto__lugar{ font-size:12pt; }
  .puesto p,.puesto__cargo,.competencias li,.obras-cv li,.cv__ficha{ font-size:9.5pt; }
  a{ text-decoration:none; border:0 !important; }
  .envoltura{ max-width:none; padding:0; }
}