/* AutomateK · S6 «Cómo funciona». Cuatro pasos y, en cada uno, dos líneas: lo
   que hacemos nosotros y lo que tienes que hacer tú. La del «tú» es a
   propósito la más corta: ese contraste es el argumento, así que las cuatro
   quedan alineadas en la misma fila para poder compararlas de un vistazo.
   La línea de puntos que une los pasos la dibuja proceso.js con los puntos que
   llegan de la sección anterior. En móvil va en vertical, ya completa y
   quieta. Sin JavaScript, la línea y los círculos se ven igual, hechos en CSS.
   No toca portada.js ni portada.css: se quita borrando sus dos líneas. */

.prcEnv{max-width:1180px;margin:0 auto}
/* La caja de la garantía cierra la sección: sin este recorte, el hueco hasta la
   banda de confianza era casi una pantalla. */
#proceso{padding-bottom:clamp(38px,4.6vh,56px)}
.prcPasos{position:relative;margin-top:clamp(20px,2.2vw,30px)}
/* Solo la banda de arriba: es donde van la línea y los cuatro círculos. */
.prcCv{position:absolute;left:0;top:0;width:100%;height:58px;pointer-events:none;z-index:0}
/* Lienzo del vuelo desde la sección anterior: por debajo de la cabecera
   (z-index 120 en portada.css) y sin capturar el ratón. */
#prcAireCv{position:fixed;inset:0;z-index:100;pointer-events:none;width:100%;height:100%}

.prcGrid{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(18px,2.6vw,40px);row-gap:0}
.prcPaso{position:relative;display:flex;flex-direction:column;min-width:0}
/* Las cuatro columnas comparten filas: el círculo, el título, lo nuestro y —
   abajo, a la misma altura en las cuatro— lo tuyo. */
@supports (grid-template-rows:subgrid){
  .prcGrid{grid-template-rows:auto auto 1fr auto}
  .prcPaso{display:grid;grid-row:span 4;grid-template-rows:subgrid}
}

.prcNum{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#FFFFFF;border:2px solid #1C4BD8;font-family:'General Sans',Inter,sans-serif;font-weight:600;font-size:16px;color:#1C4BD8}

/* EL CUARTO YA NO VA RELLENO, Y NO ES UNA DECISION ESTETICA: era invisible.
   Corregido el 2026-08-26, medido en el navegador.

   La idea original era que el ultimo paso fuera un circulo azul lleno con la
   cifra en blanco —ahi termina el proceso—, y en CSS puro funcionaba. Pero con
   JavaScript activo el relleno lo pinta proceso.js sobre su lienzo, y hoy no lo
   esta pintando: lo unico que quedaba era la cifra blanca sobre el fondo blanco
   de la pagina. Contraste 1 a 1. El cuarto numero no se veia.

   Habia dos arreglos: devolverle el relleno arreglando proceso.js, o quitarle
   la excepcion. Se eligio lo segundo porque no depende de que un dibujo se
   pinte a tiempo: el cuarto numero se lee siempre, con JavaScript y sin el.
   Medido despues del cambio: los cuatro numeros en #1C4BD8 sobre fondo
   transparente, contraste 6,89 a 1.

   Aqui habia dos reglas y se han retirado las dos: una daba al cuarto circulo
   fondo y borde azules con la cifra blanca, y otra le devolvia la cifra azul
   cuando el paso se encendia. Si algun dia se arregla el relleno en proceso.js
   y se quiere recuperar la distincion, se vuelven a escribir para la clase
   prcNum4, que el HTML sigue poniendo en el cuarto paso: se quito la regla, no
   la marca.

   Nota de metodo, por si alguien repite esta comprobacion: despues de cambiar
   este archivo, el numero seguía saliendo blanco al medirlo. No era el CSS:
   era la cache del navegador. Cambiar el href de la hoja al vuelo no basta;
   hay que recargar la pagina entera. Si mides un color que no se corresponde
   con lo que pone aqui, descarta primero la cache antes de tocar una regla. */

.prcPaso::after{content:"";position:absolute;left:52px;right:calc(6px - clamp(18px,2.6vw,40px));top:22px;height:2px;background:repeating-linear-gradient(90deg,rgba(28,75,216,.5) 0 3px,transparent 3px 9px)}
.prcPaso:last-child::after{display:none}

.prcCab{margin:22px 0 0;display:flex;flex-direction:column;gap:7px}
.prcT{margin:0;font-family:'General Sans',Inter,sans-serif;font-weight:600;font-size:clamp(18px,1.55vw,21px);line-height:1.15;letter-spacing:-0.02em;color:#1D1D1F;text-wrap:balance}
.prcMeta{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#1C4BD8}
.prcLin{margin:16px 0 0;display:flex;flex-direction:column;gap:7px}
.prcLinTu{margin-top:18px;padding-top:16px;border-top:1px solid #E5E5E7}
.prcQuien{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#1C4BD8}
.prcQuienTu{color:#61697A}
.prcTxt{margin:0;font-size:clamp(15px,1.45vw,16.5px);line-height:1.5;color:#1D1D1F;text-wrap:pretty}
.prcTxtTu{font-size:clamp(14px,1.35vw,15.5px);color:#61697A}

.prcGar{max-width:44em;margin:clamp(40px,5vw,64px) auto 0;background:rgba(28,75,216,.05);border:1px solid rgba(28,75,216,.2);border-radius:18px;padding:clamp(16px,2vw,22px) clamp(20px,3vw,32px);text-align:center;font-family:'General Sans',Inter,sans-serif;font-weight:600;font-size:clamp(16.5px,1.75vw,20px);line-height:1.45;letter-spacing:-0.015em;color:#1D1D1F;text-wrap:pretty}

/* Con JavaScript, la línea y los círculos los dibujan los puntos: el CSS se
   aparta y solo deja las cifras, que aparecen cuando su círculo está hecho. */
.prcJs .prcPaso::after{display:none}
.prcJs .prcNum{background:transparent;border-color:transparent;color:transparent;transition:color .55s ease}
.prcJs .prcNum.prcOn{color:#1C4BD8}
.prcJs .prcCab,.prcJs .prcLin{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .75s cubic-bezier(.16,.84,.3,1)}
.prcJs .prcPaso.prcOn .prcCab,.prcJs .prcPaso.prcOn .prcLin{opacity:1;transform:none}
.prcJs .prcPaso.prcOn .prcLinTu{transition-delay:.14s}

/* Móvil: los pasos apilados, la línea en vertical y ya completa. */
@media(max-width:899px){
  .prcCv{display:none}
  .prcGrid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;column-gap:0}
  .prcPaso{grid-row:auto;display:grid;grid-template-rows:none;grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding-bottom:clamp(26px,7vw,36px)}
  .prcPaso:last-child{padding-bottom:0}
  .prcPaso::after{left:21px;right:auto;top:54px;bottom:0;width:2px;height:auto;background:repeating-linear-gradient(rgba(28,75,216,.5) 0 3px,transparent 3px 9px)}
  .prcNum{grid-column:1;grid-row:1;width:44px;height:44px}
  .prcCab{grid-column:2;grid-row:1;margin:0;min-height:44px;justify-content:center}
  .prcLin{grid-column:2;margin-top:14px}
  .prcLinTu{margin-top:14px;padding-top:12px}
  .prcGar{text-align:left}
}