/**
 * Soluciones — casos de negocio contados como misiones, y la casa de One Sylar.
 *
 * No es un catálogo de industrias ni una grilla de funciones: cada caso arranca
 * en su objetivo —resolver esta solicitud, publicar la campaña, convertir este
 * lead— y la escena muestra cómo se cumple. El vocabulario está en
 * `escenas.css`, el mismo que usa Producto; acá viven solo las composiciones.
 *
 * Cada caso se compone distinto a propósito. Cuatro casos con la misma
 * plantilla se leen como cuatro tarjetas, y una tarjeta no explica nada: el
 * hero es una tabla de conversión, el chat es un mundo partido en dos, la
 * campaña es una cinta que avanza, el lead es una ficha que se llena, las
 * misiones chicas son una constelación con aire y One Sylar es un flujo que
 * baja.
 */

/* --- 1 · Hero: cada problema, una misión ----------------------------------
   La escena convierte, literalmente: a la izquierda los asuntos como suenan en
   una operación, a la derecha la misión que los nombra, con su estado. El
   puente es un riel que se dibuja una vez. No hay argumento de uno contra
   equipo acá —eso vive en Producto—: solo el problema del visitante y cómo
   Sylar lo toma. */

/* `figure.` y no solo la clase: `paginas.css` pone `margin: 0` a toda figura
   de página con la misma especificidad, y este aire arriba se decide acá. */
figure.sol-hero-escena { margin-top: clamp(40px, 6vh, 64px); padding: clamp(26px, 3.4vw, 52px); }

/* La tabla se centra y se acota: un mapeo de tres filas no necesita 1500 px,
   y estirarlo separaría el riel de las piezas que dice unir. */
.hero-mapa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(44px, 110px) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(18px, 2.8vh, 28px) clamp(14px, 2.4vw, 34px);
  max-width: 1020px;
  margin-inline: auto;
}

.hero-rotulo {
  margin: 0;
  color: var(--rotulo);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* La columna del problema se alinea contra el puente, no contra el borde: el
   riel tiene que tocar la pieza de la que sale. */
.hero-rotulo--prob,
.hero-prob { justify-self: end; }

/* El problema todavía no es de nadie: borde punteado y tinta apagada, el mismo
   trato "en borrador" que las muestras de las misiones chicas. */
.hero-prob {
  min-height: 40px;
  padding-block: 7px;
  border-style: dashed;
  background: rgba(255, 255, 255, .55);
  color: var(--muted);
  text-align: right;
  white-space: normal;
}

.hero-puente { position: relative; align-self: stretch; }
.hero-puente .esc-riel { left: 0; right: 0; top: 50%; }

/* Los puentes se dibujan después de los tres problemas y antes de la primera
   misión: el retardo es el hueco del paso 4, que por eso ningún chip usa. */
.visto .hero-puente .esc-riel,
.visto .hero-puente .esc-riel i { animation-delay: .8s; }

.hero-mision { justify-self: start; min-width: min(100%, 240px); }
.hero-mision .esc-estado { margin-top: 8px; }

/* --- 2 · La solicitud: dos mundos ----------------------------------------
   Afuera, una conversación que cualquiera reconoce. Adentro, la misión que
   corre mientras. El límite entre los dos es una sola línea vertical: es lo
   que el cliente no ve, y no hace falta decirlo con un rótulo grande. */

.chat { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); min-height: 500px; }
.chat > div { position: relative; padding: clamp(24px, 3vw, 42px); }
/* La conversación se centra contra el alto del interior: si se apoyara arriba,
   el lado izquierdo quedaría medio vacío y el caso parecería desbalanceado. */
.chat-fuera { display: flex; flex-direction: column; justify-content: center; }
.chat-dentro { border-left: 1px solid var(--line-soft); background: rgba(124, 58, 237, .028); }
.chat-rotulo { margin: 0 0 22px; color: var(--rotulo); font-size: 10px; font-weight: 720; letter-spacing: .14em; text-transform: uppercase; }
.chat-dentro .chat-rotulo { color: var(--violet-deep); }

.chat-hilo { display: grid; gap: 14px; }
.chat-burbuja { max-width: 86%; padding: 15px 17px; border-radius: 20px; font-size: 13.5px; line-height: 1.55; }
.chat-burbuja--cliente { justify-self: end; border-bottom-right-radius: 6px; background: rgba(124, 58, 237, .1); color: var(--tinta-suave); }
.chat-burbuja--sylar { border: 1px solid var(--line-soft); border-bottom-left-radius: 6px; background: var(--panel); color: var(--tinta-suave); box-shadow: 0 12px 30px rgba(76, 29, 149, .07); }
.chat-quien { display: block; margin-bottom: 5px; color: var(--rotulo); font-size: 9.5px; font-weight: 720; letter-spacing: .12em; text-transform: uppercase; }
.chat-esperando { display: inline-flex; align-items: center; gap: 8px; color: var(--violet-deep); font-size: 12px; font-weight: 600; }
.chat-esperando i { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 5px rgba(124, 58, 237, .1); }

/* Centro anclado en porcentaje, `viewBox` 480×500 leyendo ese mismo
   porcentaje. 18 % → x 86, 68 % → y 340. */
.chat-principal,
.chat-esp { position: absolute; translate: -50% -50%; }
.chat-principal { left: 50%; top: 27%; }
.chat-principal .cara { --cara: 62px; }
.chat-esp { top: 68%; }
.chat-esp .cara { --cara: 40px; }
.chat-esp-1 { left: 18%; }
.chat-esp-2 { left: 50%; }
.chat-esp-3 { left: 82%; }

/* --- 3 · La campaña: una cinta que avanza --------------------------------
   Cinco oficios en fila sobre un riel continuo. No son cinco tarjetas: es un
   solo movimiento, y el riel es lo que lo dice. */

.brief { min-height: 430px; padding: clamp(26px, 3vw, 46px); }
.brief-entrada { position: relative; z-index: 2; max-width: 420px; }
.brief-entrada blockquote { margin: 12px 0 0; padding-left: 16px; border-left: 2px solid rgba(124, 58, 237, .35); color: var(--tinta); font-size: clamp(16px, 1.5vw, 19px); font-style: italic; line-height: 1.5; }
.brief-cinta { --hueco: clamp(10px, 1.2vw, 18px); position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--hueco); margin-top: clamp(44px, 6vh, 72px); }
/* El riel va del eje de la primera cara al de la última. Con cinco columnas
   iguales y cuatro huecos, ese eje está a media columna del borde; escribirlo
   con el mismo `--hueco` que la grilla es lo que evita que se desfase cuando
   el `clamp` cambia de valor. La altura: 46 px de cara por la proporción .88
   del símbolo son 20 px hasta el centro. */
.brief-cinta .esc-riel {
  left: calc((100% - 4 * var(--hueco)) / 10);
  right: calc((100% - 4 * var(--hueco)) / 10);
  top: 20px;
}
.brief-oficio { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; text-align: center; }
.brief-oficio .cara { --cara: 46px; }
.brief-oficio b { font-size: 13px; font-weight: 640; }
.brief-oficio small { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.brief-oficio--humano .esc-chip { margin-top: 2px; }
.brief-salida { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: clamp(28px, 4vh, 44px); }

/* --- 4 · El lead: una ficha que se llena ---------------------------------
   La misma ficha antes y después. Lo que cambia son las líneas: de dos datos
   sueltos a un contexto completo. La transformación **es** la misión. */

.opor { --aire: clamp(26px, 3vw, 46px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr); align-items: center; gap: clamp(20px, 3vw, 48px); min-height: 420px; padding: var(--aire); }
/* El hilo cruza la escena entera por el eje de las fichas. Las fichas son
   opacas y lo tapan: se ve solo en los dos huecos, que es donde la ficha
   efectivamente viaja. */
.opor .esc-riel { left: var(--aire); right: var(--aire); top: 50%; }
.opor-ficha { position: relative; z-index: 1; padding: 20px 22px; border: 1px solid var(--line-soft); border-radius: 20px; background: var(--panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 44px rgba(76, 29, 149, .08); }
.opor-ficha small { display: block; margin-bottom: 12px; color: var(--rotulo); font-size: 10px; font-weight: 720; letter-spacing: .14em; text-transform: uppercase; }
.opor-ficha dl { display: grid; gap: 12px; margin: 0; }
.opor-ficha dt { color: var(--rotulo); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.opor-ficha dd { margin: 4px 0 0; color: var(--tinta-suave); font-size: 13.5px; }
.opor-ficha dd.vacio { color: var(--rotulo); font-style: italic; }
.opor-ficha--lista { border-color: rgba(124, 58, 237, .22); }
.opor-medio { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; }
.opor-medio .esc-chip { white-space: nowrap; }

/* --- 5 · Misiones chicas -------------------------------------------------
   Una constelación con aire, no una grilla. Cada agente en su altura, y su
   muestra —lo que produce— ocupa el lugar desde el principio para que nada
   salte. */

.solos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 44px); }
.solo { display: grid; justify-items: start; gap: 12px; padding: clamp(20px, 2.2vw, 30px) 0; }
.solo:nth-child(2) { margin-top: clamp(24px, 4vh, 52px); }
.solo:nth-child(3) { margin-top: clamp(10px, 2vh, 26px); }
.solo:nth-child(4) { margin-top: clamp(36px, 6vh, 74px); }
.solo .cara { --cara: 54px; transition: transform var(--paso) var(--curva); }
.solo b { font-size: 15px; font-weight: 650; letter-spacing: -.02em; }
.solo p { margin: 0; max-width: 26ch; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* La muestra nace visible: es el resultado de la misión chica, no un premio
   del cursor. Antes descansaba al 55 % en todo ancho y en una tablet —sin
   hover que la despertara— quedaba a media luz para siempre. */
.solo-muestra {
  min-height: 52px;
  padding: 11px 13px;
  border: 1px solid rgba(124, 58, 237, .3);
  border-radius: 14px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  transition: opacity var(--paso) var(--curva), border-color var(--paso) var(--curva), background var(--paso) var(--curva);
}

/* Solo donde el cursor existe, la muestra descansa en borrador y se enciende
   al pasar por encima. En pantallas táctiles esta regla ni se aplica. */
@media (hover: hover) {
  .solo-muestra { opacity: .55; border: 1px dashed var(--line); background: rgba(255, 255, 255, .5); }
  .solo:hover .cara { transform: translateY(-3px); }
  .solo:hover .solo-muestra { opacity: 1; border-color: rgba(124, 58, 237, .3); border-style: solid; background: var(--panel); }
}

/* --- 6 · One Sylar: el flujo que baja ------------------------------------
   Un solo eje vertical: tu mensaje, el medallón que entiende, la capa que
   coordina y, colgando de un bus de datos, lo que consulta. Las piezas se
   anclan por su centro en porcentajes y el `viewBox` (640×600 estirado) lee
   esos mismos porcentajes, como en el resto del sitio. */

.osy { position: relative; width: min(100%, 980px); min-height: 600px; margin-inline: auto; }
.osy-red--angosto { display: none; }

.osy-msj,
.osy-sylar,
.osy-verbo,
.osy-co,
.osy-dato { translate: -50% -50%; }

/* El mensaje con la misma voz que las burbujas del chat: es la única pieza
   del flujo que escribe una persona. */
.osy-msj {
  left: 50%;
  top: 10%;
  width: min(340px, 84%);
  padding: 13px 17px;
  border-radius: 20px;
  border-bottom-right-radius: 6px;
  background: rgba(124, 58, 237, .1);
  color: var(--tinta-suave);
  font-size: 13.5px;
  line-height: 1.5;
}

.osy-sylar { left: 50%; top: 30%; display: grid; justify-items: center; gap: 4px; text-align: center; }
.osy-sylar b { font-size: 14.5px; font-weight: 650; letter-spacing: -.015em; }
.osy-sylar small { color: var(--muted); font-size: 12px; }

/* El medallón: el rostro en su disco de doble bisel, la pieza física del
   flujo. Todo lo demás son chips; el que decide tiene cuerpo. */
.osy-medallon {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  margin-bottom: 6px;
  border: 1px solid var(--marco-borde);
  border-radius: 50%;
  background: var(--marco);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 44px rgba(76, 29, 149, .14);
}

.osy-medallon .cara { --cara: 56px; }

/* Los verbos del flujo. Van sobre el eje central, con fondo pleno para que la
   línea pase por detrás y no los tache. */
.osy-verbo {
  margin: 0;
  padding: 4px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel);
  color: var(--rotulo);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.osy-verbo--co { left: 50%; top: 47%; }
.osy-verbo--dato { left: 50%; top: 73.5%; }

.osy-co { top: 55%; }
.osy-co-1 { left: 30%; }
.osy-co-2 { left: 50%; }
.osy-co-3 { left: 70%; }

.osy-dato { top: 82%; }
.osy-dato-1 { left: 20%; }
.osy-dato-2 { left: 40%; }
.osy-dato-3 { left: 60%; }
.osy-dato-4 { left: 80%; }

/* Los canales en una línea y afuera de la escena: se nombran, no se
   desarrollan. Su casa es Integraciones. */
.osy-canales { max-width: 980px; margin: 26px auto 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; text-align: center; }
.osy-canales .text-link { min-height: 0; padding-inline: 2px; }

/* --- 7 · Cierre: la historia entera en una línea -------------------------- */

.cierre-escena { display: grid; align-items: center; min-height: 260px; padding: clamp(24px, 3vw, 40px); }
.cierre-linea { --hueco: clamp(12px, 2vw, 30px); position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: var(--hueco); }
/* Los cuatro chips miden lo mismo de alto, así que su eje está siempre a la
   mitad de los 34 px del chip. Cuatro columnas, tres huecos. */
.cierre-linea .esc-riel {
  left: calc((100% - 3 * var(--hueco)) / 8);
  right: calc((100% - 3 * var(--hueco)) / 8);
  top: 17px;
}
.cierre-hito { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; text-align: center; }
.cierre-hito small { color: var(--muted); font-size: 11.5px; }
.cierre-cara { --cara: 17px; }

.cierre-acciones { justify-content: center; margin-top: clamp(36px, 5vh, 60px); }

/* --- Escalas --------------------------------------------------------------
   En pantalla angosta cada caso **se recompone**, no se apila sin más: el
   chat pone el interior debajo del hilo; la cinta de la campaña se vuelve una
   lista de filas con la cara a la izquierda; la constelación pierde el
   escalonado, que sin ancho no significa nada; One Sylar reordena sus datos
   en dos por dos y estrena su propia red; y la tabla del hero apila cada
   pareja problema–misión. */

@media (max-width: 1000px) {
  /* En cuanto la fila se parte en dos, el riel dejaría de unir lo que dice que
     une: uniría la primera mitad y mentiría sobre la segunda. Se retira. */
  .brief-cinta .esc-riel,
  .cierre-linea .esc-riel { display: none; }

  .brief-cinta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 14px; }
  .solos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cierre-linea { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
}

@media (max-width: 760px) {
  .chat { grid-template-columns: 1fr; min-height: 0; }
  .chat-dentro { border-left: 0; border-top: 1px solid var(--line-soft); min-height: 340px; }

  .brief-cinta { grid-template-columns: 1fr; gap: 4px; }
  .brief-oficio { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 4px 14px; text-align: left; }
  .brief-oficio .cara { grid-row: span 2; --cara: 40px; }

  /* Apiladas, las fichas ya no tienen un eje horizontal que cruzar. */
  .opor .esc-riel { display: none; }
  .opor { grid-template-columns: 1fr; gap: 22px; }
  .opor-medio { justify-items: start; }

  /* El escalonado necesita ancho para leerse; en una columna es solo espacio
     perdido. `:nth-child(n)` iguala la especificidad de los desniveles. */
  .solos { grid-template-columns: 1fr; gap: 4px; }
  .solo:nth-child(n) { margin-top: 0; padding-block: 22px; border-top: 1px solid var(--line-soft); }
  .solo:first-child { border-top: 0; }

  .cierre-linea { grid-template-columns: 1fr; gap: 18px; }
  .cierre-hito { justify-items: start; text-align: left; }
}

@media (max-width: 640px) {
  /* Cuatro datos en fila ya no caben: se recomponen en dos por dos, colgados
     de dos hebras que bajan del bus. Los porcentajes son otros y por eso
     entra la segunda red. */
  .osy-red--ancho { display: none; }
  .osy-red--angosto { display: block; }

  .osy { min-height: 640px; }
  .osy-msj { top: 8%; }
  .osy-sylar { top: 28%; }
  .osy-verbo--co { top: 43%; }
  .osy-co { top: 50%; }
  .osy-co-1 { left: 17%; }
  .osy-co-3 { left: 83%; }
  .osy-verbo--dato { top: 68%; }
  .osy-dato-1 { left: 30%; top: 74%; }
  .osy-dato-2 { left: 70%; top: 74%; }
  .osy-dato-3 { left: 30%; top: 87%; }
  .osy-dato-4 { left: 70%; top: 87%; }
}

@media (max-width: 560px) {
  /* La tabla del hero se apila por parejas: el problema arriba y su misión
     debajo. El puente horizontal ya no une nada y se retira; el contraste
     borrador–tarjeta sostiene el mapeo solo. */
  .hero-mapa { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hero-hueco,
  .hero-puente,
  .hero-rotulo--sylar { display: none; }
  .hero-rotulo--prob,
  .hero-prob { justify-self: start; }
  .hero-prob { margin-top: 16px; text-align: left; }
  .hero-mision { width: 100%; }
}