html[data-pagina="como-funciona"] .cf-cab__luz { left: 76%; top: 62%; }
.cf-plazo { grid-column: 4 / 7; grid-row: 3 / span 2; align-self: start; margin-top: 36px; padding-left: var(--calle); }
html[data-pagina="como-funciona"] .cf-plazo__fila > span { max-width: none; }
.cf-plazo__titulo { margin-bottom: 24px; color: var(--texto-secundario-sobre-oscuro); }
.cf-plazo__lista { display: grid; row-gap: 22px; }
.cf-plazo__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 10px; align-items: baseline; }
.cf-plazo__nombre, .cf-plazo__dato { font-weight: 500; font-size: 1.125rem; line-height: 1.3; color: var(--texto-sobre-oscuro); }
.cf-plazo__dato { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf-plazo__pista { grid-column: 1 / -1; position: relative; display: block; height: 12px; background: var(--superficie-oscura); }
.cf-plazo__barra { position: absolute; left: 0; top: 0; bottom: 0; background: var(--texto-secundario-sobre-oscuro); transform-origin: 0 50%; }
.cf-plazo__barra--1 { width: calc(100% / 3); background: var(--texto-sobre-oscuro); }
.cf-plazo__barra--2 { width: calc(100% * 2 / 3); }
.cf-plazo__barra--3 { width: 100%; }
html[data-pagina="como-funciona"] .cf-plazo__nota { margin-top: 24px; max-width: 42ch; font-size: 1rem; line-height: 1.5; color: var(--texto-secundario-sobre-oscuro); }

.cf-pasos__titulo { max-width: 16ch; }
html[data-pagina="como-funciona"] .cf-pasos__lista { margin-top: 48px; }
.cf-paso__texto { position: relative; }
.cf-paso__texto h3 { font-size: var(--fs-h3); line-height: 1.15; }
html[data-pagina="como-funciona"] .cf-paso__texto p { margin-top: 16px; max-width: 46ch; }
.cf-paso__texto::before { content: ""; position: absolute; left: 6px; top: 0.72em; width: 11px; height: 11px; border-radius: 50%; background: var(--texto); }
.cf-paso__foto { background: var(--linea); }
.cf-paso__foto img { object-position: 50% 40%; }

@media (min-width: 821px) {
  .cf-pasos__lista {
    --cf-foto-alto: min(calc(100svh - var(--cab) - 112px), 720px);
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(72svh, auto));
    column-gap: var(--calle);
  }
  .cf-paso { display: contents; }
  .cf-paso__texto { grid-column: 1 / 4; align-self: center; padding-left: 48px; }
  .cf-paso__pista { grid-column: 4 / 7; }
  .cf-paso--1 .cf-paso__texto { grid-row: 1; }
  .cf-paso--2 .cf-paso__texto { grid-row: 2; }
  .cf-paso--3 .cf-paso__texto { grid-row: 3; }
  .cf-paso--4 .cf-paso__texto { grid-row: 4; }
  .cf-paso--1 .cf-paso__pista { grid-row: 1 / 5; }
  .cf-paso--2 .cf-paso__pista { grid-row: 2 / 5; }
  .cf-paso--3 .cf-paso__pista { grid-row: 3 / 5; }
  .cf-paso--4 .cf-paso__pista { grid-row: 4 / 5; }
  .cf-paso__foto {
    position: sticky;
    top: calc(var(--cab) + (100svh - var(--cab) - var(--cf-foto-alto)) / 2);
    width: min(100%, calc(var(--cf-foto-alto) * 0.8));
    aspect-ratio: 4 / 5;
    margin-left: auto;
  }
  .cf-pasos__lista::before, .cf-pasos__lista::after { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 1px; pointer-events: none; }
  .cf-pasos__lista::before { background: var(--linea); }
  .cf-pasos__lista::after { background: var(--texto); transform-origin: 50% 0; transform: scaleY(var(--cf-progreso, 1)); }
}
@media (min-width: 821px) and (max-width: 1100px) {
  .cf-paso__texto { padding-left: 40px; padding-right: 8px; }
}

@media (max-width: 820px) {
  html[data-pagina="como-funciona"] .cf-pasos__lista { display: grid; row-gap: 56px; margin-top: 32px; }
  .cf-paso { display: flex; flex-direction: column; }
  .cf-paso__pista { order: -1; margin-bottom: 24px; }
  .cf-paso__foto { width: 100%; aspect-ratio: 3 / 2; }
  .cf-paso__texto { padding-left: 24px; }
  .cf-paso__texto::before { left: 0; top: 0.6em; width: 9px; height: 9px; }
}

html[data-pagina="como-funciona"] .cf-pido__lista { margin-top: 48px; border-top: 1px solid var(--linea); }
.cf-pido__fila { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--calle); align-items: baseline; padding-block: 32px; border-bottom: 1px solid var(--linea); }
.cf-pido__nombre { grid-column: 1 / 4; font-stretch: 62%; font-weight: 800; font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.01em; }
.cf-pido__texto { grid-column: 4 / 7; }
@media (max-width: 820px) {
  .cf-pido__fila { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding-block: 24px; }
  .cf-pido__nombre, .cf-pido__texto { grid-column: 1; }
}

.cf-vas .seccion__int { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cf-vas__titulo { font-size: var(--fs-destacado); line-height: 1.3; letter-spacing: -0.01em; }
html[data-pagina="como-funciona"] .cf-vas__cita {
  margin-top: 24px;
  max-width: 22em;
  font-stretch: 62%;
  font-weight: 800;
  font-size: var(--fs-cifra);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
html[data-pagina="como-funciona"] .cf-vas__texto { margin-top: 32px; max-width: 50ch; }
@media (max-width: 820px) {
  html[data-pagina="como-funciona"] .cf-vas__cita { font-size: var(--fs-h2); }
  .cf-vas .seccion__int { align-items: flex-start; text-align: left; }
}

html[data-pagina="como-funciona"] .cf-dudas__lista { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; max-width: 56rem; margin-top: 48px; }
.cf-duda { padding-top: 24px; border-top: 1px solid var(--linea); }
.cf-duda__pregunta { font-size: var(--fs-destacado); line-height: 1.3; letter-spacing: -0.01em; }
html[data-pagina="como-funciona"] .cf-duda p { margin-top: 12px; }
@media (min-width: 1180px) {
  html[data-pagina="como-funciona"] .cf-dudas__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--calle); max-width: none; }
}

@media (max-width: 820px) {
  .cf-plazo { grid-column: 1; grid-row: auto; margin-top: 48px; padding-left: 0; }
  html[data-pagina="como-funciona"] .cf-cab__luz { left: 50%; top: 78%; }
}