/* ============================================================
   06-QUIENES.CSS — Quiénes Somos · §3.0l
   ------------------------------------------------------------
   EL CSS ES EL DEL PROYECTO ANTERIOR, TAL CUAL. No se reescribió.
   Viene de ds-v2/code/prototipo/quienes-somos.html (84 KB en origen; aquí
   sin la fuente incrustada en base64, que ya la da sysnetia por tokens).

   LO ÚNICO QUE SE AÑADe AL PRINCIPIO es el marco de la sección: sysnetia
   necesita un <section> que ocupe la pantalla y un hijo que scrollee (§3.0l).
   Todo lo demás son las reglas originales, intactas.

   Las variables del original (--papel, --tinta, --gris, --filete, --azul...)
   ya vienen traducidas a los tokens de sysnetia en el propio CSS.
   ============================================================ */

/* ---------- MARCO: la sección ocupa la pantalla, scrollea el hijo ---------- */
/* SIN `background`. El fondo animado de la web (.fondo-neural, el shader
   WebGL) está fijo detrás de todo con z-index:var(--z-fondo) y NUNCA se
   apaga. Si esta sección pinta un color sólido, lo TAPA y se pierde el
   efecto — que es justo lo que pasaba.
   Aquí solo se pone el color de texto. El fondo lo pone el canvas. */
.sec-quienes{
  position:fixed;
  inset:0;
  color:var(--fg);
  /* TRANSPARENCIA A PROPÓSITO — aquí está la clave del fondo animado.
     El canvas .fondo-neural vive dentro del <body>, y el body sí pinta
     --fondo. La PORTADA se ve con fondo animado porque no pinta nada
     encima: deja pasar el canvas. Esta sección hacía lo contrario.
     Igual que la portada: ni background, ni color de fondo, nada.
     `background:transparent` se pone explícito para que no lo herede. */
  background:transparent;
  /* El body es quien pinta el color de respaldo cuando no hay WebGL. */
}

.sec-quienes__scroll{
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  /* Sin esto, al llegar al final el gesto arrastra la página de atrás. */
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* ---------- QUE OCUPE TODO EL ESPACIO DISPONIBLE ----------
   Antes: `bottom: var(--e-6)` = 72px FIJOS. Eso recortaba la sección 72px
   por abajo sin ninguna relación con lo que de verdad ocupa el pie, y en
   pantallas bajas se comía contenido.

   Ahora el recorte es el ALTO REAL del pie, medido por JS (js/quienes.js)
   y publicado como `--alto-pie`. Arriba no se recorta nada: la cabecera
   flota por encima y el contenido pasa por debajo al scrollear, que es
   como se comportan las otras secciones.

   `--alto-pie` arranca en 0 y se refina al medir: mientras tanto la
   sección ocupa TODA la pantalla, nunca menos. */
/* `.sec-quienes` lleva TAMBIÉN la clase `.seccion` (la pone el HTML), y
   `.seccion` en css/03-layout.css mete `padding-block: var(--margen-seccion)`
   = 48px arriba + 48px abajo. Como esta sección es `position:fixed; inset:0`,
   ese padding se come 96px por dentro: el scroller quedaba en 723px de los
   819 disponibles y la barra de scroll no llegaba ni arriba ni al pie.
   Aquí se anula: la sección ya trae su propio aire en la cabecera. */
.sec-quienes{
  bottom: var(--alto-pie, 0px);
  padding: 0;
}

/* ============================================================
   A PARTIR DE AQUÍ: EL CSS ORIGINAL, SIN TOCAR
   ============================================================ */





/* `padding:0` FUERA: es un reset global que pisa el padding de la portada
   compartida (trampa #8). Solo box-sizing y margin, como manda el contrato. */
*,*::before,*::after{box-sizing:border-box;margin:0}



/* html{} y body{} DEL ORIGINAL — ELIMINADOS.
   Eran GLOBALES y pisaban los de sysnetia: metían overflow-x:hidden y una
   transición de fondo en el body de TODA la web, no solo en esta sección.
   Una sección no debe tocar el body. */

.sans{font-family:var(--fuente-texto)}

.marca,.etq.marca{font-family:var(--fuente-logo);
  letter-spacing:-.01em}
  /* .mf-sys / .mf-netia se ELIMINARON: eran la marca del original, ahora
     se usa .marca + .marca__b (§3.0). Además --naranja no existe en la
     paleta de sysnetia (es --acento). */
.etq{font-family:var(--fuente-texto);
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  font-weight:700;color:var(--acento)}

.quien-portada{min-height:auto;position:relative;display:flex;flex-direction:column;
  justify-content:flex-start;
  /* padding-TOP fuera: lo manda `--aire-cabecera` desde 06por-portada.css.
     Aqui habia un literal duplicado clamp(80px,10vw,140px) que hacia que
     cada seccion que no lo copiara (Contacto) midiera distinto. */
  padding-inline:clamp(22px,6vw,90px);padding-bottom:70px}

/* ELIMINADO A PETICIÓN DE OZ (2026-10-23): «quienes somos creo que tambien
   tiene uno». Tenía el mismo ::before que Clientes, en versión más suave
   (62% y 38% en vez de 96% y 88%): un radial-gradient de --fondo que oscurecía
   la cabecera y apagaba el isotipo de fondo del sitio.

   Medido antes de quitarlo: afectaba a 206.031 píxeles (16% de la pantalla) y
   el centro pasaba de (12,16,21) a (20,21,25) al retirarlo — el isotipo
   recupera visibilidad.

   Al contrario que en Clientes, aquí NO sobraba la regla siguiente: la línea de
   arriba de este mismo archivo ya avisa de que Quiénes Somos va «SIN
   background», así que el gradiente era una excepción sin declarar. */

.quien-portada > *{position:relative;z-index:var(--z-contenido)}
.quien-portada > *{position:relative;z-index:var(--z-contenido)}

/* El capnum vive en css/06por-portada.css (.portada-sec .capnum). */

.quien-portada .meta{display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(24px,4vw,44px)}
.quien-portada .meta .rule{flex:1;height:1px;background:var(--borde);max-width:120px}

.quien-portada h1{font-size:clamp(2.9rem,10.5vw,8.2rem);font-weight:400;line-height:.92;
  letter-spacing:-.045em;max-width:15ch}
.quien-portada h1 .b{font-style:normal;color:var(--acento)}
.quien-portada .dek{margin-top:clamp(26px,3.5vw,42px);max-width:44ch;
  font-size:clamp(1rem,1.75vw,1.42rem);line-height:1.5;color:var(--mut);
  font-family:var(--fuente-texto);font-weight:400}
.quien-portada .dek b{color:var(--fg);font-weight:600}

.ficha{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,64px);margin-top:clamp(44px,6vw,76px);
  padding-top:26px;border-top:1px solid var(--borde);
  font-family:var(--fuente-texto)}
.ficha div .k{display:block;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mut);font-weight:700;margin-bottom:7px}
.ficha div .v{font-size:clamp(1rem,1.6vw,1.32rem);font-weight:600;letter-spacing:-.02em}

.historia{
  /* padding-top REDUCIDO: la portada ya pone --aire-ficha (70px) debajo de la
     ficha, y aqui habia ademas clamp(70px,11vw,150px). El ojo sumaba los dos:
     medido, 154px entre la ficha y el primer texto de "LA HISTORIA", cuando el
     hueco declarado era 70. Ahora el total lo manda --aire-ficha y este bloque
     solo aporta el aire lateral y el de abajo. */
  padding:0 clamp(22px,6vw,90px) clamp(70px,11vw,150px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);
  gap:clamp(24px,5vw,80px);max-width:1400px;margin:0 auto;align-items:start}
.historia .lado{position:sticky;top:clamp(30px,8vh,90px)}
.historia .lado .n{font-size:clamp(2.4rem,5vw,4rem);line-height:1;
  color:var(--acento);font-weight:400;letter-spacing:-.04em;display:block;margin-bottom:14px}
.historia .lado .etq{display:block;margin-bottom:0}
.historia .cuerpo{position:relative;z-index:var(--z-contenido);
  /* FONDO DEL TEXTO: era negro fijo (rgba(10,14,20,...)), que en tema claro
   dejaba un bloque oscuro fuera de sitio. Ahora es el fondo del sitio con
   un velo suave, así responde al tema y se sigue leyendo. */
  /* Velos del 55/35%: dejan PASAR el fondo animado. Antes eran del 92/74%
     y lo tapaban casi por completo (era el "fondo oscuro" que se veía). */
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--fondo) 55%, transparent),
    color-mix(in srgb, var(--fondo) 30%, transparent));
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  padding:clamp(18px,2.6vw,34px);border-radius:6px;
  margin-left:calc(clamp(18px,2.6vw,34px) * -1);margin-right:calc(clamp(18px,2.6vw,34px) * -1)}
/* En claro ya no hace falta regla aparte: el gradiente de arriba usa
   --fondo, que es claro en tema claro. Se deja solo el refuerzo. */
[data-tema="claro"] .historia .cuerpo{background:linear-gradient(90deg,
  color-mix(in srgb, var(--fondo) 58%, transparent),
  color-mix(in srgb, var(--fondo) 32%, transparent))}
.historia .cuerpo p{font-size:clamp(1.06rem,1.7vw,1.42rem);line-height:1.62;
  margin-bottom:1.35em;max-width:58ch}
/* CAMBIO DE NOMBRE: recuadro con la evolucion de la marca (mismo lenguaje que
   .remate: filete de acento a la izquierda, sin caja nueva). */
.historia .cuerpo .evolucion{
  margin:0 0 2em; padding:clamp(16px,2.2vw,24px) 0 clamp(16px,2.2vw,24px) clamp(18px,2.6vw,26px);
  border-left:2px solid var(--borde);
}
.historia .cuerpo .evolucion .etq{display:block;margin-bottom:.7em}
.historia .cuerpo .evolucion p{margin-bottom:.9em}
.historia .cuerpo .evolucion p:last-child{margin-bottom:0}
.historia .cuerpo .evolucion .viejo{color:var(--mut);font-weight:400}
.historia .cuerpo .evolucion .marca{white-space:nowrap}
.historia .cuerpo p.primero::first-letter{float:left;font-size:4.6em;line-height:.78;
  padding:.06em .12em 0 0;color:var(--acento);font-weight:400}
.historia .cuerpo p.primero{font-size:clamp(1.12rem,1.85vw,1.5rem)}
.historia .cuerpo .remate{font-style:normal;color:var(--mut);
  border-left:2px solid var(--acento);padding-left:22px;margin-top:2.2em;
  font-size:clamp(.98rem,1.4vw,1.16rem);line-height:1.6;max-width:52ch}

.historia .cuerpo .retrato{float:right;width:clamp(170px,26%,260px);
  margin:.2em 0 1.1em clamp(18px,2.6vw,30px);
  shape-outside:margin-box}
.historia .cuerpo .retrato img,
.historia .cuerpo .retrato .retrato-cv{width:100%;height:auto;display:block;
  border-radius:4px;filter:saturate(.94) contrast(1.02)}
.historia .cuerpo .retrato .retrato-cv{
  -webkit-user-select:none;user-select:none;
  -webkit-user-drag:none;-webkit-touch-callout:none;
  pointer-events:auto;cursor:default}
.historia .cuerpo .retrato{position:relative}
/* el pie lleva fondo propio: la franja de luz naranja del fondo de la seccion
   cruzaba por encima del nombre y lo dejaba ilegible. Con fondo solido y
   z-index por encima del ::after del borde, el nombre siempre se lee. */
.historia .cuerpo .retrato figcaption{background:transparent;position:relative;z-index:var(--z-contenido)}
.historia .cuerpo .retrato::after{content:"";position:absolute;inset:0;
  border:1px solid var(--borde);border-radius:4px;pointer-events:none;
  bottom:auto;height:100%;z-index:var(--z-contenido)}
.historia .cuerpo .retrato figcaption{margin-top:8px;padding:8px 0;
  border-top:1px solid var(--borde);text-align:center;line-height:1;
  font-family:var(--fuente-texto)}
.historia .cuerpo .retrato figcaption .nombre-dir{font-size:.86rem;color:var(--fg);
  letter-spacing:.04em;display:block;line-height:1;
  font-family:var(--fuente-texto);font-weight:600}

.sangre{position:relative;width:100%;height:clamp(340px,72vh,720px);overflow:hidden;
  /* Era #05070a fijo (negro azulado). Ahora el color de superficie del
   tema: en claro no queda un hueco negro detrás de la imagen. */
  background:transparent}
.sangre img{width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;transform:scale(1.02)}
.sangre .capa{position:absolute;inset:0;
  /* VELO SOBRE LA FOTO: era negro fijo en los tres tramos. Se cambia por un
   velo derivado del fondo, para que el texto se lea igual en los dos temas
   sin imponer un negro que no es de la marca. */
  /* La foto manda en el centro (12%: se ve casi entera), y arriba/abajo el
     velo sube para que el texto se lea. Antes el tramo inferior era del 88%
     y tapaba la foto con una banda negra: era el "fondo oscuro" de abajo. */
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--fondo) 48%, transparent) 0%,
    color-mix(in srgb, var(--fondo) 12%, transparent) 38%,
    color-mix(in srgb, var(--fondo) 62%, transparent) 100%)}
.sangre .texto{position:absolute;bottom:0;left:0;right:0;z-index:var(--z-contenido);
  padding:0 clamp(22px,6vw,90px) clamp(34px,5vw,60px);
  max-width:1400px;margin:0 auto}
.sangre .texto .etq{margin-bottom:16px;display:block}
.sangre blockquote{font-size:clamp(1.5rem,3.8vw,3.1rem);line-height:1.12;
  /* Sobre la FOTO el titulo va en el color de tinta del tema. Estaba fijo
   en #F5F7FA y en tema claro se perdia sobre el velo claro. */
  letter-spacing:-.03em;color:var(--fg);max-width:22ch;font-weight:400}
.sangre blockquote em{font-style:normal;color:var(--acento)}
.sangre .cred{margin-top:20px;font-family:var(--fuente-texto);font-size:.66rem;
  /* Era rgba(245,247,250,.62): un LITERAL de blanco translucido, el ultimo que
     quedaba con contrapartida funcional: sobre el velo claro el credito se
     perdia. --mut ya existe para esto (gris-400 en oscuro / gris-600 en claro,
     los dos calibrados AA) y es el mismo token que usa la entradilla. */
  letter-spacing:.2em;text-transform:uppercase;color:var(--mut);font-weight:600}

.pilares{padding:clamp(70px,11vw,150px) clamp(22px,6vw,90px);
  max-width:1400px;margin:0 auto}
.pilares .cab{display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:24px;margin-bottom:clamp(40px,6vw,68px);
  padding-bottom:22px;border-bottom:1px solid var(--borde)}
.pilares .cab h2{font-size:clamp(1.9rem,4.6vw,3.5rem);font-weight:400;
  line-height:1.02;letter-spacing:-.038em;max-width:20ch}
.pilares .cab h2 em{font-style:normal;color:var(--acento)}
.pilares .cab .nota{font-family:var(--fuente-texto);font-size:.78rem;color:var(--mut);
  max-width:32ch;line-height:1.6}

.pilar{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(16px,3.4vw,52px);align-items:start;
  padding:clamp(26px,4vw,46px) 0;border-bottom:1px solid var(--borde);
  transition:padding-left .4s cubic-bezier(.4,0,.2,1)}
.pilar:hover{padding-left:clamp(6px,1.5vw,20px)}
.pilar .n{font-family:var(--fuente-texto);font-size:.72rem;font-weight:700;
  letter-spacing:.18em;color:var(--acento);padding-top:.55em}
.pilar h3{font-size:clamp(1.32rem,2.6vw,2.1rem);font-weight:400;line-height:1.1;
  letter-spacing:-.03em}
.pilar p{font-size:clamp(.92rem,1.3vw,1.06rem);line-height:1.64;color:var(--mut);
  font-family:var(--fuente-texto);max-width:52ch}

/* Sin fondo opaco: dejaba un parche que cortaba el shader.
   Se usa un velo suave que deja pasar el fondo animado. */
.criterio{background:color-mix(in srgb, var(--superficie-2) 62%, transparent);padding:clamp(70px,11vw,150px) clamp(22px,6vw,90px)}
.criterio .env{max-width:1400px;margin:0 auto}
.criterio .etq{display:block;margin-bottom:18px}
.criterio h2{font-size:clamp(1.8rem,4.4vw,3.3rem);font-weight:400;line-height:1.05;
  letter-spacing:-.035em;max-width:24ch;margin-bottom:clamp(40px,6vw,64px)}
.criterio h2 em{font-style:normal;color:var(--acento)}
.criterio .grid{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--borde)}
.criterio .item{padding:clamp(26px,4vw,42px) clamp(18px,3vw,38px) clamp(26px,4vw,42px) 0;
  border-bottom:1px solid var(--borde)}
.criterio .item:nth-child(even){border-left:1px solid var(--borde);
  padding-left:clamp(18px,3vw,38px)}
.criterio .item .n{font-family:var(--fuente-texto);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;color:var(--acento);display:block;margin-bottom:16px}
.criterio .item blockquote{font-size:clamp(1.06rem,1.85vw,1.52rem);line-height:1.3;
  letter-spacing:-.02em;margin-bottom:16px}
.criterio .item p{font-family:var(--fuente-texto);font-size:.88rem;line-height:1.66;
  color:var(--mut);max-width:44ch}

.cierre{padding:clamp(80px,13vw,180px) clamp(22px,6vw,90px);
  max-width:1400px;margin:0 auto;text-align:center}
.cierre .capnum2{font-size:clamp(2.6rem,7vw,5rem);color:var(--acento);font-weight:400;
  letter-spacing:-.05em;line-height:1;margin-bottom:clamp(24px,4vw,40px)}
.cierre h2{font-size:clamp(1.8rem,4.8vw,3.6rem);font-weight:400;line-height:1.06;
  letter-spacing:-.038em;max-width:19ch;margin:0 auto 24px}
.cierre h2 em{font-style:normal;color:var(--acento)}
.cierre p{font-family:var(--fuente-texto);font-size:clamp(.9rem,1.3vw,1.06rem);
  line-height:1.66;color:var(--mut);max-width:46ch;margin:0 auto clamp(32px,5vw,48px)}
.cierre .btn{display:inline-block;padding:17px 46px;border-radius:100px;
  background:var(--acento);color:var(--boton-fg);border:none;cursor:pointer;
  font-family:var(--fuente-texto);font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s;
  box-shadow:0 14px 40px rgba(var(--acento-rgb),.3)}
/* En claro el boton ya usa --boton-fg; se mantiene por si el tema lo cambia. */
html[data-tema="claro"] .cierre .btn{color:var(--boton-fg)}
.cierre .btn:hover{transform:translateY(-3px);box-shadow:0 20px 54px rgba(var(--acento-rgb),.46)}

@media(max-width:860px){
  .historia{grid-template-columns:1fr;gap:26px}
  .historia .lado{position:static}
  .historia .cuerpo .retrato{float:none;width:min(100%,360px);
    margin:24px auto 28px}
  .pilar{grid-template-columns:auto minmax(0,1fr);gap:14px 18px}
  .pilar p{grid-column:2;margin-top:2px}
  .criterio .grid{grid-template-columns:1fr}
  .criterio .item:nth-child(even){border-left:none;padding-left:0}
  /* El capnum en tablet lo gobierna css/06por-portada.css. */
}
@media(max-width:520px){
  .quien-portada h1{font-size:clamp(2.5rem,12vw,3.6rem)}
  /* PORTADA EN TELEFONO: la portada es 100svh con justify-content:center y
     padding superior de clamp(80px,10vw,140px). En un movil eso dejaba ~25%
     de pantalla vacia arriba antes del logo. Se reduce el aire superior y se
     deja que el contenido respire abajo. */
  /* pt = --aire-cabecera. Con clamp(48px,9vw,72px) en 390px daba 35px, menos
     que la cabecera (57px): la ceja quedaba DEBAJO de la barra. */
  .quien-portada{padding-bottom:52px;
    justify-content:flex-start;
  /* `gap` FUERA: en una columna flex separa FILAS y sumaba 14px a la
     separacion ceja→titulo. La separacion es el margin-bottom de la ceja,
     una sola medida (trampa #4). */
  row-gap:0}
  /* FICHAS (Trayectoria / Sectores / Enfoque): en 3 columnas quedaban
     apretadas. Pasan a UNA columna con el valor a la derecha, que se lee
     mejor y no obliga a mirar de lado. */
  .ficha{display:grid;grid-template-columns:1fr;gap:0;
    margin-top:clamp(28px,6vw,40px);padding-top:20px}
  .ficha div{display:flex;justify-content:space-between;align-items:baseline;
    gap:16px;padding:14px 0;border-bottom:1px solid var(--borde)}
  .ficha div:last-child{border-bottom:none}
  .ficha div .k{margin-bottom:0;font-size:.66rem}
  .ficha div .v{font-size:1.06rem;text-align:right}
  .sangre{height:clamp(300px,58vh,460px)}
  /* la imagen sangra 4px por lado (transform scale 1.02 + width 100%): se
     recorta el padre para que no genere scroll horizontal */
  .sangre{overflow:hidden}
}

/* PANTALLAS MUY BAJAS (320x568 y similares): el contenido de la portada
   (493px) + padding no cabia en 568 (medido: 623px de alto). Se aprieta el
   aire y la ficha para que la portada quepa en una pantalla. */
@media(max-width:520px) and (max-height:640px){
  .quien-portada{padding-top:34px;padding-bottom:34px;gap:10px}
  .ficha{margin-top:22px;padding-top:14px}
  .ficha div{padding:10px 0}
  .quien-portada h1{font-size:clamp(2.1rem,11vw,2.9rem)}
  .dek{font-size:.95rem}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .pilar:hover{padding-left:0}
  .cierre .btn:hover{transform:none}
}