/**
 * Producto — el cómo de Sylar, contado en cuatro escenas.
 *
 * El vocabulario común de las escenas vive en `escenas.css`, que esta página
 * comparte con Soluciones. Acá quedan solo las composiciones: dónde se para
 * cada pieza en el hero, el tablero de misión, los anillos y el cierre.
 */

/* --- 1 · Hero: la orquestación ---------------------------------------------
   La única escena del hero. Cuenta el agente que basta y el equipo que hace
   falta en un solo cuadro, así que no hay una segunda escena que lo compare. */

.producto-hero-escena { min-height: 560px; }

.orq-solicitud { left: 5%; top: 8%; width: min(56%, 268px); }
.orq-principal { left: 50%; top: 46%; translate: -50% -50%; }
.orq-principal .cara { --cara: 92px; }
.orq-principal span { color: var(--tinta); font-weight: 640; font-size: 13px; }
.orq-esp-1 { left: 8%; top: 62%; }
.orq-esp-2 { left: 45%; bottom: 6%; translate: -50% 0; }
.orq-esp-3 { right: 7%; top: 58%; }
.orq-entrega { right: 5%; top: 12%; width: min(48%, 226px); }
.orq-entrega .esc-estado { margin-top: 10px; }

/* --- 2 · Misiones: el tablero ----------------------------------------------
   Tres objetivos arriba; el elegido, desplegado en tareas. El tablero cuelga
   del flujo normal —no de porcentajes— porque es una tabla de verdad: si el
   texto envuelve distinto, las tarjetas se acomodan solas. */

.mision { min-height: 560px; padding: clamp(26px, 3vw, 44px); }

.mision-objetivos { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; }

.mision-cabecera { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(26px, 3.4vh, 42px); }
.mision-titulo b { display: block; font-size: clamp(17px, 1.6vw, 21px); font-weight: 650; letter-spacing: -.02em; }
.mision-titulo small { color: var(--rotulo); font-size: 10.5px; font-weight: 720; letter-spacing: .14em; text-transform: uppercase; }
.mision-carriles { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(46px, 6vh, 74px); }
.mision-carril { display: grid; align-content: start; gap: 12px; padding: 18px 16px; border: 1px solid var(--line-soft); border-radius: 20px; background: rgba(255, 255, 255, .78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.mision-carril .esc-agente .cara { --cara: 44px; }
.mision-carril .esc-agente { justify-items: start; }
.mision-carril b { font-size: 13.5px; font-weight: 640; }
.mision-carril p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.mision-entrega { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: clamp(30px, 4vh, 46px); }

/* --- 3 · Qué recibe un agente: anillos -------------------------------------
   Tres capas de trabajo: conocimiento, herramientas y conexiones. Las capas
   de gobierno no están acá a propósito: son de Seguridad. Los chips chicos en
   cian son lo que hay del otro lado de las conexiones. */

.anillos { position: relative; min-height: 560px; display: grid; place-items: center; }
.anillo { position: absolute; border: 1px solid rgba(124, 58, 237, .16); border-radius: 50%; }
.anillo--1 { width: min(52%, 300px); aspect-ratio: 1; }
.anillo--2 { width: min(78%, 460px); aspect-ratio: 1; border-color: rgba(124, 58, 237, .1); }
.anillo--3 { width: min(98%, 600px); aspect-ratio: 1; border-color: rgba(8, 145, 178, .12); border-style: dashed; }
.anillos-nucleo { position: relative; z-index: 3; display: grid; justify-items: center; gap: 10px; }
.anillos-nucleo .cara { --cara: 84px; }
.anillos-nucleo b { font-size: 14px; font-weight: 650; }
.anillos-nucleo small { color: var(--muted); font-size: 12px; }
.anillos .esc-chip { position: absolute; z-index: 3; }
.cap-conocimiento { left: 7%; top: 32%; }
.cap-herramientas { right: 7%; top: 32%; }
.cap-conexiones { left: 50%; top: 4%; translate: -50% 0; }
.cap-mini { min-height: 30px; padding: 0 11px; font-size: 11.5px; }
.cap-clientes { left: 17%; bottom: 13%; }
.cap-calendario { left: 50%; bottom: 4%; translate: -50% 0; }
.cap-inventario { right: 17%; bottom: 13%; }

/* La frase-puente hacia Integraciones: cierra la sección nombrando lo que la
   escena acaba de mostrar. */
.producto-nexo { max-width: 630px; margin: clamp(28px, 4vh, 44px) 0 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.producto-nexo .text-link { min-height: 0; padding: 0; font-size: inherit; }

/* --- 4 · El registro, en una frase -----------------------------------------
   Una declaración y el puente a Seguridad. Menos relleno vertical que una
   sección plena: es una bisagra entre secciones, no un capítulo. */

.producto-traza { padding-block: clamp(20px, 5vh, 56px); }

.producto-puente {
  max-width: 760px;
  margin: 0 auto;
  color: var(--tinta-suave);
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 620;
  letter-spacing: -.03em;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

.producto-puente .text-link { min-height: 0; padding: 0; color: var(--violet-deep); font-size: inherit; font-weight: inherit; }

/* --- 5 · Cierre: la página en miniatura ------------------------------------
   Entra un objetivo y se forma el equipo. Es el resumen de todo lo anterior
   dibujado con el vocabulario de siempre, justo antes de la puerta a
   Mission Control. */

.cierre-escena { position: relative; width: min(100%, 560px); min-height: 236px; margin: 4px auto clamp(30px, 4vh, 44px); }
.cierre-objetivo { left: 50%; top: 12%; translate: -50% 0; }
.cierre-escena .esc-agente .cara { --cara: 48px; }
.cierre-a1 { left: 11%; bottom: 13%; }
.cierre-a2 { left: 50%; bottom: 9%; translate: -50% 0; }
.cierre-a3 { right: 11%; bottom: 13%; }

/* --- Escalas ---------------------------------------------------------------
   En pantalla angosta las escenas **se recomponen**, no se recortan: los
   carriles de la misión se vuelven filas con su descripción completa, y los
   anillos acercan sus chips sin soltar ninguno. */

@media (max-width: 1000px) {
  .mision-carriles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .esc { border-radius: 26px; }
  .producto-hero-escena { min-height: 470px; }
  .orq-solicitud { width: min(72%, 240px); }
  .orq-entrega { width: min(62%, 200px); top: auto; bottom: 5%; right: 4%; }
  .orq-principal .cara { --cara: 74px; }
  .orq-esp-2 { display: none; }

  /* La tarjeta de carril se vuelve fila: la cara a la izquierda, el texto a la
     derecha. Misma información, otra forma; antes la descripción se ocultaba
     y el tablero perdía la mitad de su historia en un teléfono. */
  .mision { min-height: 0; }
  .mision-carriles { grid-template-columns: 1fr; gap: 10px; }
  .mision-carril { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px; }
  .mision-carril .esc-agente { grid-row: span 3; }
  .mision-carril p { font-size: 12.5px; }

  .anillos { min-height: 460px; }
  .anillos-nucleo .cara { --cara: 64px; }
  .anillos .esc-chip { font-size: 11px; min-height: 30px; padding: 0 10px; }
  .anillos .cap-mini { font-size: 10.5px; min-height: 26px; padding: 0 8px; }
  .cap-clientes { left: 4%; }
  .cap-inventario { right: 4%; }

  .cierre-escena { min-height: 210px; }
}