/* Estilos de las páginas de servicio (08/10/2026): «Procesos y automatización» y «Licitaciones públicas».
   Se cargan después de estilos.css y usan sus colores, medidas y piezas (mapas, «¿Te suena?», preguntas y tarjeta final).
   Índice: 1 Cabecera del servicio y ruta · 2 Lista de mejoras · 3 Pasos y láminas · 4 Lo que se puede automatizar
   5 Cuadro de mando · 6 Puente y preguntas · 7 Apertura · 8 Reducir movimiento
   9 Licitaciones públicas (concursos, pasos como un plano y certificados)
   10 Servicios (el ciclo de las dos áreas, sus miniaturas y cómo se paga)
   11 Listas entre filetes (las usan «Cómo trabajamos» y «Quiénes somos»). */

/* ---------- 1 · Cabecera del servicio: alineada a la izquierda, con la ruta encima ---------- */
.portada-servicio { padding-block: 4px 56px; }
.portada-servicio .portada-accion { justify-content: flex-start; }

/* La ruta (migas de pan): dónde estás dentro de la web. Las flechas son trazos, no letras, para que no se lean en voz alta */
.ruta ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-bottom: 12px; font-size: 16px; color: var(--texto-sobre-marino); }
.ruta li { display: flex; align-items: center; gap: 12px; }
.ruta li + li::before {
  content: ""; width: 7px; height: 7px; margin-right: 2px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg);
}
.ruta a { display: inline-flex; align-items: center; min-height: 44px; }
.ruta a:active { color: var(--texto-sobre-marino); }
@media (hover: hover) and (pointer: fine) { .ruta a:hover { text-decoration-thickness: 2.5px; } }
@media (min-width: 960px) { .portada-servicio { padding-block: 8px 88px; } .ruta ol { margin-bottom: 20px; } }

/* ---------- 2 · Lista de mejoras: el entregable del paso 1, en una tarjeta blanca sobre el marino ----------
   Móvil y tableta: cada fila apilada (nombre, «cómo» y las dos barras lado a lado, con su leyenda arriba).
   Desde 960 px: una tabla de cinco columnas con su cabecera. El número de cada fila sale del orden del HTML */
.mejoras { margin-top: 40px; }
.mejoras-lienzo { padding: 20px 16px 6px; border-radius: 20px; background: var(--blanco); color: var(--tinta); }
.mejoras-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-bottom: 16px; }
.mejoras-titulo { font: 700 20px/1.2 var(--letra-titulo); letter-spacing: -0.015em; }
.mejoras-ejemplo { font: 400 16px/1.2 var(--letra-texto); letter-spacing: 0; color: var(--texto-2); }
.mejoras figcaption { margin-top: 14px; max-width: 70ch; font-size: 16px; color: var(--texto-sobre-marino); }

/* Los botones para ordenar: solo con JavaScript, que es quien reordena */
.ordenar { display: none; }
.js .ordenar { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--linea); border-radius: 12px; background: var(--gris-claro); }
.ordenar-boton {
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px;
  background: transparent; color: var(--tinta); font: 700 16px/1.2 var(--letra-texto);
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.ordenar-boton[aria-pressed="true"] { background: var(--marino); color: var(--blanco); }
.ordenar-boton:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .ordenar-boton[aria-pressed="false"]:hover { background: var(--blanco); } }
@media (max-width: 639.98px) { .js .ordenar { width: 100%; } .ordenar-boton { flex: 1 1 auto; padding: 0 10px; } }

.mejoras-orden { margin: -4px 0 16px; font-size: 16px; color: var(--texto-2); }
.mejoras-clave { padding-bottom: 24px; }
.mejoras-columnas { display: none; }
.mejoras-lista { list-style: none; counter-reset: mejora; border-top: 1px solid var(--tinta); }
.mejora {
  counter-increment: mejora; position: relative;
  display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  grid-template-areas: "rango nombre nombre" "rango como como" "rango horas coste";
  gap: 8px 12px; padding: 16px 0; background: var(--blanco); border-bottom: 1px solid var(--linea);
}
.mejora:last-child { border-bottom: 0; }
.mejora::before {
  content: counter(mejora); grid-area: rango; align-self: start;
  font: 700 22px/1.1 var(--letra-titulo); font-variant-numeric: tabular-nums; color: var(--enlace);
}
.mejora-nombre { grid-area: nombre; font: 600 17px/1.3 var(--letra-titulo); letter-spacing: -0.01em; }
/* «Cómo»: automatizar (azul, lo que sale hecho) u ordenar el trabajo (gris, sin tocar ningún programa) */
.mejora-como {
  grid-area: como; justify-self: start; display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px;
  border-radius: 10px; background: var(--azul-suave); color: var(--enlace); font: 700 16px/1.2 var(--letra-texto);
}
.mejora-como.como-ordenar { background: var(--gris-claro); color: var(--tinta); }
.medida { display: block; }
.medida-horas { grid-area: horas; }
.medida-coste { grid-area: coste; }
.medida-pista {
  position: relative; display: block; height: 16px; border-left: 1px solid var(--tinta);
  background: repeating-linear-gradient(90deg, var(--linea) 0 1px, transparent 1px 10%);
}
.medida-barra { position: absolute; left: 0; top: 3px; height: 10px; width: calc(var(--v) * 100%); border: 1px solid; transform-origin: left center; }
.medida-horas .medida-barra { --v: var(--horas); border-color: var(--trayectoria); background: var(--rayado-azul); }
.medida-coste .medida-barra { --v: var(--coste); border-color: var(--tinta); background: var(--rayado-tinta); }

/* La pestaña marino de la primera fila dice por qué va primera: «Empezamos por aquí» (por horas) o «La más barata» (por coste) */
.mejora:first-child::after {
  content: "Empezamos por aquí"; position: absolute; right: 0; top: -13px;
  padding: 2px 10px; border-radius: 10px; background: var(--marino); color: var(--blanco);
  font: 700 16px/22px var(--letra-texto);
}
.mejoras[data-orden="coste"] .mejora:first-child::after { content: "La más barata"; }

@media (min-width: 960px) {
  .mejoras { margin-top: 56px; }
  .mejoras-lienzo { padding: 28px 40px 10px; }
  .mejoras-cabeza { padding-bottom: 20px; }
  .mejoras-titulo { font-size: 23px; }
  .mejoras-clave { display: none; }
  .mejoras-columnas, .mejora { grid-template-columns: 2rem minmax(0, 2.3fr) 10.5rem minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 24px; }
  .mejoras-columnas {
    display: grid; padding-bottom: 24px; border-bottom: 1px solid var(--tinta);
    font: 600 16px/1.2 var(--letra-titulo); color: var(--texto-2);
  }
  .mejoras-columnas .col-nombre { grid-column: 2; }
  .mejoras-lista { border-top: 0; }
  .mejora { grid-template-areas: "rango nombre como horas coste"; padding: 18px 0; }
  .mejora::before { align-self: center; }
  .mejora-nombre { font-size: 18px; }
  .mejora:first-child::after { right: auto; left: calc(2rem + 24px); top: -12px; }
  /* La columna que manda en el orden, marcada en su cabecera */
  .mejoras[data-orden="horas"] .col-horas, .mejoras[data-orden="coste"] .col-coste {
    color: var(--tinta); font-weight: 700; text-decoration: underline 2px var(--marino); text-underline-offset: 6px;
  }
}

/* ---------- 3 · Los tres pasos, sobre gris: el texto a la izquierda y su lámina (tarjeta blanca) a la derecha ---------- */
.paso-servicio + .paso-servicio { padding-top: 0; }
.paso-servicio-texto { display: grid; gap: 16px; justify-items: start; align-content: start; }
.paso-servicio-texto h2 { font-size: clamp(28px, calc(1rem + 1.7vw), 42px); line-height: 1.08; }
.paso-servicio-texto p, .paso-servicio-texto .incluye { max-width: 46ch; }
/* El número del paso: tiene orden de verdad, así que se numera (como el método de la portada) */
.paso-servicio-numero {
  display: block; margin-bottom: 14px;
  font: 700 44px/1 var(--letra-titulo); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--enlace);
}
.paso-servicio-texto .incluye-titulo { margin-top: 8px; font-family: var(--letra-texto); }
.paso-servicio-cierre { font: 600 19px/1.35 var(--letra-titulo); letter-spacing: -0.01em; color: var(--marino); }
.lamina { align-self: start; padding: 24px 20px; border: 1px solid var(--linea); border-radius: 20px; background: var(--blanco); }

.paso-servicio-notas { display: grid; gap: 16px; align-content: start; }
.paso-servicio-notas p { max-width: 52ch; }

/* Mapa del paso 1 · Dónde se van las horas de un trabajo: cada paso, una barra en dos partes (tiempo útil en marino y
   esperas y tareas que se repiten en rayado naranja) y, debajo, todo el trabajo junto con la cota de lo que se puede recuperar */
.horas-pasos { list-style: none; display: grid; gap: 18px; }
.horas-pasos li { display: grid; gap: 6px; }
.horas-paso { font: 600 17px/1.3 var(--letra-titulo); letter-spacing: -0.01em; }
.horas-barra { display: flex; gap: 2px; height: 16px; border-left: 1px solid var(--tinta); padding-left: 2px; }
.horas-util, .horas-perdidas { display: block; height: 100%; transform-origin: left center; transition: transform 700ms var(--ease-out); }
.horas-util { width: calc(var(--u) * 100%); background: var(--marino); }
.horas-perdidas { width: calc(var(--p) * 100%); border: 1px solid var(--naranja); background: var(--rayado-naranja); transition-delay: 350ms; }
.horas-nota { font-size: 16px; color: var(--texto-2); }
.horas-nota::before { content: ""; display: inline-block; width: 14px; height: 2px; margin-right: 8px; background: var(--naranja); vertical-align: middle; }
.horas-total { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--tinta); }
.horas-total .horas-barra { height: 22px; }
.horas-recuperable { justify-self: end; margin-top: 4px; font: 700 16px/1.2 var(--letra-texto); color: var(--tinta); }
.clave-util { border-color: var(--marino); background: var(--marino); }
.js .mapa-horas:not(.en-vista) .horas-util, .js .mapa-horas:not(.en-vista) .horas-perdidas { transform: scaleX(0); }
.horas-pasos li:nth-child(2) > .horas-barra > span { transition-delay: 80ms; }
.horas-pasos li:nth-child(3) > .horas-barra > span { transition-delay: 160ms; }
.horas-pasos li:nth-child(4) > .horas-barra > span { transition-delay: 240ms; }
.horas-pasos li:nth-child(5) > .horas-barra > span { transition-delay: 320ms; }
.horas-pasos li > .horas-barra > .horas-perdidas { transition-delay: 450ms; }
.horas-total .horas-util { transition-delay: 700ms; }
.horas-total .horas-perdidas { transition-delay: 1000ms; }

/* Cota de plano: una línea de medida con sus flechas y sus líneas de referencia, sin cifras. Aquí mide la parte
   naranja del total: lo que se puede recuperar */
.cota {
  position: relative; display: block; height: 16px;
  border-inline: 1px solid var(--tinta);
  background: linear-gradient(var(--tinta), var(--tinta)) center / 100% 1px no-repeat;
  transition: opacity 300ms ease 1500ms;
}
.cota::before, .cota::after { content: ""; position: absolute; top: 50%; translate: 0 -50%; border-block: 3.5px solid transparent; }
.cota::before { left: 0; border-right: 7px solid var(--tinta); }
.cota::after { right: 0; border-left: 7px solid var(--tinta); }
.cota-recuperable { width: calc(var(--p) * 100% - 2px); justify-self: end; }
.horas-recuperable { transition: opacity 300ms ease 1500ms; }
.js .mapa-horas:not(.en-vista) .cota, .js .mapa-horas:not(.en-vista) .horas-recuperable { opacity: 0; }

@media (min-width: 960px) {
  .paso-servicio-texto { grid-column: 1 / span 5; gap: 18px; }
  .paso-servicio .lamina { grid-column: 7 / -1; padding: 36px 40px; }
  /* Paso 2: el texto en dos columnas y su mapa a todo el ancho, para que las flechas y los nombres quepan en una línea */
  .paso-servicio-notas { grid-column: 7 / -1; align-self: end; }
  .paso-servicio .lamina.lamina-ancha { grid-column: 1 / -1; padding: 40px 56px; }
  /* En la lámina ancha, los papeles del mapa crecen y las flechas bajan a su mitad (112 px de alto) */
  .lamina-ancha .nodo-figura { height: 112px; }
  .lamina-ancha .nodo-dibujo { width: 80px; height: 112px; }
  .lamina-ancha .nodo-ancho .nodo-dibujo { width: 124px; height: 88px; }
  .lamina-ancha .conector { min-height: 112px; padding-top: 66px; }
  .lamina-ancha .conector::before { top: 56px; }
  .lamina-ancha .conector::after { top: 51px; }
  .paso-servicio-numero { font-size: 56px; margin-bottom: 18px; }
  .paso-servicio-cierre { font-size: 21px; }
}

/* ---------- 4 · Lo que se puede automatizar, como el despiece de un plano ----------
   Arriba, los seis papeles dibujados a buen tamaño, de pie sobre la misma línea, cada uno con su globo y su línea de
   referencia; debajo, la lista de piezas con el mismo número. Sin tarjetas ni iconos */
.automatizables-bloque { margin-top: 24px; }
.automatizables-titulo { margin-bottom: 20px; }
.despiece {
  --papel: var(--blanco); --trazo: var(--tinta); --trazo-suave: var(--gris-dibujo);
  --titulo: var(--tinta); --acento: var(--trayectoria); --banda: var(--gris-claro);
}
.despiece-dibujo {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 12px;
  padding-bottom: 24px; border-bottom: 1px solid var(--tinta);
}
.despiece-dibujo li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.despiece-dibujo .globo { margin-bottom: 18px; }
.despiece-dibujo .globo::after { content: ""; position: absolute; left: 50%; top: 100%; height: 18px; border-left: 1px solid var(--tinta); }
.pieza-dibujo { width: 100%; max-width: 76px; height: auto; aspect-ratio: 210 / 297; }
.pieza-dibujo.pieza-apaisada { max-width: 104px; aspect-ratio: 297 / 210; }
/* Globo de plano: círculo con el número, como los del cuadro de mando */
.globo {
  position: relative; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--tinta); background: var(--blanco); color: var(--tinta);
  font: 700 16px/1 var(--letra-titulo); font-variant-numeric: tabular-nums;
}
.despiece-lista { list-style: none; display: grid; gap: 0 var(--hueco); }
.despiece-lista li { display: flex; align-items: flex-start; gap: 14px; padding-block: 16px; border-bottom: 1px solid var(--linea); }
.despiece-lista li:last-child { border-bottom: 0; }
.despiece-lista p { max-width: 46ch; padding-top: 2px; }
.automatizables-ejemplo { margin-top: 24px; max-width: 72ch; }
@media (min-width: 640px) {
  .despiece-dibujo { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .despiece-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .despiece-lista li:nth-last-child(2) { border-bottom: 0; }
}
@media (min-width: 960px) {
  .automatizables-bloque { grid-column: 1 / -1; margin-top: 40px; }
  .automatizables-titulo { margin-bottom: 28px; }
  .despiece { padding: 48px 56px 24px; }
  .despiece-dibujo { gap: 24px; padding-bottom: 32px; }
  .pieza-dibujo { max-width: 124px; }
  .pieza-dibujo.pieza-apaisada { max-width: 168px; }
  .despiece-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .despiece-lista li { padding-block: 20px; }
  .despiece-lista li:nth-last-child(-n+3) { border-bottom: 0; }
}

/* ---------- 5 · Cuadro de mando de ejemplo: las horas a mano bajan en escalones; en azul, las recuperadas ----------
   Dos dibujos sobre la misma caja: la cuadrícula (quieta) y los datos, que se descubren de izquierda a derecha.
   Las marcas son globos de plano (círculo con número), colocadas en % de la caja */
.cuadro-grafico { position: relative; aspect-ratio: 3 / 2; margin-top: 4px; }
.cuadro-capa { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; overflow: visible; }
.cuadro-rejilla { fill: none; stroke: var(--linea); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cuadro-antes { fill: none; stroke: var(--tinta); stroke-width: 1.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.cuadro-eje { fill: none; stroke: var(--tinta); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cuadro-recuperadas { fill: rgba(47, 128, 237, 0.16); }
.cuadro-linea { fill: none; stroke: var(--naranja); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cuadro-datos { clip-path: inset(0 0 0 0); transition: clip-path 1500ms var(--ease-in-out); }
.js .cuadro:not(.en-vista) .cuadro-datos { clip-path: inset(0 100% 0 0); }
.cuadro-marca, .cuadro-paso-numero {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--tinta); background: var(--blanco); color: var(--tinta);
  font: 700 16px/1 var(--letra-titulo); font-variant-numeric: tabular-nums;
}
.cuadro-marca {
  position: absolute; left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); translate: -50% -50%;
  transition: opacity 250ms ease, scale 350ms var(--ease-out);
}
.marca-1 { --mx: 16.667; --my: 20; transition-delay: 250ms; }
.marca-2 { --mx: 33.333; --my: 60; transition-delay: 650ms; }
.marca-3 { --mx: 56.667; --my: 72.667; transition-delay: 1050ms; }
.js .cuadro:not(.en-vista) .cuadro-marca { opacity: 0; scale: 0.6; }
.cuadro-eje-x { position: absolute; right: 8px; bottom: 6px; font-size: 16px; color: var(--texto-2); }
.cuadro-pasos { list-style: none; display: grid; gap: 10px; }
.cuadro-pasos li { display: flex; align-items: center; gap: 12px; font: 600 17px/1.3 var(--letra-titulo); letter-spacing: -0.01em; }
.clave-horas { border-top: 3px solid var(--naranja); }
.clave-antes { border-top: 2px dashed var(--tinta); }
@media (min-width: 640px) { .cuadro-grafico { aspect-ratio: 2 / 1; } }

/* ---------- 6 · Puente a licitaciones y enlace de las preguntas ---------- */
.puente .servicios-cierre { margin-top: 0; }
.puente .enlace-flecha { white-space: nowrap; }
@media (min-width: 960px) { .puente .servicios-cierre .enlace-flecha { grid-column: 9 / -1; } }
.preguntas-cabeza p a { font-weight: 700; }

/* ---------- 7 · La apertura (solo si el sistema no pide reducir el movimiento) ----------
   El texto sale entero desde el primer momento. La tarjeta sube; las filas aparecen «como las encontramos»
   (cada una --desde filas más arriba o más abajo) y sus barras se miden; después se colocan en orden y,
   al final, salen los números y la pestaña «Empezamos por aquí». */
@media (prefers-reduced-motion: no-preference) {
  .mejoras-lienzo { animation: subir 700ms var(--ease-out) 150ms backwards; }
  .mejora { animation: fundir 380ms ease 350ms backwards, ordenar 950ms var(--ease-in-out) 1550ms backwards; }
  .mejora:nth-child(2) { animation-delay: 410ms, 1550ms; }
  .mejora:nth-child(3) { animation-delay: 470ms, 1550ms; }
  .mejora:nth-child(4) { animation-delay: 530ms, 1550ms; }
  .mejora:nth-child(5) { animation-delay: 590ms, 1550ms; }
  .mejora:nth-child(6) { animation-delay: 650ms, 1550ms; }
  .medida-barra { animation: medir 700ms var(--ease-out) 750ms backwards; }
  .medida-coste .medida-barra { animation-delay: 900ms; }
  .mejora::before { animation: fundir 300ms ease 2450ms backwards; }
  .mejora:first-child::after { animation: aparecer 360ms var(--ease-out) 2550ms backwards; }
  /* Al mover una fila en el HTML, el navegador repite su animación de entrada: tras ordenar con los botones
     se quita (el deslizamiento lo hace web.js) y la pestaña vuelve justo al acabar el movimiento */
  .mejoras.reordenada .mejora, .mejoras.reordenada .mejora::before, .mejoras.reordenada .medida-barra { animation: none; }
  .mejoras.reordenada .mejora:first-child::after { animation-delay: 600ms; }
}
@keyframes ordenar { from { translate: 0 calc(var(--desde) * 100%); } }
@keyframes medir { from { transform: scaleX(0); } }

/* ---------- 8 · Reducir movimiento: todo quieto y completo desde el principio ---------- */
@media (prefers-reduced-motion: reduce) {
  .ordenar-boton { transition: none; }
  .ordenar-boton:active { transform: none; }
  .cuadro-datos, .cuadro-marca { transition: none; }
  .horas-util, .horas-perdidas { transition: none; }
  .js .mapa-horas:not(.en-vista) .horas-util, .js .mapa-horas:not(.en-vista) .horas-perdidas { transform: none; }
  .cota, .horas-recuperable { transition-duration: 200ms; transition-delay: 0ms; }
  .js .cuadro:not(.en-vista) .cuadro-datos { clip-path: none; }
  .js .cuadro:not(.en-vista) .cuadro-marca { opacity: 1; scale: 1; }
}

/* ---------- 9 · Licitaciones públicas (08/10/2026) ----------
   9.1 Concursos que encajan contigo (la tarjeta de arriba; usa la carcasa de la lista de mejoras)
   9.2 Los cuatro pasos como un plano · 9.3 Línea de tiempo de los certificados · 9.4 Apertura y reducir movimiento */

/* 9.1 · Concursos: cada uno revisado contra su pliego. Móvil y tableta: nombre, las tres marcas con su nombre y la decisión.
   Desde 960 px: una tabla con cabecera; el nombre de cada marca pasa a la cabecera (sigue para el lector de pantalla) */
.concursos .concursos-clave { padding-bottom: 20px; }
.concursos-columnas { display: none; }
.concursos-lista { list-style: none; border-top: 1px solid var(--tinta); }
.concurso {
  display: grid; grid-template-columns: repeat(3, auto) 1fr; align-items: center; gap: 10px 16px;
  grid-template-areas: "nombre nombre nombre nombre" "solvencia certificados plazo ." "decision decision decision decision";
  padding: 16px 0; border-bottom: 1px solid var(--linea); background: var(--blanco);
}
.concurso[hidden] { display: none; }
.concurso:last-child { border-bottom: 0; }
/* Por debajo de 380 px las tres marcas no caben en una fila: el plazo baja a la siguiente */
@media (max-width: 379.98px) {
  .concurso {
    grid-template-columns: auto 1fr;
    grid-template-areas: "nombre nombre" "solvencia certificados" "plazo ." "decision decision";
  }
}
.concurso:nth-child(1) { --r: 1; }
.concurso:nth-child(2) { --r: 2; }
.concurso:nth-child(3) { --r: 3; }
.concurso:nth-child(4) { --r: 4; }
.concurso:nth-child(5) { --r: 5; }
.concurso-nombre { grid-area: nombre; font: 600 17px/1.3 var(--letra-titulo); letter-spacing: -0.01em; }
/* Lo que no encaja se tacha, como un concurso descartado en una lista de papel: así se ven de un vistazo los que encajan */
.concurso[data-encaja="no"] .concurso-nombre, .no-cumple .requisito-nombre {
  color: var(--texto-2); text-decoration: line-through 1.5px var(--texto-2);
}
.concurso > .requisito:nth-child(2) { grid-area: solvencia; }
.concurso > .requisito:nth-child(3) { grid-area: certificados; }
.concurso > .requisito:nth-child(4) { grid-area: plazo; }
.requisito { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; }
.requisito-icono, .requisito-marca {
  flex: none; display: block; width: 26px; height: 26px; padding: 5px; border-radius: 10px;
  fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.requisito-marca { padding: 0; display: grid; place-items: center; }
.requisito-marca .requisito-icono { width: 26px; height: 26px; }
/* Cumple: azul (lo que sale bien), como los compromisos. No cumple: tinta sobre gris, sin color */
.cumple .requisito-icono, .requisito-marca.cumple { background: var(--azul-suave); color: var(--enlace); }
.no-cumple .requisito-icono, .requisito-marca.no-cumple { background: var(--gris-claro); color: var(--tinta); }
.decision { grid-area: decision; justify-self: start; padding: 3px 10px; border-radius: 10px; font: 700 16px/1.3 var(--letra-texto); }
.decision-si { background: var(--marino); color: var(--blanco); }
.decision-no { background: var(--gris-claro); color: var(--tinta); }
@media (min-width: 960px) {
  .concursos .concursos-clave { display: flex; padding-bottom: 20px; }
  .concursos-columnas, .concurso { grid-template-columns: minmax(0, 2.4fr) repeat(3, 8rem) 10.5rem; column-gap: 24px; }
  .concursos-columnas {
    display: grid; padding-bottom: 12px; border-bottom: 1px solid var(--tinta);
    font: 600 16px/1.2 var(--letra-titulo); color: var(--texto-2);
  }
  .concursos-lista { border-top: 0; }
  .concurso { grid-template-areas: "nombre solvencia certificados plazo decision"; padding: 18px 0; }
  .concurso-nombre { font-size: 18px; }
  .concurso .requisito-nombre {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* 9.2 · Los cuatro pasos como un plano: cada papel dibujado con su globo y su texto. En el móvil, uno debajo de otro;
   desde 960 px, en fila, unidos por flechas de tinta entre papel y papel */
.pasos-plano-titulo { margin-bottom: 28px; }
.lamina-pasos {
  --papel: var(--blanco); --trazo: var(--tinta); --trazo-suave: var(--gris-dibujo);
  --titulo: var(--tinta); --acento: var(--trayectoria); --banda: var(--gris-claro);
}
.pasos-plano { list-style: none; display: grid; }
.pasos-plano li {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "figura globo" "figura texto";
  gap: 8px 16px; align-content: start; padding-block: 20px; border-bottom: 1px solid var(--linea);
}
.pasos-plano li:first-child { padding-top: 0; }
.pasos-plano li:last-child { border-bottom: 0; padding-bottom: 0; }
.paso-plano-figura { grid-area: figura; position: relative; display: flex; justify-content: center; align-items: flex-start; }
.pasos-plano .pieza-dibujo { max-width: 60px; }
.pasos-plano .pieza-dibujo.pieza-apaisada { max-width: 72px; margin-top: 10px; }
.pasos-plano .globo { grid-area: globo; }
.pasos-plano p { grid-area: texto; max-width: 34ch; }
/* La explicación del DEUC va debajo de la tira, para que los cuatro pasos acaben a la misma altura */
.pasos-plano-nota { margin-top: 28px; max-width: 72ch; }
.pasos-plano-cierre { margin-top: 28px; max-width: 52ch; }
/* En el móvil, los títulos pintados en los papeles medirían unos 5 px: se ocultan y queda el resto del dibujo */
@media (max-width: 639.98px) { .lamina-pasos, .despiece { --titulo: transparent; } }
@media (min-width: 960px) {
  .pasos-plano-titulo { margin-bottom: 40px; }
  .lamina-pasos { padding: 48px 56px; }
  .pasos-plano { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hueco); }
  .pasos-plano li {
    grid-template-columns: none; grid-template-areas: "figura" "globo" "texto";
    justify-items: start; gap: 0; padding: 0; border-bottom: 0;
  }
  .paso-plano-figura { width: 100%; height: 170px; align-items: flex-end; justify-content: center; margin-bottom: 24px; }
  .pasos-plano .pieza-dibujo { max-width: 112px; }
  .pasos-plano .pieza-dibujo.pieza-apaisada { max-width: 152px; margin-top: 0; }
  .pasos-plano .globo { margin-bottom: 12px; }
  /* Flecha de tinta del borde de un papel al siguiente: los papeles van centrados en su columna (unos 112 px de ancho) */
  .pasos-plano li:not(:last-child) .paso-plano-figura::after {
    content: ""; position: absolute; top: 55%; left: calc(50% + 72px);
    width: calc(100% + var(--hueco) - 144px); border-top: 1.5px solid var(--tinta);
  }
  .pasos-plano li:not(:last-child) .paso-plano-figura::before {
    content: ""; position: absolute; top: calc(55% - 5px); left: calc(150% + var(--hueco) - 82px);
    width: 10px; height: 10px; border-right: 1.5px solid var(--tinta); border-bottom: 1.5px solid var(--tinta);
    transform: rotate(-45deg);
  }
  /* La última flecha llega al sobre, que es apaisado y más ancho (152 px) */
  .pasos-plano li:nth-child(3) .paso-plano-figura::after { width: calc(100% + var(--hueco) - 162px); }
  .pasos-plano li:nth-child(3) .paso-plano-figura::before { left: calc(150% + var(--hueco) - 100px); }
  .pasos-plano-cierre { margin-top: 36px; }
}

/* 9.3 · Certificados en una línea de tiempo: de hoy (el borde izquierdo) a los próximos meses. Vigente en rayado de
   tinta, la renovación a tiempo en rayado azul, pegada (sin días en blanco), y la campana del aviso encima */
.certificados-regla {
  display: flex; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid var(--linea);
  font-size: 16px; color: var(--texto-2);
}
.certificados-lista { list-style: none; display: grid; gap: 20px; }
.certificados-lista li { display: grid; gap: 34px; }
.certificado-nombre { font: 600 17px/1.3 var(--letra-titulo); letter-spacing: -0.01em; }
.certificado-pista { position: relative; display: flex; gap: 2px; height: 16px; border-left: 1.5px solid var(--tinta); }
.tramo-vigente, .tramo-renovado { display: block; height: 100%; transform-origin: left center; transition: transform 700ms var(--ease-out); }
.tramo-vigente { flex: 0 0 calc(var(--fin) * 100%); border: 1px solid var(--tinta); background: var(--rayado-tinta); }
.tramo-renovado { flex: 1 1 auto; border: 1px solid var(--trayectoria); background: var(--rayado-azul); transition-delay: 700ms; }
.marca-aviso {
  position: absolute; left: calc(var(--aviso) * 100%); bottom: calc(100% + 6px); translate: -12px 0;
  display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; white-space: nowrap;
  transition: opacity 250ms ease 450ms, scale 300ms var(--ease-out) 450ms;
}
.marca-aviso::before { content: ""; position: absolute; left: 11px; top: 100%; height: 6px; border-left: 1.5px solid var(--trayectoria); }
.aviso-icono {
  display: block; width: 24px; height: 24px; padding: 4px; border-radius: 50%;
  background: var(--azul-suave); color: var(--enlace); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.aviso-texto { font: 700 16px/1 var(--letra-texto); color: var(--enlace); }
/* Primera fila: los tramos, rotulados debajo (vigente, caduca con su marca y renovado a tiempo) */
.certificado-rotulos { position: relative; display: flex; justify-content: space-between; margin-top: -26px; font-size: 16px; color: var(--texto-2); }
.certificado-rotulos .rotulo-caduca { position: absolute; left: calc(var(--fin) * 100%); translate: -50% 0; padding-top: 6px; color: var(--tinta); font-weight: 700; }
.certificado-rotulos .rotulo-caduca::before { content: ""; position: absolute; left: 50%; top: -4px; height: 8px; border-left: 1.5px solid var(--tinta); }
.clave-aviso-icono { display: inline-flex; }
.certificados-lista li:nth-child(2) .tramo-vigente { transition-delay: 90ms; }
.certificados-lista li:nth-child(2) .tramo-renovado { transition-delay: 790ms; }
.certificados-lista li:nth-child(2) .marca-aviso { transition-delay: 540ms; }
.certificados-lista li:nth-child(3) .tramo-vigente { transition-delay: 180ms; }
.certificados-lista li:nth-child(3) .tramo-renovado { transition-delay: 880ms; }
.certificados-lista li:nth-child(3) .marca-aviso { transition-delay: 630ms; }
.js .certificados:not(.en-vista) .tramo-vigente, .js .certificados:not(.en-vista) .tramo-renovado { transform: scaleX(0); }
.js .certificados:not(.en-vista) .marca-aviso { opacity: 0; scale: 0.6; }

/* 9.4 · Apertura de los concursos: las filas aparecen, las marcas salen columna a columna (solvencia, certificados y plazo)
   y, al final, la decisión. Al filtrar, el navegador repetiría la apertura de las filas que vuelven: se quita */
@media (prefers-reduced-motion: no-preference) {
  .concurso { animation: fundir 380ms ease backwards; animation-delay: calc(300ms + var(--r) * 60ms); }
  .concurso .requisito-icono { animation: marcar 320ms var(--ease-out) backwards; }
  .concurso > .requisito:nth-child(2) .requisito-icono { animation-delay: calc(800ms + var(--r) * 50ms); }
  .concurso > .requisito:nth-child(3) .requisito-icono { animation-delay: calc(1100ms + var(--r) * 50ms); }
  .concurso > .requisito:nth-child(4) .requisito-icono { animation-delay: calc(1400ms + var(--r) * 50ms); }
  .concurso .decision { animation: aparecer 360ms var(--ease-out) backwards; animation-delay: calc(1850ms + var(--r) * 80ms); }
  .concursos.filtrada .concurso, .concursos.filtrada .requisito-icono, .concursos.filtrada .decision { animation: none; }
}
@keyframes marcar { from { opacity: 0; scale: 0.5; } }
@media (prefers-reduced-motion: reduce) {
  .tramo-vigente, .tramo-renovado, .marca-aviso { transition: none; }
  .js .certificados:not(.en-vista) .tramo-vigente, .js .certificados:not(.en-vista) .tramo-renovado { transform: none; }
  .js .certificados:not(.en-vista) .marca-aviso { opacity: 1; scale: 1; }
}

/* ---------- 10 · Servicios (08/10/2026) ----------
   10.1 Cómo se ayudan las dos áreas (el ciclo de la cabecera) · 10.2 Las dos áreas, con su miniatura
   10.3 Cómo se paga (cuándo llega cada pago) · 10.4 Tarjeta final con entradilla · 10.5 Apertura y reducir movimiento */

/* 10.1 · El ciclo: dos bloques y dos flechas azules (lo que sale hecho, con su rótulo). Cada flecha lleva su papel:
   la carpeta de documentación va a licitaciones y el contrato vuelve a procesos.
   Móvil: un bloque arriba y otro abajo; la ida baja por la izquierda y la vuelta sube por la derecha.
   Desde 640 px: un bloque a cada lado y las flechas en medio, la ida arriba y la vuelta abajo, tocando los dos bloques.
   Los títulos pintados en los papeles medirían menos de 8 px: aquí no se pintan (el nombre va al lado) */
.ciclo {
  margin-top: 40px;
  --papel: var(--blanco); --trazo: var(--tinta); --trazo-suave: var(--gris-dibujo);
  --titulo: transparent; --acento: var(--trayectoria); --banda: var(--gris-claro);
}
.ciclo-lienzo { padding-bottom: 16px; }
.ciclo .mejoras-titulo { padding-bottom: 20px; }
.ciclo-dibujo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px;
  grid-template-areas: "procesos procesos" "ida vuelta" "licitaciones licitaciones";
}
.ciclo-procesos { grid-area: procesos; }
.ciclo-licitaciones { grid-area: licitaciones; }
.ciclo-ida { grid-area: ida; }
.ciclo-vuelta { grid-area: vuelta; }
.ciclo-bloque {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px;
  border: 1px solid var(--linea); border-radius: 12px; background: var(--blanco);
}
.ciclo-dibujo-area { flex: none; width: 44px; height: auto; aspect-ratio: 210 / 297; }
.ciclo-nombre { font: 700 20px/1.2 var(--letra-titulo); letter-spacing: -0.015em; }

/* Cada flecha: el trazo (con su punta), el papel que lleva y su rótulo */
.ciclo-flecha {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "papel" "rotulo";
  row-gap: 8px; align-content: start; padding: 16px 0 20px 26px;
}
.ciclo-trazo { position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; }
.ciclo-trazo::before {
  content: ""; position: absolute; inset: 0; background: var(--trayectoria);
  transform-origin: center top; --trazar-desde: scaleY(0);
}
.ciclo-vuelta .ciclo-trazo::before { transform-origin: center bottom; }
.ciclo-trazo::after {
  content: ""; position: absolute; left: 50%; width: 10px; height: 10px;
  border: 0 solid var(--trayectoria); translate: -50% 0; rotate: 45deg;
}
.ciclo-ida .ciclo-trazo::after { bottom: 1px; border-width: 0 2px 2px 0; }
.ciclo-vuelta .ciclo-trazo::after { top: 1px; border-width: 2px 0 0 2px; }
.ciclo-papel { grid-area: papel; width: 34px; height: auto; aspect-ratio: 210 / 297; --llevar-desde: 0 -14px; }
.ciclo-vuelta .ciclo-papel { --llevar-desde: 0 14px; }
.ciclo-rotulo { grid-area: rotulo; font: 600 16px/1.3 var(--letra-titulo); letter-spacing: -0.01em; overflow-wrap: break-word; }
/* En los móviles más estrechos, «documentación» no cabe entera: se parte con guion, solo en palabras de 10 letras o más */
@media (max-width: 379.98px) {
  .ciclo-rotulo { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
}

@media (min-width: 640px) {
  .ciclo-dibujo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 0; row-gap: 14px;
    grid-template-areas: "procesos ida licitaciones" "procesos vuelta licitaciones";
  }
  .ciclo-bloque { flex-direction: column; justify-content: center; gap: 14px; padding: 24px 16px; text-align: center; }
  .ciclo-dibujo-area { width: 60px; }
  /* Los nombres ocupan siempre dos líneas de alto, para que los dos dibujos queden a la misma altura */
  .ciclo-nombre { display: flex; align-items: center; justify-content: center; min-height: 2.4em; }
  /* El trazo pasa por debajo del papel, que lleva un margen blanco, como el rótulo de una cota */
  .ciclo-flecha { justify-items: center; padding: 0; text-align: center; }
  .ciclo-ida { grid-template-areas: "rotulo" "papel"; align-content: end; }
  .ciclo-vuelta { grid-template-areas: "papel" "rotulo"; align-content: start; }
  .ciclo-trazo { position: relative; grid-area: papel; align-self: center; justify-self: stretch; inset: auto; width: auto; height: 2px; }
  .ciclo-trazo::before { transform-origin: left center; --trazar-desde: scaleX(0); }
  .ciclo-vuelta .ciclo-trazo::before { transform-origin: right center; }
  .ciclo-trazo::after { top: 50%; bottom: auto; translate: 0 -50%; rotate: -45deg; }
  .ciclo-ida .ciclo-trazo::after { left: auto; right: 1px; border-width: 0 2px 2px 0; }
  .ciclo-vuelta .ciclo-trazo::after { left: 1px; border-width: 2px 0 0 2px; }
  .ciclo-papel {
    position: relative; box-sizing: content-box; width: 40px; padding-inline: 10px; background: var(--blanco);
    --llevar-desde: -28px 0;
  }
  .ciclo-vuelta .ciclo-papel { --llevar-desde: 28px 0; }
  .ciclo-rotulo { max-width: 24ch; padding-inline: 20px; font-size: 17px; text-wrap: balance; }
}
@media (min-width: 960px) {
  .ciclo { margin-top: 56px; }
  .ciclo-lienzo { padding-bottom: 40px; }
  .ciclo .mejoras-titulo { padding-bottom: 28px; }
  .ciclo-dibujo { row-gap: 20px; }
  .ciclo-bloque { padding: 32px 24px; gap: 18px; }
  .ciclo-dibujo-area { width: 92px; }
  .ciclo-nombre { font-size: 23px; }
  .ciclo-papel { width: 46px; padding-inline: 14px; }
  .ciclo-rotulo { font-size: 18px; }
}

/* 10.2 · Las dos áreas (la pieza de la portada), cada una con la miniatura quieta del entregable de su página:
   un dibujo sobre gris claro, arriba de la tarjeta y a sangre. Sin texto que leer: las líneas grises hacen de texto */
.areas-titulo { margin-bottom: 32px; }
.area-miniatura {
  align-self: stretch; margin: -28px -24px 10px; padding: 24px;
  border-bottom: 1px solid var(--linea); background: var(--gris-claro);
  /* El radio de la tarjeta menos su borde de 1 px, para que el gris encaje en la esquina */
  border-radius: calc(var(--radio-tarjeta) - 1px) calc(var(--radio-tarjeta) - 1px) 0 0;
}
.mini-hoja { padding: 14px 16px 4px; border: 1px solid var(--linea); border-radius: 12px; background: var(--blanco); }
.mini-titulo { padding-bottom: 10px; font: 600 16px/1.2 var(--letra-titulo); letter-spacing: -0.01em; }
.mini-filas { list-style: none; border-top: 1px solid var(--tinta); }
.mini-fila {
  position: relative; display: grid; align-items: center; gap: 10px; min-height: 42px; padding-block: 8px;
  border-bottom: 1px solid var(--linea);
}
.mini-fila:last-child { border-bottom: 0; }
.mini-nombre { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.mini-texto { display: block; flex: 0 1 calc(var(--n) * 100%); height: 6px; border-radius: 10px; background: var(--gris-dibujo); }
/* La leyenda, como en la pieza de verdad: así se lee qué es cada barra y cada marca */
.mini-clave { gap: 6px 20px; padding-bottom: 14px; }
/* Lista de mejoras: puesto, nombre, horas ahorradas (azul) y coste (tinta), sin cifras */
.mini-mejora { grid-template-columns: 12px minmax(0, 1fr) 22% 22%; }
.mini-num { font: 700 16px/1 var(--letra-titulo); font-variant-numeric: tabular-nums; color: var(--enlace); }
.mini-pista { position: relative; display: block; height: 12px; border-left: 1px solid var(--tinta); }
.mini-barra { position: absolute; left: 0; top: 2px; height: 8px; border: 1px solid; }
.mini-horas { width: calc(var(--horas) * 100%); border-color: var(--trayectoria); background: var(--rayado-azul); }
.mini-coste { width: calc(var(--coste) * 100%); border-color: var(--tinta); background: var(--rayado-tinta); }
/* La pestaña marino de la primera fila, con su texto, como en la lista de verdad */
.mini-mejora:first-child::after {
  content: "Empezamos por aquí"; position: absolute; right: 0; top: -13px;
  padding: 2px 10px; border-radius: 10px; background: var(--marino); color: var(--blanco);
  font: 700 16px/22px var(--letra-texto);
}
/* Concursos: nombre, las tres marcas (cumple en azul; no cumple, aspa sobre gris) y la decisión, con su palabra.
   En el móvil, el nombre arriba y, debajo, las marcas y la decisión; desde 640 px, todo en una fila. Lo descartado, tachado */
.mini-concurso { grid-template-columns: repeat(3, 22px) minmax(0, 1fr); gap: 8px; }
.mini-concurso .mini-nombre { grid-column: 1 / -1; }
.mini-descartado .mini-texto { background: var(--linea); }
.mini-descartado .mini-nombre::after {
  content: ""; position: absolute; left: -3px; top: calc(50% - 0.75px); width: calc(var(--n) * 100% + 6px); height: 1.5px;
  background: var(--texto-2);
}
.mini-marca { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 10px; }
.mini-marca svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mini-cumple { background: var(--azul-suave); color: var(--enlace); }
.mini-falla { background: var(--gris-claro); color: var(--tinta); }
.mini-decision { justify-self: end; padding: 2px 10px; border-radius: 10px; font: 700 16px/1.3 var(--letra-texto); white-space: nowrap; }
.mini-si { background: var(--marino); color: var(--blanco); }
.mini-no { background: var(--gris-claro); color: var(--tinta); }
@media (min-width: 640px) {
  .mini-concurso { grid-template-columns: minmax(0, 1fr) repeat(3, 22px) 6.75rem; }
  .mini-concurso .mini-nombre { grid-column: auto; }
  .mini-decision { justify-self: start; }
}
@media (min-width: 960px) {
  .areas-titulo { max-width: none; margin-bottom: 48px; }
  .area-miniatura { margin: -40px -40px 14px; padding: 32px 40px; }
  .mini-hoja { padding: 18px 20px 6px; }
  .mini-mejora { grid-template-columns: 14px minmax(0, 1fr) 24% 24%; gap: 14px; }
}

/* 10.3 · Cómo se paga: el texto a la izquierda y, en su lámina, cuándo llega cada pago, de ejemplo y sin cifras ni fechas.
   Arriba de cada pista, los precios cerrados (rayado de tinta); debajo, la cuota de cada mes (marino), desde «Empezamos» */
.pagos-areas { list-style: none; display: grid; }
.pagos-areas li { display: grid; gap: 10px; padding-block: 20px; border-top: 1px solid var(--linea); }
.pagos-areas li:first-child { border-top-color: var(--tinta); }
.pagos-areas h3 { font-size: 23px; }
.pagos-areas p { max-width: 52ch; }
.pagos-texto .paso-servicio-cierre { margin-top: 8px; max-width: 40ch; }
.pagos-regla {
  display: flex; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid var(--linea);
  font-size: 16px; color: var(--texto-2);
}
.pagos-lista { list-style: none; display: grid; gap: 22px; }
.pagos-lista li { display: grid; gap: 10px; }
.pagos-nombre { font: 600 17px/1.3 var(--letra-titulo); letter-spacing: -0.01em; }
.pagos-pista {
  display: grid; gap: 4px; border-left: 1.5px solid var(--tinta);
  clip-path: inset(0 0 0 0); transition: clip-path 1200ms var(--ease-in-out);
}
.pagos-lista li:nth-child(2) .pagos-pista { transition-delay: 150ms; }
.js .pagos:not(.en-vista) .pagos-pista { clip-path: inset(0 100% 0 0); }
.pagos-carril { position: relative; display: block; height: 16px; }
.pago-cerrado {
  position: absolute; top: 0; bottom: 0; left: calc(var(--desde) / 12 * 100%); width: calc(var(--largo) / 12 * 100% - 2px);
  border: 1px solid var(--tinta); background: var(--rayado-tinta);
}
/* Una celda por mes, con 2 px entre una y otra, como las casillas de un calendario */
.pagos-cuotas {
  height: 12px; margin-left: calc(var(--cuota) / 12 * 100%);
  background: linear-gradient(90deg, var(--marino) calc(100% - 2px), transparent 0) 0 0 / calc(100% / (12 - var(--cuota))) 100%;
  background-repeat: round no-repeat;
}
.clave-cuota {
  flex: none; width: 32px; height: 12px;
  background: linear-gradient(90deg, var(--marino) calc(50% - 1px), transparent 0 calc(50% + 1px), var(--marino) 0);
}
@media (min-width: 960px) {
  .pagos-texto { grid-column: 1 / span 5; }
  .pagos-lamina { grid-column: 7 / -1; padding: 36px 40px; }
  .pagos-areas li { padding-block: 24px; }
  .pagos-areas h3 { font-size: 26px; }
  .pagos-texto .paso-servicio-cierre { font-size: 21px; }
}

/* 10.4 · La tarjeta final, con una entradilla bajo el título */
.empezar-entradilla { margin: -8px 0 28px; color: var(--texto-sobre-marino); }
@media (min-width: 960px) { .empezar-entradilla { margin: -20px 0 40px; } }

/* 10.5 · Apertura del ciclo (la tarjeta sube con la regla del apartado 7): se dibuja la ida con la carpeta encima y,
   después, la vuelta con el contrato. Una sola vez, solo CSS. Con «reducir movimiento», todo quieto y dibujado */
@media (prefers-reduced-motion: no-preference) {
  .ciclo-trazo::before { animation: trazar 700ms var(--ease-in-out) 650ms backwards; }
  .ciclo-vuelta .ciclo-trazo::before { animation-delay: 1450ms; }
  .ciclo-trazo::after { animation: fundir 200ms ease 1300ms backwards; }
  .ciclo-vuelta .ciclo-trazo::after { animation-delay: 2100ms; }
  .ciclo-papel { animation: llevar 600ms var(--ease-out) 800ms backwards; }
  .ciclo-vuelta .ciclo-papel { animation-delay: 1600ms; }
}
@keyframes trazar { from { transform: var(--trazar-desde); } }
@keyframes llevar { from { opacity: 0; translate: var(--llevar-desde); } }
@media (prefers-reduced-motion: reduce) {
  .pagos-pista { transition: none; }
  .js .pagos:not(.en-vista) .pagos-pista { clip-path: none; }
}

/* ---------- 11 · Listas entre filetes (12/10/2026; compartidas desde el 14/10/2026 con «Quiénes somos») ----------
   Un filete de tinta arriba y grises entre filas, como las preguntas. El título de cada fila es un h3 en
   «Cómo trabajamos» y un h4 en «Quiénes somos», donde cada lista va bajo el título de su columna */
.lista-filetes { list-style: none; border-top: 1px solid var(--tinta); }
.lista-filetes li { display: grid; gap: 6px; padding-block: 20px; border-bottom: 1px solid var(--linea); }
.lista-filetes :is(h3, h4) { margin: 0; font: 700 20px/1.2 var(--letra-titulo); letter-spacing: -0.015em; text-wrap: balance; }
.lista-filetes p { max-width: 60ch; color: var(--texto-2); }
@media (min-width: 960px) {
  .lista-filetes li { padding-block: 24px; }
  .lista-filetes :is(h3, h4) { font-size: 23px; }
}