/* Cuatro operaciones, una misma precisión material. */
#negocio .negocio__cabecera { margin-bottom: clamp(36px, 5vw, 64px); }
#negocio .titular { text-wrap: balance; }
/* Composición asimétrica: ancho y angosto se alternan por fila. */
#negocio .negocio__casos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
#negocio .negocio__caso:nth-child(4n+1), #negocio .negocio__caso:nth-child(4n) { grid-column: span 7; }
#negocio .negocio__caso:nth-child(4n+2), #negocio .negocio__caso:nth-child(4n+3) { grid-column: span 5; }
#negocio .negocio__caso { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--blanco-calido); border: 1px solid var(--hilo); border-radius: var(--radio-l); box-shadow: var(--sombra); transition: box-shadow .3s, border-color .3s; }
/* Fondo liso mientras carga; el respaldo dibujado solo aparece si la imagen falló. */
#negocio .negocio__visual { position: relative; isolation: isolate; aspect-ratio: 16 / 9; background: var(--blanco-calido); overflow: hidden; }
/* Dos píxeles de más por lado: el riel de la imagen llega al borde de la tarjeta. */
#negocio .negocio__visual img { position: absolute; z-index: 1; inset: 0; width: calc(100% + 4px); max-width: none; height: 100%; margin-inline: -2px; object-fit: cover; -webkit-mask-image: linear-gradient(#000 84%, transparent); mask-image: linear-gradient(#000 84%, transparent); }
#negocio .negocio__caso:nth-child(1) img { object-position: 0 62%; }
#negocio .negocio__caso:nth-child(4) img { object-position: 50% 86%; }
#negocio .negocio__flujo { position: absolute; inset: 0; display: none; width: 100%; height: 100%; }
#negocio .negocio__visual:has(img[hidden]) { background: var(--ivory); }
#negocio .negocio__visual:has(img[hidden]) .negocio__flujo { display: block; }
#negocio .negocio__arcos { stroke: var(--oro); stroke-width: .6; opacity: .16; }
#negocio .negocio__nodo { fill: var(--blanco-calido); stroke: var(--hilo); stroke-width: 1; }
#negocio .negocio__simbolo { width: var(--ico-l); height: var(--ico-l); color: var(--tinta); }
#negocio .negocio__riel { stroke: var(--oro); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .6; transition: opacity .5s; }
#negocio .negocio__pulso { stroke: var(--oro); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: .07 1; stroke-dashoffset: -1; }
#negocio .negocio__flecha { stroke: var(--oro); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#negocio .negocio__texto { flex: none; padding: 8px clamp(24px, 2.6vw, 36px) clamp(20px, 2vw, 28px); }
#negocio .negocio__texto h3 { margin: 0 0 8px; font-size: var(--t-h3); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
#negocio .negocio__texto p { max-width: 46ch; text-wrap: pretty; color: var(--texto-2); font-size: var(--t-desc, 1.0625rem); line-height: var(--lh-desc, 1.47); }
@media (hover: hover) {
  #negocio .negocio__caso:hover { box-shadow: 0 1px 2px rgba(12, 24, 48, .04), 0 22px 48px rgba(12, 24, 48, .09); border-color: rgba(185, 138, 50, .42); }
  #negocio .negocio__caso:hover .negocio__riel { opacity: 1; }
}
/* Las alturas iguales ponen los h3 de cada fila sobre la misma línea base. */
@media (min-width: 900px) {
  #negocio .negocio__visual { flex: none; aspect-ratio: auto; height: clamp(168px, 13.5vw, 196px); }
  #negocio .negocio__texto p { min-height: calc(2 * var(--lh-desc, 1.47) * 1em); }
}
@media (max-width: 899px) {
  #negocio .wrap { padding-inline: 16px; }
  #negocio .negocio__casos { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #negocio .negocio__caso:nth-child(n) { grid-column: auto; }
  #negocio .negocio__caso:nth-child(1) img, #negocio .negocio__caso:nth-child(4) img { object-position: 50% 50%; }
  #negocio .negocio__texto { padding: 4px 24px 28px; }
}