/* ═══════════════════════════════════════════════════════════════════
   ABOUT — quiénes somos

   Reutiliza los tokens y la retícula de styles.css/services.css. Aquí
   sólo vive lo que no existía: los retratos de fundador, la línea de
   tiempo del origen y la banda de equipo.
   ═══════════════════════════════════════════════════════════════════ */

.ab-hero{
  width:var(--wrap);margin-inline:auto;
  padding:clamp(130px,15vw,190px) 0 clamp(40px,6vw,64px);
}
.ab-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--w-30);display:block;margin-bottom:22px;
}
.ab-h1{
  font-size:clamp(34px,6vw,68px);font-weight:700;letter-spacing:-.035em;
  line-height:1.02;color:var(--e-str);max-width:15ch;
}
.ab-lede{
  margin-top:26px;max-width:62ch;
  font-size:clamp(15px,1.5vw,18px);font-weight:400;line-height:1.72;color:var(--w-60);
}
.ab-lede strong{color:var(--w);font-weight:600}

/* ── Línea de origen ────────────────────────────────────────────────
   Storm Brand Labs → Clevk no es un cambio de logo: es la misma gente y
   el mismo trabajo con otro nombre. Dibujarlo como continuidad —una sola
   línea que no se corta— dice eso mejor que un párrafo. */
.ab-origin{
  width:var(--wrap);margin-inline:auto;
  padding:clamp(40px,6vw,70px) 0;
  border-top:1px solid var(--w-10);
}
.ab-origin svg{width:100%;height:auto;display:block;overflow:visible}
.ab-o-line{stroke:var(--e-str);stroke-width:1.75;fill:none}
.ab-o-node{fill:var(--ink);stroke:var(--e-str);stroke-width:1.75}
.ab-o-t{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;fill:var(--w-60)}
.ab-o-y{font-family:var(--mono);font-size:15px;font-weight:600;fill:var(--e-str)}
.ab-origin [data-draw]{stroke-dasharray:1;stroke-dashoffset:1}
[data-reveal].revealed .ab-origin [data-draw],
.ab-origin.revealed [data-draw]{animation:vizDraw 1.5s var(--ease-film) forwards}
@media(prefers-reduced-motion:reduce){
  .ab-origin [data-draw]{stroke-dashoffset:0!important;animation:none!important}
}

/* ── La historia, en capítulos ──────────────────────────────────────
   Kevin: "hazla mucho más estilo storytelling". Cuatro capítulos con
   una línea vertical que los cose: el ojo ve una secuencia, no cuatro
   bloques sueltos. El número de capítulo va fuera del texto para que la
   columna de lectura no se rompa. */
.ab-story{
  width:var(--wrap);margin-inline:auto;
  padding:clamp(50px,7vw,84px) 0;
  border-top:1px solid var(--w-10);
}
.ab-chapters{margin-top:48px;position:relative}
.ab-chapters::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,var(--e-30),var(--w-10) 60%,transparent);
}
.ab-chapter{
  position:relative;
  padding:0 0 44px 34px;
  max-width:66ch;
}
.ab-chapter:last-child{padding-bottom:0}
/* El punto del capítulo, sobre la línea */
.ab-chapter::before{
  content:"";position:absolute;left:-4px;top:7px;
  width:9px;height:9px;border-radius:50%;
  background:var(--ink);border:1.5px solid var(--e-str);
}
.ab-ch-n{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--w-30);display:block;margin-bottom:12px;
}
.ab-ch-t{
  font-size:clamp(19px,2.2vw,25px);font-weight:700;letter-spacing:-.022em;
  color:var(--e-str);line-height:1.25;margin-bottom:16px;
}
.ab-ch-p{
  font-size:15px;font-weight:400;line-height:1.78;color:var(--w-60);
  margin-bottom:14px;
}
.ab-ch-p:last-child{margin-bottom:0}
.ab-ch-p strong{color:var(--w);font-weight:600}

/* ── Enlace a LinkedIn en la ficha de fundador ─────────────────────── */
.ab-f-li{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:20px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--w-60);
  border:1px solid var(--w-10);padding:9px 14px;
  transition:color .3s var(--ease-std),border-color .3s var(--ease-std);
}
.ab-f-li:hover,.ab-f-li:focus-visible{color:var(--e-str);border-color:var(--e-30)}
.ab-f-li svg{width:13px;height:13px;flex:none}

/* ── Fundadores ─────────────────────────────────────────────────────── */
.ab-founders{
  width:var(--wrap);margin-inline:auto;
  padding:clamp(50px,7vw,84px) 0;
  border-top:1px solid var(--w-10);
}
.ab-f-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--w-10);
  border:1px solid var(--w-10);margin-top:44px;
}
.ab-f{background:var(--ink);padding:0 0 32px}
.ab-f-photo{
  position:relative;aspect-ratio:4/5;max-height:440px;overflow:hidden;
  background:var(--ink-1);border-bottom:1px solid var(--w-10);
}
.ab-f-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center 18%;
  /* Monocromo por marca, y además unifica dos retratos hechos por medios
     distintos: sin esto uno se lee "estudio" y el otro "otra cosa". */
  filter:grayscale(1) contrast(1.04) brightness(.92);
  transition:filter .55s var(--ease-std);
}
.ab-f:hover .ab-f-photo img{filter:grayscale(.2) contrast(1) brightness(1)}
.ab-f-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(6,6,6,.55) 100%);
}
.ab-f-body{padding:28px 30px 0}
.ab-f-role{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--w-30);display:block;margin-bottom:10px;
}
.ab-f-name{font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.02em;color:var(--e-str)}
.ab-f-title{margin-top:8px;font-size:13px;line-height:1.55;color:var(--w-60)}
.ab-f-bio{margin-top:18px;font-size:14px;font-weight:400;line-height:1.75;color:var(--w-60)}
.ab-f-skills{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--w-10);
  display:flex;flex-wrap:wrap;gap:7px;
}
.ab-f-skill{
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--w-60);border:1px solid var(--w-10);padding:5px 9px;
}

/* ── Nota de medio sintético ────────────────────────────────────────
   Va aquí, bajo los retratos, porque es donde importa. Discreta pero no
   escondida: el pack de identidad la exige en escenas fotorrealistas, y
   una página que humaniza la marca no puede empezar ocultando cómo se
   hizo su propia foto. */
.ab-disclosure{
  margin-top:20px;
  font-family:var(--mono);font-size:10.5px;line-height:1.6;
  letter-spacing:.03em;color:var(--w-30);
  max-width:78ch;
}

/* ── Equipo / regiones ──────────────────────────────────────────────── */
.ab-team{
  width:var(--wrap);margin-inline:auto;
  padding:clamp(50px,7vw,84px) 0;
  border-top:1px solid var(--w-10);
}
.ab-values{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--w-10);border:1px solid var(--w-10);margin-top:40px;
}
.ab-value{background:var(--ink);padding:26px 26px 30px}
.ab-value-n{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  color:var(--w-30);display:block;margin-bottom:14px;
}
.ab-value-k{display:block;font-size:17px;font-weight:600;color:var(--e-str);letter-spacing:-.015em}
.ab-value-v{display:block;margin-top:10px;font-size:13px;line-height:1.65;color:var(--w-60)}

@media(max-width:900px){
  .ab-f-grid{grid-template-columns:1fr}
  .ab-values{grid-template-columns:1fr}
}