/* ============================================================
   BDI — Sistema editorial (Approach A)
   Paleta cerrada · 12 col · hairlines · tip serif
   ============================================================ */
:root{
  --n950:#1A1A1A; --n800:#303030; --n700:#404040;
  --n600:#606060; --n500:#909090;
  --paper:#FAFAFA; --line:#E5E5E5;
  --ink:#1A1A1A; --white:#FFFFFF; --black:#000000;

  --f-display:"Source Serif 4", Georgia, serif;
  --f-ui:"Inter", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, monospace;

  --gap:24px; --col-12:72rem;
  --pad:clamp(1.25rem, 4vw, 3rem);
}

*{ box-sizing:border-box; margin:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--f-ui);
  font-size:16px; line-height:1.55;
  color:var(--ink); background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.mono{ font-family:var(--f-mono); letter-spacing:0.02em; }

h1,h2,h3{ font-family:var(--f-display); font-weight:500; line-height:1.12; text-wrap:balance; }
a{ color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ text-decoration-color:var(--ink); }
img{ max-width:100%; height:auto; display:block; }

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

.wrap{ max-width:var(--col-12); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- Header ---------- */
.top{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1rem var(--pad);
  border-bottom:1px solid var(--line); background:var(--white);
  position:sticky; top:0; z-index:10;
}
.marca{ display:inline-block; line-height:0; text-decoration:none; }
.marca img{ width:44px; height:auto; }
.nav{ display:flex; flex-wrap:wrap; gap:.25rem 1.5rem; align-items:center; }
.nav a{ text-decoration:none; font-size:.9rem; font-weight:500; color:var(--n700); }
.nav a:hover{ color:var(--ink); }
.nav__cta{ border:1px solid var(--ink); padding:.5rem .9rem; color:var(--ink); }
.nav__cta:hover{ background:var(--ink); color:var(--white); }

/* ---------- Hero ---------- */
.hero{
  display:grid; gap:2rem;
  padding:4rem var(--pad) 4.5rem;
  border-bottom:1px solid var(--line);
  max-width:none;
}
.hero__texto{ max-width:44rem; }
h1{ font-size:clamp(2rem, 5vw, 3.4rem); }
.eyebrow{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--n600);
  margin-bottom:1rem;
}
.hero__lead{ margin-top:1.1rem; font-size:1.15rem; color:var(--n700); max-width:38rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem; }
.hero__foto{ max-width:22rem; }

/* ---------- Photo treatment ---------- */
.foto{ filter:grayscale(1) contrast(1.1); }

/* ---------- Sections ---------- */
.seccion{ padding:4.5rem var(--pad); max-width:var(--col-12); margin-inline:auto; }
.seccion--gris{ background:var(--paper); max-width:none; }
.seccion--gris > *{ max-width:var(--col-12); margin-inline:auto; }
.seccion__cab{ margin-bottom:2.5rem; max-width:40rem; }
.seccion__kicker{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--n500); margin-bottom:.6rem;
}
.seccion h2{ font-size:clamp(1.6rem, 3.4vw, 2.4rem); }
.seccion__nota{ margin-top:2rem; padding-top:1.25rem; border-top:1px solid var(--line); color:var(--n700); max-width:52rem; }

/* ---------- Líneas ---------- */
.lineas{
  list-style:none; padding:0;
  display:grid; gap:0;
}
.linea{
  display:grid; grid-template-columns:4rem 1fr; gap:1rem;
  padding:1.75rem 0; border-top:1px solid var(--line);
}
.linea:first-child{ border-top:none; padding-top:0; }
.linea__num{ font-size:.85rem; color:var(--n500); padding-top:.25rem; }
.linea h3{ font-size:1.35rem; margin-bottom:.35rem; }
.linea p{ color:var(--n700); max-width:44rem; }

/* ---------- Capacidades ---------- */
.caps{ display:grid; gap:0; }
.cap-fila{
  display:grid; grid-template-columns:minmax(11rem, 2fr) 3fr; gap:1rem;
  padding:1.1rem 0; border-top:1px solid var(--line);
}
.cap-fila dt{ font-weight:600; font-size:.98rem; }
.cap-fila dd{ color:var(--n700); }

/* ---------- Pasos ---------- */
.pasos{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem,1fr));
  gap:2rem;
}
.paso{ padding-top:1rem; border-top:1px solid var(--ink); }
.step{ display:block; font-size:.8rem; color:var(--n500); margin-bottom:.75rem; }
.paso h3{ font-size:1.25rem; margin-bottom:.35rem; }
.paso p{ color:var(--n700); }

/* ---------- Equipo ---------- */
.equipo{ list-style:none; padding:0; display:grid; gap:2.5rem; }
.miembro{ display:grid; grid-template-columns:11rem 1fr; gap:1.5rem; align-items:start; }
.miembro__foto{ max-width:11rem; }
.miembro h3{ font-size:1.35rem; }
.miembro__rol{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--n600); margin:.2rem 0 .6rem;
}
.miembro__bio{ color:var(--n700); max-width:34rem; }
.pendiente{ display:none; } /* §6.3 gate: solo visible con foto + título autorizados */
.pendiente__slot{ aspect-ratio:4/5; background:var(--paper); border:1px solid var(--line); }

/* ---------- Contacto ---------- */
.contacto{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.contacto address{ font-style:normal; line-height:1.7; color:var(--n700); }
.contacto__c{ margin-top:1rem; font-size:1.05rem; line-height:2; }
.contacto__form{ display:grid; gap:1rem; }
.contacto__form label{ display:grid; gap:.35rem; font-size:.85rem; font-weight:600; color:var(--n800); }
.contacto__form input,
.contacto__form select,
.contacto__form textarea{
  font:inherit; font-size:.95rem; color:var(--ink);
  background:var(--white); border:1px solid var(--line);
  padding:.6rem .7rem; border-radius:0;
}
.contacto__form input:focus,
.contacto__form select:focus,
.contacto__form textarea:focus{ border-color:var(--ink); outline:none; }
.conta__nota{ font-size:.82rem; color:var(--n600); }

/* ---------- Botones ---------- */
.btn{
  display:inline-block; font-family:var(--f-ui); font-size:.92rem; font-weight:600;
  padding:.75rem 1.3rem; border:1px solid var(--ink);
  color:var(--ink); background:transparent; text-decoration:none;
  border-radius:0; cursor:pointer;
}
.btn--primario{ background:var(--ink); color:var(--white); }
.btn--primario:hover{ background:var(--n800); }
.btn--secundario:hover{ background:var(--paper); }

/* ---------- Footer ---------- */
.pie{
  border-top:1px solid var(--line); background:var(--n950); color:var(--n500);
  display:grid; grid-template-columns:1fr 1fr; gap:2rem;
  padding:3rem var(--pad); max-width:none;
}
.pie a{ text-decoration:none; color:var(--n500); }
.pie a:hover{ color:var(--white); }
.pie__logo img{ width:48px; height:auto; margin-bottom:1rem; }
.pie__nombre{ font-family:var(--f-display); color:var(--white); font-size:1.05rem; }
.pie__tag{ display:block; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--n500); margin-top:.35rem; }
.pie__legal{ font-size:.85rem; line-height:1.85; display:grid; gap:.4rem; align-content:start; }

/* ---------- Motion (respetando prefers-reduced-motion) ---------- */
/* JS agrega la clase .js a <html>; el estado base es SIEMPRE visible.
   Solo se esconde cuando JS está activo, no reduce-motion y hay soporte. */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}
.reveal{ transition:opacity .5s ease, transform .5s ease; }
.is-in{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion: no-preference){
  .js .reveal:not(.is-in){ opacity:0; transform:translateY(12px); }
}

/* ---------- Responsive ---------- */
@media (min-width:880px){
  .hero{ grid-template-columns:minmax(0,1fr) minmax(0,26rem); align-items:center; }
  .hero__foto{ margin-left:auto; }
}
@media (max-width:760px){
  .top{ flex-wrap:wrap; }
  .nav{ width:100%; order:3; gap:.5rem 1.1rem; }
  .cap-fila{ grid-template-columns:1fr; gap:.25rem; }
  .contacto{ grid-template-columns:1fr; }
  .pie{ grid-template-columns:1fr; }
  .miembro{ grid-template-columns:1fr; }
  .miembro__foto{ max-width:16rem; }
}