/* ============================================================
   GETSUR — estilos
   Paleta: verde bosque / papel / cobre (zorro) / tinta
   Tipos:  Anton (afiche) · IBM Plex Sans (texto) · Plex Mono (etiquetas)
   ============================================================ */

:root{
  --bosque:  #17352B;
  --bosque-2:#1E4436;
  --papel:   #F4F3EE;
  --cobre:   #D96C2F;
  --tinta:   #1B1A17;
  --gris:    #6D6A62;
  --linea:   #D8D5CC;

  --display: 'Anton', sans-serif;
  --texto:   'IBM Plex Sans', sans-serif;
  --mono:    'IBM Plex Mono', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

body{
  font-family:var(--texto);
  color:var(--tinta);
  background:var(--papel);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
a:focus-visible{ outline:3px solid var(--cobre); outline-offset:3px; }

/* ---------- etiquetas mono ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cobre);
  margin-bottom:1rem;
}
.eyebrow-claro{ color:#E8A87C; }

/* ===================== NAV ===================== */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem clamp(1.2rem,5vw,3.5rem);
  background:rgba(244,243,238,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linea);
}
.nav-marca{
  font-family:var(--display);
  font-size:1.35rem;
  letter-spacing:.04em;
  text-decoration:none;
  color:var(--bosque);
}
.nav-marca span{ color:var(--cobre); }
.nav-logo{
  height:100px;
  width:auto;
  display:block;
}
@media (max-width:560px){
  .nav-logo{ height:72px; }
}
.nav-links{ display:flex; gap:clamp(1rem,3vw,2.2rem); }
.nav-links a{
  font-family:var(--mono);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--tinta);
  padding-bottom:2px;
  border-bottom:2px solid transparent;
  transition:border-color .2s;
}
.nav-links a:hover{ border-color:var(--cobre); }

/* ===================== HERO ===================== */
.hero{
  min-height:calc(100vh - 65px);
  background:var(--bosque);
  color:var(--papel);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(3rem,8vw,6rem) clamp(1.2rem,5vw,3.5rem);
  position:relative;
  overflow:hidden;
}
.hero::after{ /* trama sutil de líneas: papel de registro */
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    to bottom, transparent 0 46px, rgba(244,243,238,.045) 46px 47px);
  pointer-events:none;
}
.hero-eyebrow{ margin-bottom:2rem; }
.hero-titulo{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(3rem, 11vw, 8.5rem);
  line-height:.95;
  letter-spacing:.01em;
  display:flex; flex-direction:column;
  animation:sube .7s ease both;
}
.hero-titulo em{
  font-style:normal;
  color:var(--cobre);
}
.hero-bajada{
  max-width:38rem;
  margin-top:2.2rem;
  font-size:clamp(1rem, 1.6vw, 1.15rem);
  color:#CFD8D0;
  animation:sube .7s .15s ease both;
}
.hero-flecha{
  position:absolute; bottom:2rem; left:clamp(1.2rem,5vw,3.5rem);
  font-size:1.6rem; text-decoration:none; color:var(--cobre);
  animation:sube .7s .3s ease both;
}
@keyframes sube{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ===================== SECCIONES ===================== */
.seccion{
  padding:clamp(3.5rem,8vw,6.5rem) clamp(1.2rem,5vw,3.5rem);
  max-width:1200px;
  margin:0 auto;
}
.seccion-verde{
  background:var(--bosque);
  color:var(--papel);
  max-width:none;
}
.seccion-verde > *{ max-width:1200px; margin-left:auto; margin-right:auto; }

.seccion-titulo{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(2rem, 4.5vw, 3.2rem);
  color:var(--bosque);
  margin-bottom:2.2rem;
}
.seccion-titulo-claro{ color:var(--papel); }
.seccion-bajada{
  max-width:34rem;
  color:var(--gris);
  margin-top:-1.4rem;
  margin-bottom:2.4rem;
}

/* ---------- misión / visión ---------- */
.mv{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.4rem;
  margin-bottom:3.5rem;
}
.mv-card{
  border:1px solid var(--linea);
  border-top:4px solid var(--cobre);
  background:#FFFFFF;
  padding:1.8rem;
}
.mv-card h3{
  font-family:var(--mono);
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bosque);
  margin-bottom:.8rem;
}
.mv-card p{ font-size:.98rem; }

/* ---------- socios ---------- */
.sub-titulo{
  font-family:var(--mono);
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cobre);
  margin-bottom:1.4rem;
}
.socios{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:1.3rem 1.1rem;
}
.socio{ text-align:left; }
.socio-foto{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
  background:var(--bosque-2);
  filter:grayscale(18%);
  transition:filter .25s;
}
.socio:hover .socio-foto{ filter:grayscale(0); }
.socio-foto-fallback{
  width:100%;
  aspect-ratio:4/5;
  display:flex; align-items:center; justify-content:center;
  background:var(--bosque-2);
  color:var(--papel);
  font-family:var(--display);
  font-size:2rem;
}
.socio-nombre{
  font-weight:600;
  font-size:.92rem;
  margin-top:.6rem;
  line-height:1.3;
}
.socio-rol{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gris);
  margin-top:.15rem;
}

/* ---------- proyectos ---------- */
.proyectos{ display:flex; flex-direction:column; }
.proyecto{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:1.6rem;
  padding:1.8rem 0;
  border-bottom:1px solid rgba(244,243,238,.18);
}
.proyecto:last-child{ border-bottom:none; }
.proyecto-periodo{
  font-family:var(--mono);
  font-size:.82rem;
  color:#E8A87C;
  padding-top:.25rem;
}
.proyecto-titulo{
  font-size:1.12rem;
  font-weight:600;
  line-height:1.4;
  margin-bottom:.4rem;
}
.proyecto-mandante{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9DB8A8;
  margin-bottom:.6rem;
}
.proyecto-desc{
  font-size:.94rem;
  color:#CFD8D0;
  max-width:46rem;
}
@media (max-width:560px){
  .proyecto{ grid-template-columns:1fr; gap:.4rem; }
}

/* ---------- publicaciones ---------- */
.pubs{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(185px, 1fr));
  gap:2rem 1.4rem;
}
.pub{
  text-decoration:none;
  display:block;
  transition:transform .2s;
}
.pub:hover{ transform:translateY(-4px); }
.pub-portada, .pub-portada-fallback{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
  border:1px solid var(--linea);
  box-shadow:0 10px 22px -14px rgba(23,53,43,.45);
  background:#FFF;
}
.pub-portada-fallback{
  display:flex; flex-direction:column; justify-content:space-between;
  padding:1.1rem;
  background:var(--bosque);
  color:var(--papel);
}
.pub-portada-fallback .pf-tipo{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--cobre);
}
.pub-portada-fallback .pf-titulo{
  font-family:var(--display);
  font-size:1.05rem;
  line-height:1.15;
  text-transform:uppercase;
}
.pub-meta{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cobre);
  margin-top:.75rem;
}
.pub-titulo{
  font-weight:600;
  font-size:.92rem;
  line-height:1.35;
  margin-top:.25rem;
}
.pub-autores{
  font-size:.8rem;
  color:var(--gris);
  margin-top:.2rem;
}
.pubs-vacio{
  font-family:var(--mono);
  color:var(--gris);
  font-size:.9rem;
  border:1px dashed var(--linea);
  padding:2rem;
}

/* ===================== FOOTER ===================== */
.pie{
  background:var(--tinta);
  color:var(--papel);
  padding:3rem clamp(1.2rem,5vw,3.5rem);
  text-align:center;
}
.pie-marca{
  font-family:var(--display);
  font-size:1.6rem;
  letter-spacing:.04em;
}
.pie-marca span{ color:var(--cobre); }
.pie-nombre{ font-size:.9rem; color:#B9B6AD; margin-top:.4rem; }
.pie-datos{
  font-family:var(--mono);
  font-size:.8rem;
  color:#8F8C83;
  margin-top:1.2rem;
}
.pie-datos a{ color:var(--cobre); text-decoration:none; }
.pie-redes{ margin-top:.6rem; font-family:var(--mono); font-size:.8rem; }
.pie-redes a{ color:var(--papel); margin:0 .5rem; }