/* Estilos de la página «Cómo trabajamos» (11/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 la lámina).
   Índice: 1 Diagrama de carriles · 2 Secciones de texto · 3 Listas entre filetes · 4 A nombre de quién está cada cosa
   5 Apertura · 6 Reducir movimiento. */

/* ---------- 1 · Diagrama de carriles: qué haces tú y qué hacemos nosotros ----------
   Móvil y tableta: los pasos uno debajo de otro; en cada paso, lo nuestro (algo a la izquierda) y lo tuyo (algo a la
   derecha), unidos por una flecha que baja; al final, «Y vuelta a empezar».
   Desde 1120 px, el diagrama: el nombre de cada carril en vertical; los pasos en columnas, con lo nuestro en el carril
   de arriba y lo tuyo en el de abajo; entre pasos, la flecha sube al siguiente; abajo, la vuelta en azul */
.carriles-tarjeta { margin-top: 40px; }
.carriles-lienzo { padding: 20px 16px; }
.carriles-entradilla { margin-top: 8px; max-width: 60ch; font-size: 16px; color: var(--texto-2); }
.carriles { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 46rem; margin-top: 8px; --bajada: 32px; }
.carril-fondo, .carril-nombre, .carril-salto, .vuelta-inicio, .vuelta-fin { display: none; }
.carril-paso { display: flex; align-items: baseline; gap: 10px; margin-top: 24px; font: 700 20px/1.2 var(--letra-titulo); letter-spacing: -0.015em; }
.carril-numero { font: 700 22px/1 var(--letra-titulo); font-variant-numeric: tabular-nums; color: var(--enlace); }
.carril-caja {
  position: relative; margin: 12px 0 0; padding: 14px 16px;
  border: 1px solid var(--linea); border-radius: 12px; background: var(--blanco);
  font-size: 16px; line-height: 1.5;
}
.caja-sia { margin-right: 24px; }
.caja-tu { margin-top: var(--bajada); margin-left: 24px; }
/* La flecha de nosotros a ti: baja por el centro común de las dos cajas (las cajas están desplazadas 24 px) */
.caja-sia::after { content: ""; position: absolute; left: calc(50% + 12px); top: 100%; height: var(--bajada); border-left: 1.5px solid var(--tinta); }
.caja-tu::before {
  content: ""; position: absolute; left: calc(50% - 12px); top: -10px; width: 9px; height: 9px;
  border-right: 1.5px solid var(--tinta); border-bottom: 1.5px solid var(--tinta); translate: -50% 0; rotate: 45deg;
}
/* La vuelta, en el móvil: su icono (Lucide) y el rótulo, que es la frase de cierre (en marino) */
.vuelta-medio { display: flex; align-items: center; gap: 10px; margin-top: 24px; font: 600 19px/1.35 var(--letra-titulo); letter-spacing: -0.01em; color: var(--marino); }
/* Dentro de la tarjeta blanca, el enlace y el foco vuelven a los del fondo blanco */
.sobre-marino .carriles-lienzo a:not(.boton) { color: var(--enlace); }
.sobre-marino .carriles-lienzo :focus-visible { outline-color: var(--enlace); }
.carriles-lienzo ::selection { background: var(--marino); color: var(--blanco); }
.vuelta-icono { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--trayectoria); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carriles-pie { display: grid; gap: 8px 24px; justify-items: start; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linea); }
@media (min-width: 640px) {
  .carriles-lienzo { padding: 28px 24px; }
}
@media (min-width: 960px) {
  .carriles-tarjeta { margin-top: 56px; }
  .carriles-lienzo { padding: 32px 40px 28px; }
  .carriles-pie { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .carriles-pie .enlace-flecha { white-space: nowrap; }
}
@media (min-width: 1120px) {
  .carriles {
    max-width: none; margin-top: 28px; --bajada: 60px;
    grid-template-columns: 40px minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr) 12px;
    grid-template-rows: auto auto 36px auto auto;
  }
  /* Los carriles: bandas gris claro con el nombre en vertical, como en los diagramas de los ingenieros de procesos */
  .carril-fondo { display: block; grid-column: 1 / -1; border-radius: 12px; background: var(--gris-claro); }
  .carril-fondo-sia, .carril-nombre-sia { grid-row: 2; }
  .carril-fondo-tu, .carril-nombre-tu { grid-row: 4; }
  .carril-nombre {
    display: block; grid-column: 1; align-self: center; justify-self: center;
    writing-mode: vertical-rl; rotate: 180deg; font: 600 16px/1 var(--letra-titulo); letter-spacing: -0.01em;
  }
  .carril-paso { grid-row: 1; grid-column: var(--c); margin: 0 0 14px; }
  .carril-caja { grid-column: var(--c); margin: 12px 0; }
  .caja-sia { grid-row: 2; }
  .caja-tu { grid-row: 4; }
  .caja-sia::after { left: 50%; }
  .caja-tu::before { left: 50%; }

  /* Entre pasos: de lo tuyo (abajo, a la izquierda) sube a lo nuestro del paso siguiente (arriba, a la derecha).
     Tres trozos, uno por fila (subrejilla): arriba, la esquina y la punta; en medio, la subida; abajo, la salida */
  .carril-salto { display: grid; grid-row: 2 / 5; grid-column: var(--c); grid-template-rows: subgrid; }
  .carril-salto > span { position: relative; }
  .carril-salto > span::before { content: ""; position: absolute; }
  .carril-salto > span:nth-child(1)::before { left: 50%; right: 0; top: 50%; bottom: 0; border-top: 1.5px solid var(--tinta); border-left: 1.5px solid var(--tinta); }
  .carril-salto > span:nth-child(1)::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;
  }
  .carril-salto > span:nth-child(2)::before { left: 50%; top: 0; bottom: 0; border-left: 1.5px solid var(--tinta); }
  .carril-salto > span:nth-child(3)::before { left: 0; right: calc(50% - 1.5px); top: 0; bottom: 50%; border-right: 1.5px solid var(--tinta); border-bottom: 1.5px solid var(--tinta); }

  /* La vuelta: baja de lo tuyo del paso 4, corre hacia la izquierda por debajo y sube a lo tuyo del paso 1.
     En azul trayectoria, con su rótulo; empieza en el borde de la caja (12 px por encima de la fila) */
  .vuelta { position: relative; grid-row: 5; }
  .vuelta-fin { display: block; grid-column: 8; }
  .vuelta-fin::before { content: ""; position: absolute; left: 0; right: calc(50% - 1px); top: -12px; height: 36px; border-right: 2px solid var(--trayectoria); border-bottom: 2px solid var(--trayectoria); }
  .vuelta-medio { grid-column: 3 / 8; justify-content: center; margin: 0; padding-top: 34px; }
  .vuelta-medio::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: var(--trayectoria); transform-origin: right center; --trazar-desde: scaleX(0); }
  .vuelta-icono { display: none; }
  .vuelta-inicio { display: block; grid-column: 2; }
  .vuelta-inicio::before { content: ""; position: absolute; left: calc(50% - 1px); right: 0; top: -12px; height: 36px; border-left: 2px solid var(--trayectoria); border-bottom: 2px solid var(--trayectoria); }
  .vuelta-inicio::after {
    content: ""; position: absolute; left: 50%; top: -11px; width: 10px; height: 10px;
    border-left: 2px solid var(--trayectoria); border-top: 2px solid var(--trayectoria); translate: -50% 0; rotate: 45deg;
  }
}

/* ---------- 2 · Secciones de texto: el título a la izquierda y el texto a la derecha ---------- */
.cabeza-sola { margin-bottom: 0; }
.cabeza-texto { display: grid; gap: 16px; justify-items: start; }
.cabeza-texto .enlace-flecha { white-space: nowrap; }
@media (min-width: 960px) {
  .cabeza-sola { align-items: start; }
  .cabeza-seccion .cabeza-texto { grid-column: 8 / -1; }
}

/* ---------- 3 · Listas entre filetes: dónde van en esta página (la pieza está en el apartado 11 de servicios.css) ---------- */
.lista-cabeza { align-self: start; }
@media (min-width: 960px) {
  .lista-cabeza { grid-column: 1 / span 4; position: sticky; top: 32px; container-type: inline-size; }
  /* En la columna estrecha, el título encoge lo justo para que «Cómo es trabajar» (8 veces el tamaño de la letra) no se
     parta: «Cómo / es trabajar» quedaba cortado a mitad de frase */
  .lista-cabeza h2 { font-size: min(clamp(26px, calc(1rem + 2.4vw), 52px), calc(100cqi / 8.2)); }
  .reticula > .lista-filetes { grid-column: 6 / -1; }
  .reticula > .datos-lista { grid-column: 1 / span 6; }
}

/* ---------- 4 · A nombre de quién está cada cosa: una tabla, como el registro de titulares de un plano.
   «Tu empresa», en la pastilla marino de «Encaja»; nuestro usuario, en gris claro ---------- */
.titulares { width: 100%; border-collapse: collapse; }
.titulares caption { padding-bottom: 16px; text-align: left; }
.titulares th, .titulares td { padding: 12px 0; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--linea); }
/* Por debajo de 380 px «automatizaciones» no cabe junto a la pastilla: se parte con guion, como en «Servicios»,
   y la columna «Qué» se queda con el sitio que la pastilla no necesita */
@media (max-width: 379.98px) {
  .titulares th { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; overflow-wrap: anywhere; }
  .titulares tr > :first-child { width: 58%; }
}
.titulares thead th { padding-top: 0; border-bottom-color: var(--tinta); font: 600 16px/1.3 var(--letra-titulo); color: var(--texto-2); }
.titulares tbody th { padding-right: 16px; font: 600 17px/1.3 var(--letra-titulo); letter-spacing: -0.01em; }
.titulares tbody tr:last-child > * { border-bottom: 0; padding-bottom: 0; }
.titular-tuyo, .titular-permiso { display: inline-block; padding: 3px 10px; border-radius: var(--radio); font: 700 16px/1.3 var(--letra-texto); }
.titular-tuyo { background: var(--marino); color: var(--blanco); white-space: nowrap; }
.titular-permiso { background: var(--gris-claro); color: var(--tinta); }
@media (min-width: 960px) { .datos-lamina { grid-column: 8 / -1; padding: 36px 40px; } }

/* ---------- 5 · Apertura (solo si el sistema no pide reducir el movimiento) ----------
   La tarjeta sube (regla de servicios.css). Las cajas y los saltos aparecen en el orden del trabajo (--i) y, al final,
   la vuelta se dibuja de derecha a izquierda. El texto se ve entero desde el principio */
@media (prefers-reduced-motion: no-preference) {
  .carril-caja, .carril-salto { animation: aparecer 420ms var(--ease-out) backwards; animation-delay: calc(550ms + var(--i) * 130ms); }
  .vuelta-fin { animation: fundir 300ms ease 2000ms backwards; }
  .vuelta-medio::before { animation: trazar 650ms var(--ease-in-out) 2150ms backwards; }
  .vuelta-inicio { animation: fundir 300ms ease 2750ms backwards; }
}

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