/**
 * Empresa — el manifiesto del porqué.
 *
 * No es un "quiénes somos" ni un resumen ilustrado del producto: no hay
 * fundadores, ni línea de tiempo, ni features. Hay un argumento en tres
 * movimientos —el titular, por qué existe Sylar y cuál es el principio— y
 * escenas que dicen la TESIS, no el catálogo. Lo que el producto hace vive en
 * Producto; lo que el control garantiza, en Seguridad. Acá solo el porqué.
 *
 * Por eso la tipografía pesa más acá que en Producto o Soluciones: los dos
 * párrafos centrales no son bajadas explicativas, son las afirmaciones de la
 * página, y se componen a tamaño de afirmación. El vocabulario de las escenas
 * es el mismo de siempre (`escenas.css`); acá viven solo las composiciones.
 *
 * Cada escena es abstracta a propósito, y por eso ninguna va sola: debajo de
 * cada una hay una línea que la aterriza —qué significa eso en una empresa
 * real—. La abstracción dice la tesis; la línea la cobra.
 */

/* --- 1 · Portada ----------------------------------------------------------
   El titular va solo: sin bajada y sin acción. La página entera desemboca en
   un único CTA al final, y meterle uno acá arriba lo debilitaría —además de
   competir con un h1 de 92 px, que es el argumento. */

.hoja-portada-cuerpo { padding-top: clamp(20px, 3.5vh, 48px); }

/* El aire que la portada no tiene por defecto: sin bajada ni botones, el
   titular quedaría apoyado contra el canto de la escena. */
.emp-hero-escena { min-height: 560px; margin-top: clamp(40px, 6vh, 76px); }
.emp-red--angosto { display: none; }

/* Los puntos sueltos: elementos individuales, todavía sin oficio ni relación.
   Tres son más marcados porque son los que después van a quedar dentro de la
   estructura; el resto se queda enlazado de a dos, que es exactamente lo que
   pasa cuando las herramientas se integran de a pares y nadie las coordina. */
.emp-punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--violet-soft);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .08);
  translate: -50% -50%;
}

.emp-punto--fuerte {
  width: 13px;
  height: 13px;
  background: var(--violet);
  box-shadow: 0 0 0 6px rgba(124, 58, 237, .09);
}

/* Los nodos: el disco no es adorno, es lo que tapa la llegada de las siete
   líneas que convergen. Terminar cada línea en el borde exacto de una cara
   —que mide distinto según el ancho del lienzo— es la clase de cálculo que se
   descalibra solo; un disco opaco de 100 px lo resuelve para siempre. */
.emp-nodo {
  display: grid;
  place-items: center;
  width: 100px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--brillo-canto), 0 20px 48px rgba(76, 29, 149, .1);
  translate: -50% -50%;
}

.emp-nodo .cara { --cara: 54px; }

/* Cada pieza se ancla por su centro y el `viewBox` de 640×540 lee ese mismo
   porcentaje: 27 % → x 173, 63 % → y 340. Una posición de acá tiene su línea
   allá; se mueven juntas o no se mueve ninguna. */
.emp-punto-1 { left: 9%; top: 22%; }
.emp-punto-2 { left: 20%; top: 41%; }
.emp-punto-3 { left: 33%; top: 13%; }
.emp-punto-4 { left: 44%; top: 76%; }
.emp-punto-5 { left: 61%; top: 55%; }
.emp-punto-6 { left: 68%; top: 12%; }
.emp-punto-7 { left: 88%; top: 29%; }
.emp-punto-8 { left: 91%; top: 74%; }

.emp-nodo-1 { left: 27%; top: 63%; }
.emp-nodo-2 { left: 51%; top: 28%; }
.emp-nodo-3 { left: 76%; top: 62%; }

/* --- La línea que aterriza -------------------------------------------------
   El puente entre la abstracción y una empresa real. Vive fuera de la figura
   —no como `figcaption`— porque el `role="img"` vuelve presentacional todo lo
   que la figura contiene, y esta línea es contenido, no leyenda. */

.emp-aterriza {
  max-width: 62ch;
  margin: clamp(20px, 2.8vh, 30px) 0 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
  text-wrap: pretty;
}

.emp-aterriza a {
  color: var(--violet-deep);
  font-weight: 620;
  text-decoration: underline;
  text-decoration-color: rgba(124, 58, 237, .35);
  text-underline-offset: 3px;
}

/* --- Las dos afirmaciones -------------------------------------------------
   `.hoja-intro > p:last-child` compone bajadas de 17 px, y estas dos no son
   bajadas: son lo que la página viene a decir. Suben de tamaño y bajan de
   medida, que es como se compone una afirmación y no una explicación. */

.hoja-intro p.emp-tesis {
  max-width: 40ch;
  margin: clamp(26px, 3.4vh, 40px) 0 0;
  color: var(--muted-strong);
  font-size: clamp(21px, 2.3vw, 32px);
  font-weight: 460;
  letter-spacing: -.026em;
  line-height: 1.36;
  text-wrap: pretty;
}

.emp-tesis em { color: var(--tinta); font-style: normal; font-weight: 560; }

/* El principio es la frase más importante de la página después del titular, y
   se compone como tal: casi tan grande como un h2 y con la mitad que importa
   en violeta. El `<em>` acá no es énfasis tipográfico, es señalización. */
.hoja-intro p.emp-principio {
  max-width: 24ch;
  margin: clamp(26px, 3.4vh, 40px) 0 0;
  color: var(--tinta);
  font-size: clamp(24px, 3.1vw, 44px);
  font-weight: 600;
  letter-spacing: -.036em;
  line-height: 1.18;
  text-wrap: balance;
}

.emp-principio em { color: var(--violet); font-style: normal; }

/* --- El rótulo de un contorno ---------------------------------------------
   La pastilla se sienta a caballo del borde superior, como la leyenda de un
   marco. Es lo que permite nombrar un contorno sin meterle un título adentro,
   que le robaría el centro a lo que el contorno contiene. */

.emp-rotulo {
  position: absolute;
  left: clamp(16px, 2.4%, 30px);
  top: 0;
  translate: 0 -50%;
  padding: 5px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel-suave);
  color: var(--rotulo);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.emp-rotulo--limite { border-color: rgba(124, 58, 237, .28); color: var(--violet-deep); }

/* --- 2 · Por qué existe Sylar ---------------------------------------------
   Dos recorridos y nada más: el de responder —una pregunta que llega a una
   respuesta y ahí muere— y el de trabajar —un objetivo que atraviesa pasos
   hasta quedar hecho—. La diferencia de largo ES el argumento, así que el
   vacío a la derecha de "Respuesta" no es un hueco por llenar: es la mitad
   del lienzo que el software que solo responde nunca recorre.

   Una sola red para todos los anchos: las dos líneas son horizontales y una
   horizontal sobrevive cualquier estirón del `viewBox`. Las piezas guardan
   los mismos porcentajes en todos los tamaños por la misma razón. */

.emp-contraste { min-height: 440px; }

/* Los nombres de los recorridos son las dos palabras del titular: por eso se
   componen como rótulo y no como chip —no son piezas de la escena, son la
   tesis señalando cuál mitad es cuál. El de abajo va en violeta porque
   trabajar es a donde apunta todo. */
.emp-via {
  margin: 0;
  left: 4.5%;
  color: var(--rotulo);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.emp-via-responder { top: 18%; }
.emp-via-trabajar { top: 52%; color: var(--violet-deep); }

/* Centros en porcentaje, líneas en el mismo porcentaje del `viewBox` 640×440:
   15 % → x 96, 32 % → y 141, 66 % → y 290. */
.emp-contraste .esc-chip,
.emp-hito,
.emp-obrero { translate: -50% -50%; }

.emp-pregunta { left: 15%; top: 32%; }
.emp-respuesta { left: 36%; top: 32%; }
.emp-objetivo { left: 15%; top: 66%; }

/* Los pasos del recorrido largo: el mismo punto discreto de la constelación,
   porque un paso de trabajo real no necesita nombre para contar —alcanza con
   que el pulso los cruce uno por uno. */
.emp-hito {
  top: 66%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--violet-soft);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .08);
}

.emp-hito-1 { left: 29%; }
.emp-hito-2 { left: 40%; }
.emp-hito-3 { left: 63%; }
.emp-hito-4 { left: 72%; }

/* El agente va sentado sobre la línea, a mitad del recorrido: el rostro es
   opaco y tapa el tramo que cruza, que es más barato que cortar la línea. */
.emp-obrero { --cara: 56px; left: 51.5%; top: 66%; }

/* "Hecho" en verde: el color de listo en todo el sistema. Extiende el patrón
   de `esc-chip--accion`/`--dato` a un tercer estado en vez de inventar otro. */
.emp-hecho {
  left: 85%;
  top: 66%;
  border-color: rgba(4, 120, 87, .3);
  background: rgba(4, 120, 87, .08);
  color: #047857;
}

.emp-hecho i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #047857;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, .12);
}

/* --- 3 · Nuestro principio ------------------------------------------------
   Tres cosas y ninguna más: quién decide, quiénes trabajan y hasta dónde
   pueden llegar. La persona está **afuera** del límite y el trabajo entra
   desde ella. Sin hilos de vuelta ni etiquetas de producto: qué garantiza el
   control es asunto de Seguridad, y acá basta el principio. */

.emp-principio-escena { min-height: 440px; }

.emp-humano {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 150px;
  left: 13%;
  top: 50%;
  translate: -50% -50%;
  text-align: center;
}

/* El disco de la persona no lleva el rostro de Sylar: el símbolo es de los
   agentes, y confundir a quien decide con lo que ejecuta es justo el error que
   esta sección viene a evitar. */
.emp-humano-disco {
  display: grid;
  place-items: center;
  width: 96px;
  aspect-ratio: 1;
  border: 1px solid rgba(124, 58, 237, .24);
  border-radius: 50%;
  background: var(--panel);
  box-shadow: var(--brillo-canto), 0 20px 48px rgba(76, 29, 149, .12);
  color: var(--violet-deep);
}

.emp-humano > span:last-child {
  color: var(--tinta-suave);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

/* El límite: borde punteado y un tinte apenas perceptible. Punteado porque un
   límite no es una pared —se ve a través de él, y ese "verse a través" es la
   escena entera: lo contrario de una caja negra—. El tinte al 2,8 % para que
   las conexiones de adentro se sigan leyendo enteras por debajo. */
.emp-limites {
  z-index: 1;
  left: 32%;
  right: 6%;
  top: 20%;
  bottom: 20%;
  border: 1px dashed rgba(124, 58, 237, .28);
  border-radius: var(--radio-lg);
  background: rgba(124, 58, 237, .028);
}

.emp-ag { --cara: 56px; top: 50%; translate: -50% -50%; }
.emp-ag-1 { left: 45%; }
.emp-ag-2 { left: 63%; }
.emp-ag-3 { left: 81%; }

/* --- 4 · Cierre -----------------------------------------------------------
   La salvedad honesta no compite con el título: es letra chica deliberada,
   porque decir que somos nuevos en cuerpo 40 sería otra forma de presumirlo.
   La solvencia va al lado y con la misma sobriedad: un lugar y tres
   principios, sin logos ni cifras que no existen. */

.hoja-cierre .hoja > p {
  max-width: 60ch;
  margin: clamp(22px, 3vh, 30px) auto 0;
  color: var(--muted);
  font-size: clamp(16px, 1.3vw, 18.5px);
  line-height: 1.72;
  text-wrap: pretty;
}

/* Dos párrafos seguidos son la misma salvedad: el segundo no vuelve a tomar
   distancia del primero. */
.hoja-cierre .hoja > p + p { margin-top: 14px; }

/* Los principios como pastillas y no como lista: son sellos de cómo se
   construye, no ítems por leer en orden. */
.emp-principios {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: clamp(20px, 2.8vh, 28px) auto 0;
  padding: 0;
  list-style: none;
}

.emp-principios li {
  padding: 8px 16px;
  border: 1px solid rgba(124, 58, 237, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  color: var(--tinta-suave);
  font-size: 13px;
  font-weight: 600;
}

/* --- Escalas --------------------------------------------------------------
   A 1000 px las escenas **conservan su composición** y solo se ajustan las
   piezas: todo está en porcentajes. Lo que no aguanta es el ancho de
   teléfono, y ahí la constelación y el principio se recomponen de verdad
   —con una segunda red cada una, porque las fracciones de un lienzo apaisado
   no describen uno alto—. El contraste no: sus líneas horizontales siguen
   siendo horizontales a cualquier ancho y solo achica sus piezas. */

@media (max-width: 1000px) {
  .emp-nodo { width: 88px; }
  .emp-nodo .cara { --cara: 46px; }

  .emp-obrero { --cara: 48px; }

  .emp-humano { width: 128px; }
  .emp-humano-disco { width: 82px; }
  .emp-ag { --cara: 46px; }
}

@media (max-width: 760px) {
  .emp-red--ancho { display: none; }
  .emp-red--angosto { display: block; }

  /* La constelación deja de ser apaisada: los puntos se van a los cuatro
     cantos y la estructura final queda como un triángulo alto en el medio. */
  .emp-hero-escena { min-height: 620px; }
  .emp-nodo { width: 84px; }
  .emp-nodo .cara { --cara: 44px; }

  .emp-punto-1 { left: 13%; top: 7%; }
  .emp-punto-2 { left: 45%; top: 12%; }
  .emp-punto-3 { left: 86%; top: 8%; }
  .emp-punto-4 { left: 7%; top: 36%; }
  .emp-punto-5 { left: 93%; top: 36%; }
  .emp-punto-6 { left: 20%; top: 88%; }
  .emp-punto-7 { left: 50%; top: 93%; }
  .emp-punto-8 { left: 80%; top: 88%; }

  .emp-nodo-1 { left: 25%; top: 56%; }
  .emp-nodo-2 { left: 50%; top: 22%; }
  .emp-nodo-3 { left: 75%; top: 56%; }

  /* Los dos recorridos no se recomponen: solo achican sus piezas para que
     "Pregunta" no toque el canto izquierdo ni "Hecho" el derecho. Los centros
     no se mueven —moverlos desincronizaría la única red de la escena. */
  .emp-contraste { min-height: 400px; }
  .emp-contraste .esc-chip { min-height: 30px; padding: 0 11px; font-size: 11.5px; }
  .emp-via { font-size: 10px; }
  .emp-via-responder { top: 20%; }
  .emp-via-trabajar { top: 54%; }
  .emp-obrero { --cara: 44px; }

  /* La persona pasa de estar al costado a estar arriba: sigue afuera del
     límite y sigue siendo el origen, que es lo único que la escena afirma. */
  .emp-principio-escena { min-height: 500px; }
  .emp-humano { left: 50%; top: 13%; width: 150px; }
  .emp-limites { left: 8%; right: 8%; top: 30%; bottom: 18%; }
  .emp-ag { --cara: 44px; }
  .emp-ag-1 { left: 22%; }
  .emp-ag-2 { left: 50%; }
  .emp-ag-3 { left: 78%; }
}