/* Estilos de la página «Quiénes somos» (14/10/2026). Se cargan después de estilos.css y servicios.css, y usan sus
   colores, medidas y piezas (de servicios.css, la cabecera del servicio, la ruta, la tarjeta blanca y las listas
   entre filetes; de estilos.css, la leyenda de los mapas y la tarjeta final).
   Índice: 1 Por qué existe (la tarjeta y su texto) · 2 El bucle de los errores · 3 Lo que traemos a tu empresa
   4 El método en una línea · 5 Llamada final · 6 Apertura · 7 Reducir movimiento. */

/* ---------- 1 · Por qué existe SIA Ingenieros: la tarjeta blanca bajo la cabecera ----------
   Móvil y tableta: el texto arriba y el diagrama debajo. Desde 960 px: el texto en las columnas 1 a 5 y el
   diagrama en las 6 a 12 (7 a 12 desde 1200 px) */
.porque { margin-top: 40px; }
.porque-lienzo { display: grid; gap: 28px; padding: 24px 16px 20px; }
.porque-texto { display: grid; gap: 16px; align-content: start; }
.porque-texto h2 { max-width: 16ch; }
.porque-texto p { max-width: 46ch; }
.porque-motivo { font-size: 19px; line-height: 1.5; }
.porque-lienzo ::selection { background: var(--marino); color: var(--blanco); }
@media (min-width: 640px) {
  .porque-lienzo { padding: 32px 24px 28px; }
}
@media (min-width: 960px) {
  .porque { margin-top: 56px; }
  .porque-lienzo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); align-items: start; padding: 48px 40px 40px; }
  .porque-texto { grid-column: 1 / span 5; gap: 20px; padding-top: 8px; }
  /* Hasta 1199 px el diagrama toma también la columna 6: si no, el camino principal mediría unos 110 px */
  .retrabajo { grid-column: 6 / -1; }
}
@media (min-width: 1200px) {
  .retrabajo { grid-column: 7 / -1; }
}

/* ---------- 2 · El bucle de los errores: un proceso manual cualquiera, como un diagrama de flujo ----------
   Sobre un panel gris claro, como las bandas de los carriles. Cuatro columnas: el camino principal (cajas, rombo y
   flechas de tinta que bajan), el hueco del «No», la caja «Se corrige» y una calle estrecha por donde sube el bucle.
   El bucle (naranja, el color de lo que hace perder horas) sale por la derecha de «Se corrige», sube por su calle y
   vuelve por arriba a «Se pasa al ordenador». Sus trozos van en una subrejilla, uno por celda, y caen en el centro
   de cada fila, que es el centro de las cajas: así el dibujo aguanta aunque el texto parta de línea */
.retrabajo { margin: 0; padding: 16px 12px; border-radius: 12px; background: var(--gris-claro); }
.retrabajo-titulo { margin-bottom: 16px; }
.retrabajo-pasos {
  --hueco-no: 32px; --ancho-corrige: 104px; --ancho-vuelta: 20px; --baja: 28px; --rombo-alto: 88px;
  list-style: none; display: grid; justify-content: center;
  grid-template-columns: minmax(0, 15rem) var(--hueco-no) var(--ancho-corrige) var(--ancho-vuelta);
  grid-template-rows: auto var(--baja) auto var(--baja) auto var(--baja) auto;
}
.retrabajo-pasos > li { position: relative; }
.retrabajo-1 { grid-area: 1 / 1; }
.retrabajo-baja-1 { grid-area: 2 / 1; }
.retrabajo-2 { grid-area: 3 / 1; }
.retrabajo-baja-2 { grid-area: 4 / 1; }
.retrabajo-decision { grid-area: 5 / 1; }
.retrabajo-no { grid-area: 5 / 2; }
.retrabajo-corrige { grid-area: 5 / 3; }
.retrabajo-baja-3 { grid-area: 6 / 1; }
.retrabajo-listo { grid-area: 7 / 1; }

/* Las cajas: blancas, de 12 px, con el nombre en la letra de los nodos de la portada */
.retrabajo-caja {
  align-self: center; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; background: var(--blanco);
  font: 600 16px/1.25 var(--letra-titulo); letter-spacing: -0.01em; text-align: center; text-wrap: balance; color: var(--tinta);
}
/* «Se corrige»: rayado naranja, como un corte de plano, con el nombre sobre una placa blanca para que se lea
   (la placa, con las esquinas de 10 px de las piezas pequeñas, como las etiquetas) */
.retrabajo-corrige { padding: 5px; border: 1.5px solid var(--naranja); background-color: var(--blanco); background-image: var(--rayado-naranja); }
.retrabajo-placa { display: block; padding: 4px 5px; border-radius: 10px; background: var(--blanco); }
.retrabajo-listo { border: 1.5px solid var(--tinta); }

/* El rombo de la decisión: un dibujo de tinta, del ancho del camino si no cabe entero */
.retrabajo-decision { display: grid; place-items: center; height: var(--rombo-alto); }
.retrabajo-rombo {
  position: absolute; left: 50%; top: 0; width: min(136px, 100%); height: 100%; translate: -50% 0;
  fill: var(--blanco); stroke: var(--tinta); stroke-width: 1.5; vector-effect: non-scaling-stroke; overflow: visible;
}
.retrabajo-decision span { position: relative; font: 600 16px/1.2 var(--letra-titulo); letter-spacing: -0.01em; white-space: nowrap; }

/* Las flechas de tinta que bajan por el camino principal (1,5 px, con punta de dos trazos de 9 px) */
.retrabajo-baja::before { content: ""; position: absolute; left: calc(50% - 0.75px); top: 0; bottom: 1px; border-left: 1.5px solid var(--tinta); }
.retrabajo-baja::after {
  content: ""; position: absolute; left: 50%; bottom: 1px; width: 9px; height: 9px;
  border-right: 1.5px solid var(--tinta); border-bottom: 1.5px solid var(--tinta); translate: -50% 0; rotate: 45deg;
}
/* «Sí», al lado de la flecha que baja del rombo; «No», encima de la que sale a la derecha */
.retrabajo-baja-3 span, .retrabajo-no span { position: absolute; font: 600 16px/1 var(--letra-titulo); color: var(--tinta); }
.retrabajo-baja-3 span { left: calc(50% + 10px); top: 50%; translate: 0 -50%; }

/* «No»: la línea sale del vértice derecho del rombo, cruza su hueco y entra en «Se corrige» */
.retrabajo-decision::after { content: ""; position: absolute; left: calc(50% + min(68px, 50%)); right: 0; top: 50%; border-top: 1.5px solid var(--tinta); }
.retrabajo-no::before { content: ""; position: absolute; left: 0; right: 1px; top: 50%; border-top: 1.5px solid var(--tinta); }
.retrabajo-no::after {
  content: ""; position: absolute; right: 1px; top: 50%; width: 9px; height: 9px;
  border-top: 1.5px solid var(--tinta); border-right: 1.5px solid var(--tinta); translate: 0 calc(-50% + 0.75px); rotate: 45deg;
}
.retrabajo-no span { left: 50%; bottom: calc(50% + 6px); translate: -50% 0; }

/* El bucle: naranja de 2 px con punta de 10 px, como la vuelta azul de «Cómo trabajamos» pero hacia atrás */
.retrabajo-bucle {
  grid-row: 3 / 6; grid-column: 2 / 5; pointer-events: none;
  display: grid; grid-template-rows: subgrid; grid-template-columns: subgrid;
}
.retrabajo-bucle > span { position: relative; }
.retrabajo-bucle > span::before { content: ""; position: absolute; }
.bucle-entra { grid-area: 1 / 1; }
.bucle-arriba { grid-area: 1 / 2; }
.bucle-esquina-arriba { grid-area: 1 / 3; }
.bucle-subida { grid-area: 2 / 3; }
.bucle-esquina-abajo { grid-area: 3 / 3; }
.bucle-entra::before, .bucle-arriba::before { left: 0; right: 0; top: calc(50% - 1px); border-top: 2px solid var(--naranja); }
.bucle-entra::before { left: 2px; }
.bucle-entra::after {
  content: ""; position: absolute; left: 2px; top: 50%; width: 10px; height: 10px;
  border-left: 2px solid var(--naranja); border-bottom: 2px solid var(--naranja); translate: 0 -50%; rotate: 45deg;
}
.bucle-esquina-arriba::before { left: 0; right: calc(50% - 1px); top: calc(50% - 1px); bottom: 0; border-top: 2px solid var(--naranja); border-right: 2px solid var(--naranja); }
.bucle-subida::before { left: calc(50% - 1px); top: 0; bottom: 0; border-left: 2px solid var(--naranja); }
.bucle-esquina-abajo::before { left: 0; right: calc(50% - 1px); top: 0; bottom: calc(50% - 1px); border-bottom: 2px solid var(--naranja); border-right: 2px solid var(--naranja); }

/* La leyenda: la muestra es un trozo del bucle */
.retrabajo-clave { margin-top: 20px; }
.clave-error { border-top: 2px solid var(--naranja); }

@media (min-width: 640px) {
  .retrabajo { padding: 20px 24px 24px; }
  .retrabajo-pasos { --hueco-no: 56px; --ancho-corrige: 132px; --ancho-vuelta: 28px; --baja: 32px; }
  .retrabajo-caja { padding: 12px 14px; }
  .retrabajo-corrige { padding: 6px; }
  .retrabajo-placa { padding: 6px 8px; }
}
@media (min-width: 960px) {
  .retrabajo { padding: 28px 32px 28px; }
  .retrabajo-titulo { margin-bottom: 24px; }
  .retrabajo-pasos { --hueco-no: 64px; --ancho-corrige: 140px; --baja: 36px; --rombo-alto: 96px; }
  .retrabajo-caja, .retrabajo-decision span { font-size: 17px; }
  .retrabajo-rombo { width: min(152px, 100%); }
  .retrabajo-decision::after { left: calc(50% + min(76px, 50%)); }
  .retrabajo-clave { margin-top: 24px; }
}

/* ---------- 3 · Lo que traemos a tu empresa: dos columnas de listas entre filetes ----------
   Desde 960 px, la experiencia en las columnas 1 a 6 y la formación en las 8 a 12. Las dos cabezas comparten fila
   (subrejilla) y se apoyan abajo, así que cada título queda pegado a su lista y las dos listas empiezan a la misma altura */
.traemos-titulo { margin-bottom: 32px; }
.traemos { gap: 48px var(--hueco); }
.traemos-cabeza h3 { max-width: 24ch; }
.traemos-entrada { margin-top: 12px; color: var(--texto-2); }
.traemos-columna .lista-filetes { margin-top: 20px; }
@media (min-width: 960px) {
  .traemos-titulo { margin-bottom: 48px; }
  .traemos { grid-template-rows: auto auto; row-gap: 0; }
  .traemos-columna { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .traemos-cabeza { align-self: end; }
  .traemos-experiencia { grid-column: 1 / span 6; }
  .traemos-formacion { grid-column: 8 / -1; }
  .traemos-cabeza h3 { font-size: 28px; line-height: 1.1; }
  .traemos-columna .lista-filetes { margin-top: 28px; }
}

/* ---------- 4 · El método en una línea: la frase de cierre en marino, con la vuelta azul de la mejora continua
   (el icono de volver de Lucide, como en «Cómo trabajamos») y el enlace debajo, alineado con el texto ---------- */
.metodo-linea .contenedor { display: grid; gap: 20px; justify-items: start; }
.metodo-frase {
  display: flex; align-items: flex-start; gap: 14px; max-width: 42ch;
  font: 600 clamp(22px, calc(1rem + 1.1vw), 30px)/1.3 var(--letra-titulo); letter-spacing: -0.015em; color: var(--marino);
}
.metodo-icono {
  flex: none; width: 28px; height: 28px; margin-top: 0.08em;
  fill: none; stroke: var(--trayectoria); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.metodo-linea .enlace-flecha { margin-left: 42px; }
@media (min-width: 960px) {
  .metodo-frase { gap: 18px; }
  .metodo-icono { width: 34px; height: 34px; }
  .metodo-linea .enlace-flecha { margin-left: 52px; }
}

/* ---------- 5 · Llamada final: la tarjeta marino con su entradilla y el botón, sin pasos ---------- */
.conocernos .empezar-entradilla { margin-bottom: 0; max-width: 52ch; }

/* ---------- 6 · Apertura (solo si el sistema no pide reducir el movimiento) ----------
   La tarjeta sube (regla de servicios.css). Las cajas aparecen en el orden del proceso; al decir «No», el bucle se
   dibuja de vuelta hasta «Se pasa al ordenador» y, al final, llega «Listo»: el error cuesta tiempo. Una vez y solo
   con CSS; el texto de la tarjeta se ve entero desde el principio */
@media (prefers-reduced-motion: no-preference) {
  .retrabajo-caja, .retrabajo-decision, .retrabajo-baja { animation: aparecer 420ms var(--ease-out) backwards; }
  .retrabajo-1 { animation-delay: 550ms; }
  .retrabajo-baja-1 { animation-delay: 680ms; }
  .retrabajo-2 { animation-delay: 800ms; }
  .retrabajo-baja-2 { animation-delay: 930ms; }
  .retrabajo-decision { animation-delay: 1050ms; }
  .retrabajo-decision::after, .retrabajo-no::before { --trazar-desde: scaleX(0); transform-origin: left center; animation: trazar 280ms var(--ease-out) 1350ms backwards; }
  .retrabajo-no::before { animation-delay: 1500ms; }
  .retrabajo-no::after, .retrabajo-no span { animation: fundir 200ms ease 1700ms backwards; }
  .retrabajo-corrige { animation-delay: 1750ms; }
  .bucle-esquina-abajo::before { animation: fundir 200ms ease 2150ms backwards; }
  .bucle-subida::before { --trazar-desde: scaleY(0); transform-origin: bottom center; animation: trazar 450ms var(--ease-in-out) 2250ms backwards; }
  .bucle-esquina-arriba::before { animation: fundir 200ms ease 2650ms backwards; }
  .bucle-arriba::before { --trazar-desde: scaleX(0); transform-origin: right center; animation: trazar 260ms linear 2800ms backwards; }
  .bucle-entra::before { --trazar-desde: scaleX(0); transform-origin: right center; animation: trazar 320ms var(--ease-out) 3050ms backwards; }
  .bucle-entra::after { animation: fundir 200ms ease 3300ms backwards; }
  .retrabajo-baja-3 { animation-delay: 3550ms; }
  .retrabajo-listo { animation-delay: 3700ms; }
}

/* ---------- 7 · Reducir movimiento: todo quieto y completo desde el principio (no hay nada más que quitar) ---------- */