/* «5 pasos del desafío a la solución implementada» en HTML y CSS, sin imagen ni JS. Lo inserta clon-estatico/flujo.py en la portada.
   Una sola idea: la flecha roja. Todo lo demás le sirve. Al pasar el mouse (o el foco) por un paso,
   la flecha se llena hasta ahí, los pasos anteriores quedan marcados y se enciende su fase. */

@font-face{font-family:"IL Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/il-cabecera/fuentes/schibsted-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IL Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(/wp-content/il-cabecera/fuentes/schibsted-grotesk-latin-600-normal.woff2) format("woff2")}

/* Hasta dónde va llena la flecha; animable. */
@property --avance{syntax:"<percentage>";inherits:true;initial-value:100%}

.il-flujo{--rojo:#c81e2b;--rojo-claro:#e5545f;--rojo-osc:#8f1019;--palido:#f4d5d8;
  --tinta:#15171b;--suave:#5f636a;--tenue:#8b8f96;--filete:#e1e2df;
  --t-rosa:#fdf0f1;--t-gris:#f4f4f2;
  --gap:14px;--suave-mov:cubic-bezier(.2,.7,.2,1);
  --letra:"IL Grotesk",-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-family:var(--letra);margin:8px 0 56px}
.il-flujo *{box-sizing:border-box}
.il-flujo h2{margin:0 0 30px;font:400 clamp(24px,3.2vw,34px)/1.2 "Roboto Slab",Georgia,serif;color:var(--tinta)}
.il-flujo h3{margin:0;font:600 17px/1.2 var(--letra);color:var(--tinta);letter-spacing:-.012em;transition:color .3s}
.il-flujo p{margin:0}

/* Fases: una regla fina en tres tramos, del rojo claro al profundo, como la flecha. */
.il-flujo__fases{display:grid;grid-template-columns:repeat(5,1fr);column-gap:var(--gap);margin-bottom:26px}
.il-fase{grid-column:span 2;border-top:2px solid var(--f);padding-top:9px;
  font:600 11px/1.2 var(--letra);letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);transition:color .3s}
.il-fase--def{grid-column:span 1;--f:#f0b3b8}
.il-fase--dis{--f:var(--rojo-claro)}
.il-fase--ent{--f:var(--rojo-osc)}

/* Pasos: 5 columnas; tarjetas arriba / flecha / tarjetas abajo. */
.il-flujo__pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);
  grid-template-rows:auto 64px auto;column-gap:var(--gap);counter-reset:paso;
  --avance:100%;transition:--avance .55s var(--suave-mov)}
/* La flecha. */
.il-flujo__pasos::before{content:"";grid-row:2;grid-column:1 / -1;margin:14px 0;
  background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0) 55%),
    linear-gradient(90deg,var(--rojo-claro) 0,var(--rojo) calc(var(--avance) * .6),var(--rojo-osc) var(--avance),var(--palido) var(--avance),var(--palido) 100%);
  clip-path:polygon(0 22%,calc(100% - 40px) 22%,calc(100% - 40px) 0,100% 50%,calc(100% - 40px) 100%,calc(100% - 40px) 78%,0 78%,14px 50%)}
/* El ciclo: una U punteada que vuelve del paso 5 al 1 por debajo de todo. */
.il-flujo__pasos::after{content:"";grid-row:2 / 4;grid-column:1 / -1;z-index:0;pointer-events:none;
  margin:32px calc((100% - 4 * var(--gap)) / 10) -30px;
  border:1.5px dashed #e8a9ae;border-top:0;border-radius:0 0 26px 26px}

.il-paso{grid-row:1 / 4;display:grid;grid-template-rows:subgrid;justify-items:center;text-align:center;
  position:relative;z-index:1;counter-increment:paso;outline:none;--tarjeta:var(--t-rosa)}
.il-paso:nth-child(even){--tarjeta:var(--t-gris)}
.il-paso:nth-child(1){grid-column:1}
.il-paso:nth-child(2){grid-column:2}
.il-paso:nth-child(3){grid-column:3}
.il-paso:nth-child(4){grid-column:4}
.il-paso:nth-child(5){grid-column:5}

.il-paso__punto{grid-row:2;align-self:center;position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--rojo);font:600 18px/1 var(--letra);font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 5px rgba(255,255,255,.4),0 8px 20px rgba(120,10,20,.28);
  transition:transform .35s var(--suave-mov),background .3s,color .3s,box-shadow .35s}
/* La punta del ciclo: entra al paso 1 desde abajo. */
.il-paso:first-child .il-paso__punto::after{content:"";position:absolute;left:50%;top:calc(100% + 12px);margin-left:-6px;
  border:6px solid transparent;border-top:0;border-bottom:9px solid #e8a9ae}

.il-paso__texto{grid-row:1;align-self:end;width:118%;position:relative;display:grid;gap:7px;margin-bottom:16px;
  padding:14px 14px 16px;background:var(--tarjeta);border:1px solid transparent;border-radius:14px;
  transition:transform .35s var(--suave-mov),box-shadow .35s,background .3s,border-color .3s,opacity .3s}
.il-paso--abajo .il-paso__texto{grid-row:3;align-self:start;margin:16px 0 0}
.il-paso__texto::after{content:"";position:absolute;left:50%;bottom:-16px;width:1px;height:16px;background:#d9b3b6;transition:background .3s}
.il-paso--abajo .il-paso__texto::after{bottom:auto;top:-16px}
/* Las tarjetas de las puntas no se salen: se alinean al borde y la rayita sigue apuntando al número. */
.il-paso:first-child .il-paso__texto{justify-self:start}
.il-paso:last-child .il-paso__texto{justify-self:end}
.il-paso:first-child .il-paso__texto::after{left:calc(50% / 1.18)}
.il-paso:last-child .il-paso__texto::after{left:calc(100% - 50% / 1.18)}
.il-paso__texto::before{content:"Paso " counter(paso);font:600 10.5px/1 var(--letra);letter-spacing:.14em;text-transform:uppercase;color:var(--rojo)}
.il-paso p{font-size:13.5px;line-height:1.45;color:var(--suave)}
.il-paso__fase{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.il-flujo .il-flujo__ciclo{position:relative;z-index:1;width:max-content;max-width:100%;margin:15px auto 0;height:30px;
  display:flex;align-items:center;gap:8px;padding:0 14px;background:#fff;border-radius:999px;
  font-size:12.5px;font-weight:600;color:var(--suave);letter-spacing:.01em}
.il-flujo__ciclo-icono{font-size:16px;line-height:1;color:var(--rojo)}

/* ——— Interacción: mouse o teclado sobre un paso ——— */
.il-paso:focus-visible .il-paso__texto{outline:2px solid var(--rojo);outline-offset:3px}
.il-flujo__pasos:has(.il-paso:nth-child(1):is(:hover,:focus-visible)){--avance:12%}
.il-flujo__pasos:has(.il-paso:nth-child(2):is(:hover,:focus-visible)){--avance:31%}
.il-flujo__pasos:has(.il-paso:nth-child(3):is(:hover,:focus-visible)){--avance:50%}
.il-flujo__pasos:has(.il-paso:nth-child(4):is(:hover,:focus-visible)){--avance:69%}
.il-flujo__pasos:has(.il-paso:nth-child(5):is(:hover,:focus-visible)){--avance:100%}
/* Pasos ya recorridos: número en rojo pleno. */
.il-flujo__pasos:has(.il-paso:nth-child(1):is(:hover,:focus-visible)) .il-paso:nth-child(-n+1) .il-paso__punto,
.il-flujo__pasos:has(.il-paso:nth-child(2):is(:hover,:focus-visible)) .il-paso:nth-child(-n+2) .il-paso__punto,
.il-flujo__pasos:has(.il-paso:nth-child(3):is(:hover,:focus-visible)) .il-paso:nth-child(-n+3) .il-paso__punto,
.il-flujo__pasos:has(.il-paso:nth-child(4):is(:hover,:focus-visible)) .il-paso:nth-child(-n+4) .il-paso__punto,
.il-flujo__pasos:has(.il-paso:nth-child(5):is(:hover,:focus-visible)) .il-paso:nth-child(-n+5) .il-paso__punto{background:var(--rojo);color:#fff}
/* El paso elegido sobresale; los demás se apartan. */
.il-paso:is(:hover,:focus-visible) .il-paso__punto{transform:scale(1.18);box-shadow:0 0 0 7px rgba(200,30,43,.18),0 12px 26px rgba(120,10,20,.35)}
.il-paso:is(:hover,:focus-visible) .il-paso__texto{background:#fff;border-color:rgba(200,30,43,.35);transform:translateY(-4px);
  box-shadow:0 18px 40px -12px rgba(120,10,20,.28)}
.il-paso--abajo:is(:hover,:focus-visible) .il-paso__texto{transform:translateY(4px)}
.il-paso:is(:hover,:focus-visible) .il-paso__texto::after{background:var(--rojo)}
.il-paso:is(:hover,:focus-visible) h3{color:var(--rojo)}
.il-flujo__pasos:has(.il-paso:is(:hover,:focus-visible)) .il-paso:not(:hover,:focus-visible) .il-paso__texto{opacity:.5}
/* Se enciende la fase del paso elegido. */
.il-flujo:has(.il-paso--def:is(:hover,:focus-visible)) .il-fase--def,
.il-flujo:has(.il-paso--dis:is(:hover,:focus-visible)) .il-fase--dis,
.il-flujo:has(.il-paso--ent:is(:hover,:focus-visible)) .il-fase--ent{color:var(--tinta)}

@media (prefers-reduced-motion:reduce){.il-flujo *{transition:none!important}}

/* Pantallas angostas: la flecha baja por la izquierda; las tarjetas van a la derecha. */
@media (max-width:700px){
  .il-flujo__fases{display:none}
  .il-flujo__pasos{grid-template-columns:52px 1fr;grid-template-rows:none;column-gap:14px;row-gap:14px}
  .il-flujo__pasos::before{grid-column:1;grid-row:1 / 6;margin:-6px 9px -14px;
    background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,0) 55%),
      linear-gradient(180deg,var(--rojo-claro) 0,var(--rojo) 60%,var(--rojo-osc) 100%);
    clip-path:polygon(0 0,50% 12px,100% 0,100% calc(100% - 26px),50% 100%,0 calc(100% - 26px))}
  .il-flujo__pasos::after{display:none}
  .il-paso{grid-column:1 / -1 !important;grid-row:auto;grid-template-rows:none;grid-template-columns:subgrid;
    justify-items:start;text-align:left;align-items:center}
  .il-paso:nth-child(1){grid-row:1}
  .il-paso:nth-child(2){grid-row:2}
  .il-paso:nth-child(3){grid-row:3}
  .il-paso:nth-child(4){grid-row:4}
  .il-paso:nth-child(5){grid-row:5}
  .il-paso__punto{grid-column:1;grid-row:1;justify-self:center;width:40px;height:40px;font-size:16px}
  .il-paso:first-child .il-paso__punto::after{display:none}
  .il-paso__texto,.il-paso--abajo .il-paso__texto{grid-column:2;grid-row:1;width:auto;margin:0;padding:12px 14px 14px;gap:4px}
  /* En vertical, la tarjeta del paso 5 no se pega a la derecha (eso es solo para la flecha horizontal). */
  .il-paso:first-child .il-paso__texto,.il-paso:last-child .il-paso__texto{justify-self:start}
  .il-paso__texto::after,.il-paso__texto::before{display:none}
  .il-paso--inicio .il-paso__fase{position:static;width:auto;height:auto;clip:auto;
    font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--rojo)}
  .il-flujo .il-flujo__ciclo{margin-top:18px;height:auto;padding:8px 14px;border-radius:14px;border:1px dashed #e8a9ae}
  .il-paso:is(:hover,:focus-visible) .il-paso__texto,.il-paso--abajo:is(:hover,:focus-visible) .il-paso__texto{transform:none}
  .il-flujo__pasos:has(.il-paso:is(:hover,:focus-visible)) .il-paso:not(:hover,:focus-visible) .il-paso__texto{opacity:1}
}